如何解決webapp頁面滾動卡頓問題

本篇文章給大家分享的是有關如何解決webapp頁面滾動卡頓問題，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

addEventListener的useCapture參數

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

第一個參數表示事件名稱（不含 on，如 "click"）；第二個參數表示要接收事件處理的函數；第三個參數為 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);

根據上述代碼來看這個 useCapture 為 true 和 false的作用效果：

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

由上述結果得出如下結論：

true 的觸發順序總是在 false 之前；
如果多個均為 true，則外層的觸發先于內層；
如果多個均為 false，則內層的觸發先于外層。

passive屬性來控制事件行為

使用方式如下

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

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

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

以上就是如何解決webapp頁面滾動卡頓問題，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。