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

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）

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

Answer 1

什么是被动事件？

Passive event listeners are a new feature in the DOM spec that enable developers to opt-in to better scroll performance by eliminating the need for scrolling to block on touch and wheel event listeners. Developers can annotate touch and wheel listeners with {passive: true} to indicate that they will never invoke preventDefault. This feature shipped in Chrome 51, Firefox 49 and landed in WebKit. Reference.

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().

抑制了事件中的滚动性能或禁用了默认事件

Chrome 也会在您尝试在被动事件中调用 preventDefault() 时抛出错误。

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
});

解决问题

在 javascript.

中对此的含义进行了类似的

By marking a touch or wheel listener as passive, the developer is promising the handler won't call preventDefault() to disable scrolling. This frees the browser up to respond to scrolling immediately without waiting for JavaScript, thus ensuring a reliably smooth scrolling experience for the user.

Angular 尚未为此实现通用/易用的解决方案，可以遵循 here.

然而，由于 typescript 被编译为 javascript，在 typescript 中实现上述代码片段仍然可以消除违规行为。

性能影响

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

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

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

zone.js violation warnings on console in Angular project only on Chrome

javascript

zonejs

passive-event-listeners

angular

什么是被动事件？

警告展示

解决问题

性能影响