Passive Event Listeners——让页面滑动越发流通的新特征

2019年8月25日 307次阅读 来源: 大象

Passive Event Listeners – 被动事宜监听器

在写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.

翻译过来以下：

违背：没有增加被动事宜监听器来阻挠’touchstart’事宜，请斟酌增加事宜管理者’passive’，以使页面越发流通。

涌现如上提醒这多是由于console的过滤器挑选了Verbose

《Passive Event Listeners——让页面滑动越发流通的新特征》

  • Verbose-冗杂,就是事无具细的把一切log显现出来

  • Info-显现开发者自定义的log及错误信息

  • Warnings-显现风险信息

  • Errors-显现错误信息

平常默许的是Info,不会提醒这个提醒，虽然这并不影响代码的一般运转，但　是既然提醒了照样弄邃晓是什么缘由的好一些。

这是由于Chrome51版本今后，Chrome增加了新的事宜捕捉机制－Passive Event Listeners

Passive Event Listeners就是告诉前页面内的事宜监听器内部是不是会挪用preventDefault函数来阻挠事宜的默许行动，以便浏览器依据这个信息更好地做出决议计划来优化页面机能。当属性passive的值为true的时刻，代表该监听器内部不会挪用preventDefault函数来阻挠默许滑动行动，Chrome浏览器称这范例的监听器为被动（passive）监听器。如今Chrome重要应用该特征来优化页面的滑动机能，所以Passive Event Listeners特征当前仅支撑mousewheel/touch相干事宜

之前的事宜捕捉代码以下：

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

第三个参数决议了fn函数是在冒泡照样捕捉阶段触发。
如今第三个参数不只可所以布尔值，还但是一个对象

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调试会发明，Chrome已不要提醒让人头的提醒。

    原文作者：大象
    原文地址: https://segmentfault.com/a/1190000010173792
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞