国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webapp頁(yè)面滾動(dòng)卡頓的解決辦法

OnlyLing / 1516人閱讀

摘要：手機(jī)瀏覽器在滾動(dòng)當(dāng)前頁(yè)面還可能是縮放頁(yè)面時(shí)，由于默認(rèn)行為被阻止，導(dǎo)致頁(yè)面被迫靜止，導(dǎo)致用戶使用體驗(yàn)差，感覺(jué)滾動(dòng)頁(yè)面有停頓感。具體一點(diǎn)的解釋由于事件對(duì)象的屬性為，也就是說(shuō)它的默認(rèn)行為可以被監(jiān)聽(tī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ō)明更加直觀。


  

    
請(qǐng)?jiān)诖它c(diǎn)擊

  






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);

根據(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)行為了。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/100404.html

相關(guān)文章

  • 說(shuō)說(shuō)動(dòng)畫(huà)卡頓的解決方案

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

    AlphaWatch 評(píng)論0 收藏0

  • 說(shuō)說(shuō)動(dòng)畫(huà)卡頓的解決方案

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

    時(shí)飛 評(píng)論0 收藏0

  • 好快, 1分鐘開(kāi)發(fā)好一個(gè)下拉刷新,滾動(dòng)加載列表

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

    wemall 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<