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

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 only。（我的 chrome 构建版本是：58.0.3029.110）

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

Answer 1

什么是被动事件？

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

当您尝试在被动事件中调用 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’.

---

警告展示

运行以下 sn-p 并以 Verbose 模式查看 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 是关于这在 javascript 中的含义。

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

Angular 尚未为此实现通用/易用的解决方案，可以关注here。

但是由于 typescript 被编译为 javascript，在 typescript 中实现上述 sn-p 仍然应该否定违规。

---

性能影响

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

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