小编典典

违规长时间运行的 JavaScript 任务花费了 xx 毫秒

all

最近,我收到了这样的警告,这是我第一次得到它:

[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


阅读 98

收藏
2022-03-16

共1个答案

小编典典

更新 :Chrome 58+ 默认隐藏这些和其他调试消息。要显示它们,请单击“信息”旁边的箭头并选择“详细”。

Chrome 57 默认开启“隐藏违规”。要重新打开它们,您需要启用过滤器并取消选中“隐藏违规”框。

当其他人参与该项目时,突然出现

我认为您更新到 Chrome 56
的可能性更大。在我看来,此警告是一个很棒的新功能,请仅在您绝望时将其关闭,并且您的评估员会从您那里拿走分数。其他浏览器中存在潜在问题,但浏览器并没有告诉您存在问题。Chromium
票在这里,但实际上并没有任何有趣的讨论。

这些消息是警告而不是错误,因为它不会真正导致重大问题。它可能会导致帧丢失或以其他方式导致不太流畅的体验。

但是,它们值得研究和修复以提高应用程序的质量。这样做的方法是注意消息出现的情况,并进行性能测试以缩小问题发生的范围。开始性能测试的最简单方法是插入如下代码:

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 的分析器,或者使用像这样的基准测试库。

一旦你发现了一些需要很长时间的代码(50ms 是 Chrome 的阈值),你有几个选择:

  1. 删除一些/所有可能不必要的任务
  2. 弄清楚如何更快地完成相同的任务
  3. 将代码分成多个异步步骤

(1)和(2)可能很难或不可能,但有时真的很容易,应该是你的第一次尝试。如果需要,应该始终可以执行 (3)。为此,您将使用以下内容:

setTimeout(functionToRunVerySoonButNotNow);

要么

// This one is not available natively in IE, but there are polyfills available.
Promise.resolve().then(functionToRunVerySoonButNotNow);

您可以在此处阅读有关 JavaScript 异步特性的更多信息。

2022-03-16