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

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

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

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

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

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


当前回答

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

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

其他回答

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

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

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

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

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

我在Apache Cordova源代码中找到了一个解决方案。 它们是这样实现的:

var resolvedPromise = typeof Promise == 'undefined' ? null : Promise.resolve();
var nextTick = resolvedPromise ? function(fn) { resolvedPromise.then(fn); } : function(fn) { setTimeout(fn); };

实现简单,但方法聪明。

而不是Android 4.4,使用Promise。 对于旧的浏览器,使用setTimeout()


用法:

nextTick(function() {
  // your code
});

插入这个恶作剧代码后,所有警告消息都消失了。

这是谷歌Chrome浏览器的违规错误,显示详细日志级别启用时。

错误信息示例:

解释:

Reflow is the name of the web browser process for re-calculating the positions and geometries of elements in the document, for the purpose of re-rendering part or all of the document. Because reflow is a user-blocking operation in the browser, it is useful for developers to understand how to improve reflow time and also to understand the effects of various document properties (DOM depth, CSS rule efficiency, different types of style changes) on reflow time. Sometimes reflowing a single element in the document may require reflowing its parent elements and also any elements which follow it.

原文:最小化浏览器回流,作者:Lindsey Simon, UX开发人员,发表于developers.google.com。

这是链接谷歌Chrome给你在性能分析器,在布局配置文件(淡紫色区域),对警告的更多信息。

这不是一个错误,只是一个简单的消息。执行此消息更改 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">(示例) 来 <!DOCTYPE html>(Firefox源代码期望此) 该消息显示在谷歌Chrome 74和Opera 60。改变后它是清晰的,0 verbose。 解决方法

这里有几个想法:

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