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

2023-12-31

我有一个使用创建的 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 构建版本是:58.0.3029.110)

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

什么是被动事件?

被动事件侦听器是 DOM 规范中的一项新功能,使开发人员能够通过消除滚动来阻止触摸和滚轮事件侦听器的需要来选择更好的滚动性能。开发人员可以使用 {passive: true} 注释触摸和滚轮监听器,以表明它们永远不会调用 PreventDefault。该功能在 Chrome 51、Firefox 49 中发布,并登陆 WebKit。参考 https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md.

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().

当您尝试仍然调用时,Chrome 也会引发错误preventDefault()在被动事件中。

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 https://stackoverflow.com/questions/37721782/what-are-passive-event-listeners是关于这在 javascript 中的含义的。

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

Angular 尚未为此实现通用/易用的解决方案,可以遵循here https://github.com/angular/angular/issues/8866.

然而由于 typescript 被编译为 javascript,在打字稿中实现上述代码片段仍应消除违规行为.


性能影响

违规本身不会对应用程序性能造成任何损害,但事件函数的内容可能会造成损害 - 这就是 Chrome 抛出此警告的原因。请注意,此警告仅显示在Verbose console mode并且不会向一般用户展示。

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

仅在 Chrome 上,Angular 项目中的控制台上出现 zone.js 违规警告 的相关文章

  • 显示具有多个父代的 D3 树

    我目前有this http bl ocks org mbostock 4339083图已实现 我希望在描述具有多个父节点的子节点时保持结构和可折叠性 有没有办法做到这一点 我研究了力图 但我也想保留一组层次结构 这意味着 1 级的父级可以有
  • 在 Internet Explorer 中使用什么来监视 jscript 内存使用情况

    我们正在调试 GWT 应用程序 在 Firefox 中运行正常 在 IE6 0 中开始运行正常 但一段时间后 它就会崩溃并开始爬行 经过一些测试后 我们怀疑存在一些内存问题 使用了太多内存 内存泄漏等 除了使用taskmanager和pro
  • 如何在父视图和子视图中使用组件两次(DI 是共享的,comp 是单例)

    我有一个按钮组件 具有应用程序特定行为 我打算在应用程序中广泛使用它 问题是 当我有一个使用此按钮的父 子视图时 单击父按钮会触发子视图按钮的 操作 如果不这样做 您自然不会明白发生了什么有多年的面向对象编程经验 让年轻的学校新手使用 da
  • 在指令中动态添加 *ngIf

    如何动态地将 ngIf 添加到用属性指令修饰的元素 为了一个简单的实验 我尝试了这个 Directive selector lhUserHasRights export class UserHasRightsDirective implem
  • IntersectionObserver是否支持水平滚动观察?

    我制作了几个垂直滚动 IntersectionObserver 模块 但我对水平滚动感兴趣 根将是 div 观察目标将是 img 我想观察当 img 放大但 div 保持视口宽度时的变化 我什至不确定移动 Safari 是否会将缩放后的图片
  • javascript 选择自定义光标 (svg)

    我正在动态地将光标更改为悬停时的本地 svg element on mouseover function this css cursor url svgs pointer svg 9 30 auto 工作正常 但我想选择该 svg 来操纵其
  • JavaScript 中的 Promise 有什么意义?

    一个承诺是一个 可能现在可用 或将来可用 或永远不可用的值 来源 MDN 假设我有一个想要处理图片的应用程序 图片已加载 例如在算法在后台使用它之后 或某种其他类型的延迟 现在我想检查一下图片是否可以在future 通过使用承诺 而不是回调
  • React Router v4 不渲染组件

    React Router v4 渲染组件存在问题 在应用程序初始加载时 它将呈现与 URL 相对应的正确组件 但是 任何后续的组件Link单击不会呈现所需的组件 图书馆 反应路由器 4 2 2 https reacttraining com
  • JavaScript RegEx:不同的结果:使用字符串和使用正则表达式“文字”构建模式?

    使用 RegExp 文字与字符串之间有什么区别吗 http jsfiddle net yMMrk http jsfiddle net yMMrk String prototype lastIndexOf function pattern p
  • 如何在另一个自定义 Hook 中使用返回值的自定义 Hook?

    我正在使用 React native 其中有一个名为的自定义 HookuseUser使用以下方法从 AWS Amplify 获取用户信息Auth getUserInfro方法 然后获取返回对象的一部分并用它设置一个状态变量 我还有另一个名为
  • mongodb 聚合 - 累积字段的不同组值

    如果我有Player表格文件 name String score Int 我有Group文档 其中组代表玩家列表 groupName String players ObjectID 玩家可以属于多个组 我想做一个聚合Player文档 按以下
  • 如何正确取消引用然后删除 JavaScript 对象?

    我想知道从内存中完全取消引用 JavaScript 对象的正确方法 确保删除时不会在内存中悬空 并且垃圾收集器会删除该对象 当我看这个问题时在 JavaScript 中删除对象 https stackoverflow com questio
  • 使用 Google 日历源时如何禁用 FullCalendar 中的活动链接?

    我正在使用 FullCalendar 库从 Google 日历加载日历中的事件 不幸的是 事件添加到日历后 它们是可点击的 当您点击该活动时 您会自动重定向到 Google 日历页面以查看该特定活动 或者如果您有足够的访问权限 则可以直接对
  • Google Maps API (v3) 添加/更新标记

    编辑 它现在可以工作 但如果用户不允许或没有基于位置的服务 则不会加载 请参阅 jsfiddle 示例接受的答案评论 我已经浏览了一些教程和问题 但我无法安静地理解正在发生的事情 或者在这种情况下 没有发生 当用户单击链接时 我正在加载地图
  • 使用 Jade 评估自定义 javascript 方法 (CircularJSON)

    我想通过 Jade 将一个对象解析为客户端 JavaScript 通常这会起作用 script var object JSON parse JSON stringify object but my object is circular ht
  • Rails 3.1+ 的 Jasmine 与 Mocha JavaScript 测试 [已关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我对茉莉花有经验并且非常喜欢它 有谁有 Jasmine 和 Mocha 的经验 特别是 Rails 的经验吗 我想知道是否值得转用 我已经在 J
  • react-native - 图像需要来自 JSON 的本地路径

    你好社区 我正在react native中开发一个测试应用程序 并尝试从本地存储位置获取图像 我实际在做什么 我将图像直接链接源提供给 var 并在渲染函数中调用此方法 react 0 14 8 react native 0 23 1 np
  • 在 iOS 7 Safari 中,如何区分通过边缘滑动与后退/前进按钮的 popstate 事件?

    在 iOS 7 Safari 中 现在有两种后退 前进导航方式 使用底部的传统后退 前进按钮箭头或从屏幕边缘滑动 我正在使用动画在 ajax 应用程序中的页面之间进行转换 但如果用户通过边缘滑动进行导航 我不想触发该转换 因为这本身就是一个
  • 如何通过索引访问 JSON 对象中的字段

    我知道这不是最好的方法 但我别无选择 我必须通过索引访问 JSONObject 中的项目 访问对象的标准方法是只写this objectName or this objectName 我还找到了一种获取 json 对象内所有字段的方法 fo
  • 如何在 Angular 4 中翻译 mat-paginator?

    你知道如何在 Angular 中翻译 每页项目 吗mat paginator标签 这mat paginator是材料设计中的一个元素 您可以使用MatPaginatorIntl为了这 威尔 豪厄尔制作 https github com an

随机推荐

  • Linq 连接参数化的不同键

    我正在尝试基于动态键 LINQ 两个表 用户可以通过组合框更改密钥 键可能是钱 字符串 双精度数 整数等 目前我得到的数据很好 但没有过滤掉双精度数 我可以在 VB 中过滤双精度值 但速度很慢 我想立即在 LINQ 查询中执行此操作 这是数
  • libc++ std::istringstream 不会引发异常。漏洞?

    配置完后std istringstream抛出异常时failbit已设置 我在 libc 中没有发生任何异常 这是在 linux 下 使用 libcxxrt 支持编译的 libc 我认为这是 libc 或 libcxxrt 中的错误 inc
  • python导入具有相同根包名和不同位置的不同子包

    我想知道是否有人可以阐明这一点 我们有多个具有相同根包的包库 例如a 我也有包a b位于 X 和包中a c位于Y X和Y都在我的PYTHONPATH当我这样做时 import a c import a b 我收到错误 No module n
  • 当 ModelState 无效时保留下拉信息

    我的 DropDownLists 遇到一些问题 因为当我发布信息并且我的模型无效时 它会返回 空 页面 从而触发错误 就像这个问题 https stackoverflow com questions 3393521 the viewdata
  • Azure Functions - 拥有 host.json 和 local.settings.json 的目的是什么

    我可以看到两个 json 文件 host json 和 local settings json 已添加到 Azure Function 目录中 主机 json version 2 0 logging applicationInsights
  • 按月将带有 NSDate 对象的 NSArray 排序到 NSDictionary 中

    我正在构建一个UITableView并想按月分组 以便我可以将这些字符串作为我的节标题 例如 February 2013 Item 1 Item 2 January 2013 Item 1 Item 2 我有一个NSArray其中包含具有
  • Windows 7 上的 Microsoft Access 文本 ODBC 驱动程序

    我创建了一个 Delphi 应用程序 它利用 ODBC 数据源访问 csv 格式的文本文件 该驱动程序是 Microsoft Access Text Driver 但是 当我在 Windows 7 计算机上部署应用程序时 它无法工作 因为该
  • 应用程序先前由“root”运行后,QSerialPort 无法打开 tty [重复]

    这个问题在这里已经有答案了 我有一个应用程序 使用QSerialPort 从串行端口读取和写入 当我运行这个应用程序时root用户 然后以非 root 用户身份再次运行它 我不再能够写入串行端口 收到以下错误 QIODevice write
  • React useId 创建无效的选择器

    我正在尝试通过 id 获取元素 这是重现错误的示例代码 function MyComponent const myId useId useEffect gt const myComponentDOMElement document quer
  • 如何删除 git 用户属性?

    我不小心输入了以下错误的 git 命令 git config global user mail email protected cdn cgi l email protection 现在当我输入时我会看到一个额外的属性git config
  • 包标识符无法从当前值错误更改

    我制作了 iPhone 应用程序 现在我想将这个应用程序上传到 Appstore 当我尝试从组织者上传存档文件时 它向我显示以下错误 Bundle identifier in my target project is com Appname
  • 如何获取调用函数的名称?

    我正在使用 gnu 工具链 如何在运行时找到函数的调用者 例如 许多函数使用函数指针调用函数 B 现在 每当 B 被呼叫时 我想打印呼叫者的姓名 我需要这个来调试某个问题 如果您使用的是 GNU 则可以使用回溯 http www kerne
  • 关于操作系统,关于页表条目状态位

    在电影里社交网络马克 扎克伯格上课时 老师问了这样一个问题 假设我们有一台计算机 具有 16 位虚拟地址 页大小为 256 字节 系统使用从地址十六进制 400 开始的一级页表 您可能需要 DMA 直接内存访问 在您的 16 位系统上 谁知
  • 捕获 Mac 屏幕

    用cocoa录制mac屏幕的最佳方法是什么 我知道苹果开发人员参考库中有很多示例 SonOfGrab 解释了如何使用石英捕获屏幕 但也指出使用它每秒捕获许多帧的速度不够快 OpenGLScreenSnapshot 具有相同的结果 但速度也不
  • 如何使用 TortoiseSVN 根据修订版之间的差异创建补丁?

    我正在开发一个项目 其中使用 Subversion 来维护版本控制 我使用 TortoiseSVN 访问项目存储库 在项目的两个修订版之间进行了一些更改 我们将其称为 rev1 和 rev2 我希望能够将这些更改应用到暂时无法访问存储库的工
  • Rspec:如何在辅助规范中规范 request.env?

    在我的帮助模块中 我有 def abc url if request env HTTP USER AGENT do something end end 在我的规范文件中 我有 describe abc do before each do m
  • 如何利用 NumPy 的功能来修复和优化这段非常简单的“生命游戏”代码?

    import numpy as np from matplotlib import pyplot as plt from matplotlib import animation from random import randint arra
  • Java 中的继承和转换

    我有一个关于 Java 中的继承和转换的问题 我有以下两个示例类和一个测试类 我在课后陈述我的问题 public class Automobile public int var public Automobile var 1 public
  • Python webapp2:重定向回来

    我正在使用谷歌应用程序引擎作为基本应用程序 该场景很简单 我单击 注销 我希望我的注销处理程序将我重定向回我来自的页面 我该如何实现这一目标 谢谢 When 创建注销网址 https developers google com appeng
  • 仅在 Chrome 上,Angular 项目中的控制台上出现 zone.js 违规警告

    我有一个使用创建的 Angular 4 项目 angular cli 在开发模式下运行应用程序时 我在控制台中收到这些警告 zone js 1489 Violation setTimeout handler took 209ms 2 Vio