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

OnlyLing 發布于2019-08-23 14:17 / 1527人閱讀

摘要：手機瀏覽器在滾動當前頁面還可能是縮放頁面時，由于默認行為被阻止，導致頁面被迫靜止，導致用戶使用體驗差，感覺滾動頁面有停頓感。具體一點的解釋由于事件對象的屬性為，也就是說它的默認行為可以被監聽器通過方法阻止。

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

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

addEventListener的useCapture參數

基本概念：xxx.addEventListener("事件名", function(xxx){xxx}, useCapture).
第一個參數表示事件名稱（不含 on，如 "click"）；第二個參數表示要接收事件處理的函數；第三個參數為 useCapture.

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


  
    請在此點擊

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" + "
"; }, false);
middleDiv.addEventListener("click", function () { info.innerHTML += "level2" + "
"; }, false);
inDiv.addEventListener("click", function () { info.innerHTML += "level3" + "
"; }, 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事件

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

云服務器 GPU云服務器的解決辦法微軟的解決辦法 use的解決辦法換ip的解決辦法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/100404.html

說說動畫卡頓的解決方案

摘要：動畫卡頓解決方案前端時間用實現頁面中首頁動畫過渡，很簡單的一個效果，首頁加載一個客服頭像，先放大，停留后再縮小至頂部。參考文章深入瀏覽器理解和的性能問題解決動畫卡頓的辦法 CSS3 動畫卡頓解決方案前端時間用animation實現H5頁面中首頁動畫過渡，很簡單的一個效果，首頁加載一個客服頭像，先放大，停留700ms后再縮小至頂部。代碼如下 ...

AlphaWatch 2019-08-29 11:09 評論0 收藏0
說說動畫卡頓的解決方案

摘要：動畫卡頓解決方案前端時間用實現頁面中首頁動畫過渡，很簡單的一個效果，首頁加載一個客服頭像，先放大，停留后再縮小至頂部。參考文章深入瀏覽器理解和的性能問題解決動畫卡頓的辦法 CSS3 動畫卡頓解決方案前端時間用animation實現H5頁面中首頁動畫過渡，很簡單的一個效果，首頁加載一個客服頭像，先放大，停留700ms后再縮小至頂部。代碼如下 ...

時飛 2019-08-20 10:30 評論0 收藏0
好快, 1分鐘開發好一個下拉刷新,滾動加載列表

摘要：但本活又己交給音長爭標識我。八說前它特用達圓是路看江才。開次他爭從點軍容給油很出。成育料技所心并精北酸間辦元。除現七團一歷積動兩水礦花始線黨黨她。好快, 1分鐘寫好下拉刷新,滾動加載自動分頁列表前言歡迎關注BUI Webapp專欄或者 bui神速微信公眾號. 以往文章: 2019開發最快的Webapp框架--BUI交互框架微信Webapp開發的各種變態路由需求及解決辦法! ...

wemall 2019-08-30 15:56 評論0 收藏0