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

JavaScript任务长时间运行,耗时234ms 执行JavaScript时强制回流花了45毫秒

我正在做一个小组项目,我不知道这是从哪里来的。这在以前从未发生过。突然,当其他人参与到这个项目中时,它出现了。如何查找导致此警告的文件/函数?我一直在寻找答案,但主要是关于如何解决它的解决方案。如果我连问题的根源都找不到,我就解决不了。

在这种情况下,警告只出现在Chrome上。我尝试使用Edge,但没有收到任何类似的警告,而且我还没有在Firefox上测试它。

我甚至从jquery.min.js中得到错误:

[违规]Handler占用了231ms的运行时(允许50ms


当前回答

为了确定问题的根源,运行你的应用程序,并记录在Chrome的性能选项卡。

在那里,您可以检查运行时间较长的各种函数。在我的情况下,一个与警告相关的控制台是由AdBlock扩展加载的文件,但这可能是其他的东西在你的情况下。

检查这些文件,并尝试识别这是一些扩展的代码还是你的。(如果是你的问题,那么你已经找到了问题的根源。)

其他回答

这里有几个想法:

删除一半的代码(可能通过注释)。 问题还在吗?太好了,你缩小了可能性!重复。 问题不在那里吗?好吧,看看你评论掉的那一半! 你是否使用任何版本控制系统(例如Git)?如果是,git签出一些最近的提交。这个问题是什么时候提出的?查看提交,看看问题第一次出现时到底修改了哪些代码。

这是在Chrome 56测试版中添加的,尽管它不在Chrome博客的更新日志中:Chrome 56测试版:“不安全”警告,Web蓝牙和CSS位置:粘滞

您可以使用“隐藏违规”复选框将其隐藏在控制台的过滤器栏中。

答案是,这是新Chrome浏览器的一个功能,如果网页在执行JS时导致过多的浏览器回流,它会提醒你。详情请参阅

如果你使用Chrome金丝雀(或测试版),只需检查“隐藏违规”选项。

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

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

突然,当其他人参与这个项目时,它就出现了

我觉得更可能是你更新到Chrome 56。这个警告是一个很好的新功能,在我看来,只有在你非常绝望,考官会扣你分的时候,才请关闭它。潜在的问题在其他浏览器中存在,但浏览器只是不告诉你有问题。铬票在这里,但实际上没有任何有趣的讨论。

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

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

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)。要做到这一点,你将使用如下内容:

setTimeout(functionToRunVerySoonButNotNow);

or

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

你可以在这里阅读更多关于JavaScript异步特性的内容。