Passive Event Listeners——讓頁面滑動(dòng)更加流暢的新特性

XanaHopper 發(fā)布于2019-08-21 11:48 / 2598人閱讀

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

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

在寫webapp頁面的時(shí)候，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.

翻譯過來如下：

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

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

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

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

Warnings-顯示危險(xiǎn)信息

Errors-顯示錯(cuò)誤信息

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

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

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

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

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

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

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

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

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)試會(huì)發(fā)現(xiàn)，Chrome已經(jīng)不要提醒讓人頭的提醒。