詳解webapp頁面滾動卡頓的解決辦法

手機瀏覽器在滾動當(dāng)前頁面（還可能是縮放頁面）時，由于默認行為被阻止，導(dǎo)致頁面被迫靜止，導(dǎo)致用戶使用體驗差，感覺滾動頁面有停頓感。

具體一點的解釋：由于 touchstart 事件對象的 cancelable 屬性為 true，也就是說它的默認行為可以被監(jiān)聽器通過 preventDefault() 方法阻止。但瀏覽器無法預(yù)先知道一個監(jiān)聽器會不會調(diào)用 preventDefault()，它能做的只有等監(jiān)聽器執(zhí)行完后再去執(zhí)行默認行為，而監(jiān)聽器執(zhí)行是要耗時的，有些甚至耗時很明顯，這樣就會導(dǎo)致頁面卡頓。即便監(jiān)聽器是個空函數(shù)，也會產(chǎn)生一定的卡頓，畢竟空函數(shù)的執(zhí)行也會耗時。

addEventListener的useCapture參數(shù)

基本概念：xxx.addEventListener('事件名', function(xxx){xxx}, useCapture).

第一個參數(shù)表示事件名稱（不含 on，如 "click"）；第二個參數(shù)表示要接收事件處理的函數(shù)；第三個參數(shù)為 useCapture.

下面就來看看這個東西是個啥意思，直接舉例子說明更加直觀。

<div id="level1">
  <div id="level2">
    <div id="level3">請在此點擊</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ù)上述代碼來看這個 useCapture 為 true 和 false的作用效果：

全為 false 時，觸發(fā)順序為：level3、level2、level1
全為 true 時，觸發(fā)順序為：level1、level2、level3
level1為 true，其他為 false 時，觸發(fā)順序為：level1、level3、level2
level2為 true，其他為 false 時，觸發(fā)順序為：level2、level3、level1
level3為 true，其他為 false 時，觸發(fā)順序為：level3、level2、level1
level1為 false，其他為 true時，觸發(fā)順序為：level2、level3、level1
level2為 false，其他為 true時，觸發(fā)順序為：level1、level3、level2
level3為 false，其他為 true時，觸發(fā)順序為：level1、level2、level3

由上述結(jié)果得出如下結(jié)論：

true 的觸發(fā)順序總是在 false 之前；
如果多個均為 true，則外層的觸發(fā)先于內(nèi)層；
如果多個均為 false，則內(nèi)層的觸發(fā)先于外層。

passive屬性來控制事件行為

使用方式如下

addEventListener('事件名', function(xxx){xxx}, {
    capture: false,
    passive: false,
    once: false
})

三個屬性都是布爾類型的開關(guān)，默認值都為 false。

capture：等價于以前的 useCapture 參數(shù)；
once：就是表明該監(jiān)聽器是一次性的，執(zhí)行一次后就被自動 removeEventListener 掉；
passive：用于webapp的touch事件

據(jù)了解，在手機瀏覽器使用事件的時候，有 80% 的滾動事件監(jiān)聽器是不會阻止默認行為的，也就是說大部分情況下，瀏覽器是白等了。所以，passive 監(jiān)聽器誕生了，passive 的意思是“順從的”，表示它不會對事件的默認行為說 no，瀏覽器知道了一個監(jiān)聽器是 passive 的，它就可以在兩個線程里同時執(zhí)行監(jiān)聽器中的 JavaScript 代碼和瀏覽器的默認行為了。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。