25

我有一个使用 创建的 Angular 4 项目@angular/cli，在开发模式下运行应用程序时，我在控制台中收到这些警告：

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 以删除这些警告？
4

1 回答 1

29

什么是被动事件？

被动事件侦听器是 DOM 规范中的一项新功能，它使开发人员能够通过消除滚动阻塞触摸和滚轮事件侦听器的需要来选择加入以提高滚动性能。开发人员可以使用 {passive: true} 注释触摸和滚轮侦听器，以表明他们永远不会调用 preventDefault。此功能在 Chrome 51、Firefox 49 中提供，并在 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
});

解决问题

一个类似的SO 帖子是关于这在 javascript 中的含义。

通过将触摸或滚轮侦听器标记为被动，开发人员承诺处理程序不会调用preventDefault()以禁用滚动。这使浏览器可以立即响应滚动，而无需等待 JavaScript，从而确保为用户提供可靠流畅的滚动体验。

Angular 还没有为此实现通用/易用的解决方案，可以在此处遵循。

但是，由于 typescript 被编译为 javascript，因此在 typescript 中实现上述代码段仍应否定违规。

性能影响

违规本身对应用程序性能没有任何危害，但是您的事件函数的内容可能是 - 这就是 Chrome 抛出此警告的原因。请注意，此警告仅显示在普通用户中Verbose console mode，不会显示给普通用户。

据我所知，没有办法禁用此类警告，因为它们是由 Chrome 在运行时对代码的解释生成的。

于 2017-06-03T00:50:12.617 回答