最近，我收到了这样的警告，这是我第一次收到:
JavaScript任务长时间运行，耗时234ms 执行JavaScript时强制回流花了45毫秒
我正在做一个小组项目，我不知道这是从哪里来的。这在以前从未发生过。突然，当其他人参与到这个项目中时，它出现了。如何查找导致此警告的文件/函数?我一直在寻找答案，但主要是关于如何解决它的解决方案。如果我连问题的根源都找不到，我就解决不了。
在这种情况下，警告只出现在Chrome上。我尝试使用Edge，但没有收到任何类似的警告，而且我还没有在Firefox上测试它。
我甚至从jquery.min.js中得到错误:
[违规]Handler占用了231ms的运行时(允许50ms
当前回答
这里有几个想法:
删除一半的代码(可能通过注释)。 问题还在吗?太好了，你缩小了可能性!重复。 问题不在那里吗?好吧，看看你评论掉的那一半! 你是否使用任何版本控制系统(例如Git)?如果是，git签出一些最近的提交。这个问题是什么时候提出的?查看提交，看看问题第一次出现时到底修改了哪些代码。
其他回答
为了确定问题的根源，运行你的应用程序，并记录在Chrome的性能选项卡。
在那里，您可以检查运行时间较长的各种函数。在我的情况下，一个与警告相关的控制台是由AdBlock扩展加载的文件，但这可能是其他的东西在你的情况下。
检查这些文件，并尝试识别这是一些扩展的代码还是你的。(如果是你的问题，那么你已经找到了问题的根源。)
这里有几个想法:
删除一半的代码(可能通过注释)。 问题还在吗?太好了，你缩小了可能性!重复。 问题不在那里吗?好吧，看看你评论掉的那一半! 你是否使用任何版本控制系统(例如Git)?如果是，git签出一些最近的提交。这个问题是什么时候提出的?查看提交，看看问题第一次出现时到底修改了哪些代码。
答案是，这是新Chrome浏览器的一个功能，如果网页在执行JS时导致过多的浏览器回流，它会提醒你。详情请参阅
强制回流流通常发生在一个函数在执行结束前被多次调用的情况下。
例如，您可能在智能手机上遇到这个问题，但在经典浏览器上没有。
我建议使用setTimeout来解决这个问题。
这不是很重要，但我重复一遍，当您多次调用一个函数时，而不是当函数花费超过50毫秒时，问题就会出现。我认为你的回答错了。
关闭1-by-1调用并重新加载代码，以查看它是否仍然产生错误。 如果第二个脚本导致错误，则根据违规的持续时间使用setTimeOut。
我在我的代码中找到了这条消息的根，它搜索并隐藏或显示节点(脱机)。这是我的代码:
search.addEventListener('keyup', function() {
for (const node of nodes)
if (node.innerText.toLowerCase().includes(this.value.toLowerCase()))
node.classList.remove('hidden');
else
node.classList.add('hidden');
});
性能选项卡(分析器)显示事件花费了大约60毫秒:
Now:
search.addEventListener('keyup', function() {
const nodesToHide = [];
const nodesToShow = [];
for (const node of nodes)
if (node.innerText.toLowerCase().includes(this.value.toLowerCase()))
nodesToShow.push(node);
else
nodesToHide.push(node);
nodesToHide.forEach(node => node.classList.add('hidden'));
nodesToShow.forEach(node => node.classList.remove('hidden'));
});
性能选项卡(分析器)现在显示事件大约1毫秒:
而且我觉得现在搜索速度更快了(229个节点)。
