违反长时间运行的JavaScript任务花费了xx毫秒
最近,我得到了这种警告,这是我第一次得到警告:
[Violation] Long running JavaScript task took 234ms
[Violation] Forced reflow while executing JavaScript took 45ms
我正在做一个小组项目,我不知道这是从哪里来的。这从来没有发生过。突然,当其他人参与该项目时出现。我如何找到导致此警告的文件/功能?我一直在寻找答案,但主要是关于如何解决的解决方案。如果我什至找不到问题的根源,我将无法解决。
在这种情况下,警告仅在Chrome上显示。我尝试使用Edge,但没有收到任何类似的警告,并且尚未在Firefox上对其进行测试。
我什至从以下错误jquery.min.js
:
[Violation] Handler took 231ms of runtime (50ms allowed)
jquery.min.js:2
-
更新 :默认情况下,Chrome 58+隐藏了这些和其他调试消息。要显示它们,请单击“信息”旁边的箭头,然后选择“详细”。
Chrome 57默认情况下启用“隐藏违规”功能。要重新启用它们,您需要启用过滤器,然后取消选中“隐藏违规”框。
当其他人参与该项目时,突然出现
我认为您更新到Chrome56的可能性更大。我认为,此警告是一个了不起的新功能,如果您不顾一切,请仅将其关闭,并且评估师会从您身上夺走分数。其他浏览器中存在潜在的问题,但是这些浏览器并没有告诉您有问题
这些消息是警告而不是错误,因为它实际上不会引起重大问题。否则可能会导致框架掉落或造成不流畅的体验。
但是,值得进行调查和修复以提高应用程序的质量。为此,请注意消息出现在什么情况下,并进行性能测试以缩小问题发生的范围。开始性能测试的最简单方法是插入如下代码:
function someMethodIThinkMightBeSlow() { const startTime = performance.now(); // Do the normal stuff for this function const duration = performance.now() - startTime; console.log(`someMethodIThinkMightBeSlow took ${duration}ms`); }
如果您想获得更高级的知识,还可以使用Chrome的分析器,或使用像这样的基准测试库。
找到花费很长时间的代码(Chrome的阈值为50ms)后,您可以选择以下两种方法:
- 删掉一些不必要的任务
- 弄清楚如何更快地完成相同的任务
- 将代码分为多个异步步骤
(1)和(2)可能很困难或不可能,但有时确实很容易,应该是您的第一次尝试。如果需要,应该总是可以这样做(3)。为此,您将使用类似:
setTimeout(functionToRunVerySoonButNotNow);
要么
// This one is not available natively in IE, but there are polyfills available. Promise.resolve().then(functionToRunVerySoonButNotNow);
-
违规长时间运行的 JavaScript 任务花费了 xx 毫秒
2022-03-22 关注 0 浏览25 1答案
-
Celery反复运行长时间运行的已完成任务
2021-01-29 关注 0 浏览94 1答案
-
Java长时间运行的任务线程中断与取消标志
2021-01-30 关注 0 浏览61 1答案
-
防止长时间运行的JavaScript锁定浏览器
2021-02-02 关注 0 浏览390 1答案
-
在长时间运行的任务期间保持GUI响应
2021-01-29 关注 0 浏览44 1答案
-
C#中长时间运行任务的进度条
2021-04-09 关注 0 浏览109 1答案
-
Flutter 花费了很长时间才能连接到浏览器
2021-01-31 关注 0 浏览178 1答案
-
异步启动长时间运行的进程
2021-01-31 关注 0 浏览110 1答案
-
长时间运行的查询中的SQL NOW()
2021-06-04 关注 0 浏览66 1答案
-
显示长时间运行的PHP脚本的进度
2021-01-31 关注 0 浏览104 1答案