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

艾哈迈德·哈希姆（Ahmed Hashem）：

我有一个使用创建的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）

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

Zze：

什么是被动事件？

被动事件侦听器是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中也有类似的文章。

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

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

但是，由于将Typescript编译为javascript的事实，在typescript中实现上述代码段仍应消除违规行为。

绩效影响

违规本身对应用程序性能完全没有危害，但是事件函数的内容可能会-因此这就是Chrome引发此警告的原因。请注意，此警告仅显示在Verbose console mode，普通用户不会看到。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2020-07-14

我来说两句

0 条评论

登录后参与评论