喜歡使用電腦進(jìn)行瀏覽網(wǎng)頁(yè)小說(shuō)或者網(wǎng)頁(yè)新聞的時(shí)候不知道會(huì)不會(huì)遇到在滾動(dòng)頁(yè)面的時(shí)候發(fā)生卡頓的問(wèn)題，那么今天我們就來(lái)談?wù)撘幌拢骸癶tml5中怎么解決webapp頁(yè)面滾動(dòng)卡頓問(wèn)題？網(wǎng)頁(yè)卡頓解決方法講解！ ”這個(gè)問(wèn)題。下面是小編經(jīng)過(guò)整理修改的文章！
手機(jī)瀏覽器在滾動(dòng)當(dāng)前頁(yè)面（還可能是縮放頁(yè)面）時(shí)，由于默認(rèn)行為被阻止，導(dǎo)致頁(yè)面被迫靜止，導(dǎo)致用戶使用體驗(yàn)差，感覺(jué)滾動(dòng)頁(yè)面有停頓感。
具體一點(diǎn)的解釋：由于 touchstart 事件對(duì)象的 cancelable 屬性為 true，也就是說(shuō)它的默認(rèn)行為可以被監(jiān)聽(tīng)器通過(guò) preventDefault() 方法阻止。但瀏覽器無(wú)法預(yù)先知道一個(gè)監(jiān)聽(tīng)器會(huì)不會(huì)調(diào)用 preventDefault()，它能做的只有等監(jiān)聽(tīng)器執(zhí)行完后再去執(zhí)行默認(rèn)行為，而監(jiān)聽(tīng)器執(zhí)行是要耗時(shí)的，有些甚至耗時(shí)很明顯，這樣就會(huì)導(dǎo)致頁(yè)面卡頓。即便監(jiān)聽(tīng)器是個(gè)空函數(shù)，也會(huì)產(chǎn)生一定的卡頓，畢竟空函數(shù)的執(zhí)行也會(huì)耗時(shí)。
addEventListener的useCapture參數(shù)
基本概念：xxx.addEventListener('事件名', ?function(xxx){xxx}, useCapture?).
第一個(gè)參數(shù)表示事件名稱（不含 on，如 "click"）；第二個(gè)參數(shù)表示要接收事件處理的函數(shù)；第三個(gè)參數(shù)為 useCapture.
下面就來(lái)看看這個(gè)東西是個(gè)啥意思，直接舉例子說(shuō)明更加直觀。
<div id="level1">
<div id="level2">
<div id="level3">請(qǐng)?jiān)诖它c(diǎn)擊</div>
</div>
</div>
<div id="info">
</div>var level1 = document.getElementById("level1");
var level2 = document.getElementById("level2");
var level3= document.getElementById("level3");
var info = document.getElementById("info");
outDiv.addEventListener("click", function () { info.innerHTML += "level1" + "<br>"; }, false);
middleDiv.addEventListener("click", function () { info.innerHTML += "level2" + "<br>"; }, false);
inDiv.addEventListener("click", function () { info.innerHTML += "level3" + "<br>"; }, false);根據(jù)上述代碼來(lái)看這個(gè) useCapture 為 true 和 false的作用效果：
全為 false 時(shí)，觸發(fā)順序?yàn)椋簂evel3、level2、level1
全為 true 時(shí)，觸發(fā)順序?yàn)椋簂evel1、level2、level3
level1為 true，其他為 false 時(shí)，觸發(fā)順序?yàn)椋簂evel1、level3、level2
level2為 true，其他為 false 時(shí)，觸發(fā)順序?yàn)椋簂evel2、level3、level1
level3為 true，其他為 false 時(shí)，觸發(fā)順序?yàn)椋簂evel3、level2、level1
level1為 false，其他為 true時(shí)，觸發(fā)順序?yàn)椋簂evel2、level3、level1
level2為 false，其他為 true時(shí)，觸發(fā)順序?yàn)椋簂evel1、level3、level2
level3為 false，其他為 true時(shí)，觸發(fā)順序?yàn)椋簂evel1、level2、level3
由上述結(jié)果得出如下結(jié)論：
true 的觸發(fā)順序總是在 false 之前；
如果多個(gè)均為 true，則外層的觸發(fā)先于內(nèi)層；
如果多個(gè)均為 false，則內(nèi)層的觸發(fā)先于外層。
passive屬性來(lái)控制事件行為
使用方式如下
addEventListener('事件名', function(xxx){xxx}, {
capture: false,
passive: false,
once: false
})三個(gè)屬性都是布爾類型的開(kāi)關(guān)，默認(rèn)值都為 false。
capture：等價(jià)于以前的 useCapture 參數(shù)；
once：就是表明該監(jiān)聽(tīng)器是一次性的，執(zhí)行一次后就被自動(dòng) removeEventListener 掉；
passive：用于webapp的touch事件
據(jù)了解，在手機(jī)瀏覽器使用事件的時(shí)候，有 80% 的滾動(dòng)事件監(jiān)聽(tīng)器是不會(huì)阻止默認(rèn)行為的，也就是說(shuō)大部分情況下，瀏覽器是白等了。所以，passive 監(jiān)聽(tīng)器誕生了，passive 的意思是“順從的”，表示它不會(huì)對(duì)事件的默認(rèn)行為說(shuō) no，瀏覽器知道了一個(gè)監(jiān)聽(tīng)器是 passive 的，它就可以在兩個(gè)線程里同時(shí)執(zhí)行監(jiān)聽(tīng)器中的 JavaScript 代碼和瀏覽器的默認(rèn)行為了。
通過(guò)這篇文章相信小伙伴們對(duì)：“html5中怎么解決webapp頁(yè)面滾動(dòng)卡頓問(wèn)題？網(wǎng)頁(yè)卡頓解決方法講解！ ”這個(gè)問(wèn)題就有了不少的了解，那么更多有關(guān)于Html5這個(gè)方面的內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持W3Cschool。
