区仅在Chrome上的Angular项目控制台上出现js违规警告

Question

我使用@Angular/cli创建了Angular 4项目，在开发模式下运行应用程序时，我在控制台中收到以下警告：

zone.js:1489 [Violation] 'setTimeout' handler took 209ms
2[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.
zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.
zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.
2zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive.
zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.
zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.
zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.
2zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive.
zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.

奇怪的是警告只出现在Chrome上。（我的chrome构建版本是：58.0.3029.110）

1. 那些（违规）警告是什么意思？
2. 这对应用程序性能有害吗？
3. 如何禁用/覆盖或配置zone.js以删除这些警告？

Answer 1

被动事件监听器是DOM规范中的一个新特性，它使开发人员能够选择加入，通过消除滚动来阻止触控式和滚轮式事件监听器，从而提高滚动性能。开发人员可以用{passive:true}注释touch和wheel监听器，以表明他们永远不会调用默认值。该功能在Chrome51、Firefox49中发布，并在WebKit中登陆。参考

Chrome发出警告...

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

...当您绑定到鼠标滚动事件时，通过调用preventDefault（）来警告您可能已禁止事件中的滚动性能或禁用默认事件。

当您尝试在被动事件中调用preventDefault（）时，Chrome也会抛出错误。

Unable to preventDefault inside passive event listener invocation.

Firefox也有类似的错误，但似乎没有像Chrome那样发出警告：

Ignoring ‘preventDefault()’ call on event of type ‘wheel’ from a listener registered as ‘passive’.

运行以下代码段并以详细模式查看Chrome控制台。

// WILL throw violation
document.addEventListener("wheel", function(e) {
  e.preventDefault(); // prevents default browser functionality
});

// will NOT throw violation
document.addEventListener("wheel", function(e) {
  e.preventDefault(); // does nothing since the listener is passive
}, {
  passive: true
});