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

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

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

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

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

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


当前回答

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

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

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

其他回答

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

在Chrome控制台中Network选项卡下查找加载时间最长的脚本。

在我的例子中,有一组Angular add on脚本,我已经包含了,但还没有在应用中使用:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-utils/0.1.1/angular-ui-utils.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-aria.min.js"></script>

只有这些JavaScript文件的加载时间比“长时间运行任务”错误指定的时间长。

所有这些文件都在我的其他网站上运行,没有产生错误,但我在一个几乎没有任何功能的新web应用程序上得到了这个“长时间运行任务”错误。删除后错误立即停止。

我最好的猜测是,这些Angular add on正在递归地寻找DOM中越来越深的部分来寻找它们的开始标签——没有找到,它们必须在退出之前遍历整个DOM,这比Chrome预期的时间要长——因此出现了警告。

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

强制回流流通常发生在一个函数在执行结束前被多次调用的情况下。

例如,您可能在智能手机上遇到这个问题,但在经典浏览器上没有。

我建议使用setTimeout来解决这个问题。

这不是很重要,但我重复一遍,当您多次调用一个函数时,而不是当函数花费超过50毫秒时,问题就会出现。我认为你的回答错了。

关闭1-by-1调用并重新加载代码,以查看它是否仍然产生错误。 如果第二个脚本导致错误,则根据违规的持续时间使用setTimeOut。

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

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