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

Question

我使用了一个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以删除这些警告？

Answer 1

什么是被动事件？

被动事件侦听器是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
});

解决问题

关于这在javascript中的含义,提出了类似的SO帖子.

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

Angular还没有为此实现通用/易用性解决方案,可以在此处遵循.

然而,由于typescript被编译为javascript,因此在typescript中实现上述代码片段仍应否定违规.

绩效影响

违规行为本身并不会对应用程序性能造成任何损害,但事件功能的内容可能是 - 因此Chrome会抛出此警告.请注意,此警告仅显示在Verbose console mode一般用户中,不会向普通用户显示.

据我所知,没有办法禁用这些警告,因为它们是Chrome在运行时对代码的解释所产生的.