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

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

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

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

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

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


当前回答

我在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
});

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

其他回答

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

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

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

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

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

这里有几个想法:

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

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

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

不管怎样,这是我在遇到

[Violation] Forced reflow while executing JavaScript took <N>ms

警告。所讨论的页面是由用户内容生成的,因此我对DOM的大小实际上没有多大影响。在我的例子中,问题是一个有两列的表,可能有数百甚至数千行。(没有按需行加载实现,对不起!)

使用jQuery,在按下键时,页面选择一组行并切换它们的可见性。我注意到,在该集合上使用toggle()比显式使用hide() & show()更容易触发警告。

有关此特定性能场景的更多详细信息,请参见本文。

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