成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Passive Event Listeners——讓頁面滑動更加流暢的新特性

XanaHopper / 2662人閱讀

摘要：這是因?yàn)榘姹疽院?，增加了新的事件捕獲機(jī)制就是告訴前頁面內(nèi)的事件監(jiān)聽器內(nèi)部是否會調(diào)用函數(shù)來阻止事件的默認(rèn)行為，以便瀏覽器根據(jù)這個信息更好地做出決策來優(yōu)化頁面性能。

Passive Event Listeners - 被動事件監(jiān)聽器

在寫webapp頁面的時候，Chrome 提醒　

[Violation] Added non-passive event listener to a scroll-blocking "touchstart" event. Consider marking event handler as "passive" to make the page more responsive.

翻譯過來如下：

違反：沒有添加被動事件監(jiān)聽器來阻止"touchstart"事件，請考慮添加事件管理者"passive"，以使頁面更加流暢。

出現(xiàn)如上提示這可能是由于console的過濾器選擇了Verbose

Verbose-冗長,就是事無具細(xì)的把所有l(wèi)og顯示出來

Info-顯示開發(fā)者自定義的log及錯誤信息

Warnings-顯示危險信息

Errors-顯示錯誤信息

一般默認(rèn)的是Info,不會提示這個提醒，雖然這并不影響代碼的正常運(yùn)行，但　是既然提醒了還是弄明白是什么原因的好一些。

這是因?yàn)镃hrome51版本以后，Chrome增加了新的事件捕獲機(jī)制－Passive Event Listeners

Passive Event Listeners就是告訴前頁面內(nèi)的事件監(jiān)聽器內(nèi)部是否會調(diào)用preventDefault函數(shù)來阻止事件的默認(rèn)行為，以便瀏覽器根據(jù)這個信息更好地做出決策來優(yōu)化頁面性能。當(dāng)屬性passive的值為true的時候，代表該監(jiān)聽器內(nèi)部不會調(diào)用preventDefault函數(shù)來阻止默認(rèn)滑動行為，Chrome瀏覽器稱這類型的監(jiān)聽器為被動（passive）監(jiān)聽器。目前Chrome主要利用該特性來優(yōu)化頁面的滑動性能，所以Passive Event Listeners特性當(dāng)前僅支持mousewheel/touch相關(guān)事件

以前的事件捕獲代碼如下：

document.addEventListener("click", fn, false/true)

第三個參數(shù)決定了fn函數(shù)是在冒泡還是捕獲階段觸發(fā)。
現(xiàn)在第三個參數(shù)不但可以是布爾值，還可是一個對象

document.addEventListener("mousewheel", fn, {passive: true})

由于passive對象只在Chrome瀏覽器中支持，所以這里需要做一個兼容處理

var passiveSupported = false;
    try {
        var options = Object.defineProperty({}, "passive", {
            get: function() {
                passiveSupported = true;
            }
        });
        window.addEventListener("test", null, options);
    } catch(err) {}
    function fn() {
        console.log("fn")
    }
    document.addEventListener("mousewheel", fn, passiveSupported ? { passive: true } : false)

再看Chrome調(diào)試會發(fā)現(xiàn)，Chrome已經(jīng)不要提醒讓人頭的提醒。

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/87126.html

相關(guān)文章

  • vue的源碼解析（passive特性，感覺是面試加分項）

    摘要：突然發(fā)現(xiàn)一個特性。這里核心是檢查是否支持，是什么提出的一個新的瀏覽器特性開發(fā)者通過一個新的屬性來告訴瀏覽器，當(dāng)前頁面內(nèi)注冊的事件監(jiān)聽器內(nèi)部是否會調(diào)用函數(shù)來阻止事件的默認(rèn)行為，以便瀏覽器根據(jù)這個信息更好地做出決策來優(yōu)化頁面性能。 今天我看源碼，因?yàn)橐贿吙匆贿呌浌P記所以看的慢。突然發(fā)現(xiàn)一個特性。所以單獨(dú)開一篇。感覺是一個秀bigger的特性，如果有一天面試官問你發(fā)現(xiàn)優(yōu)化頁面的時候，你提出可...

    0x584a 評論0 收藏0

  • vue的源碼解析（passive特性，感覺是面試加分項）

    摘要：突然發(fā)現(xiàn)一個特性。這里核心是檢查是否支持，是什么提出的一個新的瀏覽器特性開發(fā)者通過一個新的屬性來告訴瀏覽器，當(dāng)前頁面內(nèi)注冊的事件監(jiān)聽器內(nèi)部是否會調(diào)用函數(shù)來阻止事件的默認(rèn)行為，以便瀏覽器根據(jù)這個信息更好地做出決策來優(yōu)化頁面性能。 今天我看源碼，因?yàn)橐贿吙匆贿呌浌P記所以看的慢。突然發(fā)現(xiàn)一個特性。所以單獨(dú)開一篇。感覺是一個秀bigger的特性，如果有一天面試官問你發(fā)現(xiàn)優(yōu)化頁面的時候，你提出可...

    phodal 評論0 收藏0

  • vue的源碼解析（passive特性，感覺是面試加分項）

    摘要：突然發(fā)現(xiàn)一個特性。這里核心是檢查是否支持，是什么提出的一個新的瀏覽器特性開發(fā)者通過一個新的屬性來告訴瀏覽器，當(dāng)前頁面內(nèi)注冊的事件監(jiān)聽器內(nèi)部是否會調(diào)用函數(shù)來阻止事件的默認(rèn)行為，以便瀏覽器根據(jù)這個信息更好地做出決策來優(yōu)化頁面性能。 今天我看源碼，因?yàn)橐贿吙匆贿呌浌P記所以看的慢。突然發(fā)現(xiàn)一個特性。所以單獨(dú)開一篇。感覺是一個秀bigger的特性，如果有一天面試官問你發(fā)現(xiàn)優(yōu)化頁面的時候，你提出可...

    Karrdy 評論0 收藏0

  • passive的作用和原理

    摘要：直接由合成線程處理的事件不經(jīng)過內(nèi)核線程就能快速處理的輸入事件為手勢輸入事件滑動捏合。劃重點(diǎn)最騷的來了，雖然手勢事件可以不在內(nèi)核線程處理，但是手勢事件的產(chǎn)生還是離不開內(nèi)核線程。 passived到底有什么用？ passived主要用于優(yōu)化瀏覽器頁面滾動的性能，讓頁面滾動更順滑~~ passived產(chǎn)生的歷史時間線 addEventListener()：大家都是認(rèn)識的，為dom添加觸發(fā)事件...

    nanchen2251 評論0 收藏0

  • 滑動穿透(鎖body)終極探索

    摘要：場景當(dāng)頁面出現(xiàn)浮層的時候，滑動浮層的內(nèi)容，正常情況下預(yù)期應(yīng)該是浮層下邊的內(nèi)容不會滾動然而事實(shí)并非如此。當(dāng)屬性的值為的時候，代表該監(jiān)聽器內(nèi)部不會調(diào)用函數(shù)來阻止默認(rèn)滑動行為，瀏覽器稱這類型的監(jiān)聽器為被動監(jiān)聽器。 場景 當(dāng)頁面出現(xiàn)浮層的時候，滑動浮層的內(nèi)容，正常情況下預(yù)期應(yīng)該是浮層下邊的內(nèi)容不會滾動；然而事實(shí)并非如此。showImg(https://user-gold-cdn.xitu.io...

    Michael_Lin 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<