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

Question

最近，我得到了这种警告，这是我第一次得到警告：

 [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

Answer 1

更新 ：默认情况下，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. 将代码分为多个异步步骤

（1）和（2）可能很困难或不可能，但有时确实很容易，应该是您的第一次尝试。如果需要，应该总是可以这样做（3）。为此，您将使用类似：

setTimeout(functionToRunVerySoonButNotNow);

要么

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