javascript - 仅在 Chrome 上的 Angular 项目中控制台上的 zone.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

什么是被动事件？

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.

...当您绑定(bind)到鼠标滚动事件时，本质上警告您可能通过调用 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 post是关于 this 在 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 在运行时对代码的解释生成的。