PassiveEventListeners——让页面滑动越发流通的新特征

Passive Event Listeners &＃8211; 被动事宜监听器

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

翻译过来以下：

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

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

• 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已不要提醒让人头的提醒。