仅在Chrome上的Angular项目中的控制台上的zone.js违规警告 [英] zone.js violation warnings on console in Angular project only on Chrome

问题描述

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

I've an Angular 4 project created using @angular/cli, when running the application in development mode, I receive those warnings in the console:

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 ）

The weird thing is that warning appear on Chrome only. (my chrome build version is: 58.0.3029.110)

1. 那些（违规）警告是什么是什么意思？


2. 这对应用程序性能有害吗？


3. 如何禁用/覆盖或配置zone.js以删除这些警告？

推荐答案

什么是被动事件？

What is a passive event?

被动事件监听器是DOM规范中的一项新功能，它使开发人员无需滚动阻止触摸和滚轮事件监听器，从而可以选择更好地滚动性能。开发人员可以使用{passive：true}注释触摸和轮式侦听器，以指示它们永远不会调用preventDefault。此功能在Chrome 51，Firefox 49中提供，并在WebKit中登陆。 参考。

Chrome会抛出警告......

Chrome throws the warning ...

[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（）来禁用默认事件。

...when you bind to mouse scroll events, to essentially warn that you may have inhibited scroll performance in your event or disabled default events by making a call to preventDefault().

Chrome也会在出现错误时抛出错误你尝试在被动事件中仍然调用 preventDefault（）。

Chrome also throws the error when you try and still call preventDefault() in a passive event.

Unable to preventDefault inside passive event listener invocation.

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

Firefox has a similar error for this, however does not seem to throw a warning like Chrome:

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

---

警告展示

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

---

Warning showcase

Run the following snippet and view the Chrome console in Verbose mode.

// 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中的含义。

A similar SO post was made about the implications of this in javascript.

通过标记触摸或滚轮侦听器作为被动，开发人员承诺处理程序不会调用 preventDefault（）来禁用滚动。这使得浏览器可以立即响应滚动而无需等待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尚未为此实现通用/易用性解决方案，可以按照此处进行操作。

Angular has not yet implemented a generic / ease of use solution for this and can be followed here.

然而，由于打字稿被编译为javascript，在打字稿中实现上述代码段仍应否定违规行为。

However due to the fact that typescript is compiled to javascript, implementing the above snippet in typescript should still negate the violation.

违规本身对应用程序性能完全没有害处但是，事件功能的内容可能是 - 因此Chrome会抛出此警告。请注意，此警告仅显示在详细控制台模式中，不会向普通用户显示。

The violation itself is not at all harmful to application performance, however the contents of your event function could be - and thus is why Chrome throws this warning. Note that this warning is only shown in Verbose console mode and will not be shown to general users.

目前为止我知道，没有办法禁用这些警告，因为它们是Chrome在运行时对代码的解释所产生的。

As far as I am aware, there is no way to disable such warnings as they are generated by Chrome's interpretation of the code at run time.

这篇关于仅在Chrome上的Angular项目中的控制台上的zone.js违规警告的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！