违反长时间运行的JavaScript任务花费了xx毫秒

最近，我收到了这样的警告，这是我第一次收到：

[违规]长时间运行的JavaScript任务耗时234ms
[违规]执行JavaScript时强制回流耗时45毫秒

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

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

我甚至从

jquery.min.js

中得到了错误：

[Violation]处理程序占用了231ms的运行时间（允许50ms）jquery.min.js:2

有几个想法：

• 删除一半代码（可能通过注释）
  • 问题还在吗？太好了，你缩小了可能性！重复一遍

  • 问题不在那里吗？好的，看看你评论掉的那一半

• 您是否使用任何版本控制系统（如Git）？如果是这样，

  git checkout

  您最近的一些提交。这个问题是什么时候出现的？查看提交以查看问题首次出现时代码发生了什么变化

---

这是在Chrome 56 beta版中添加的，尽管它不在Chrome博客的更改日志中：

---

您可以使用“隐藏冲突”复选框将其隐藏在控制台的筛选栏中。

如果您使用的是Chrome Canary（或Beta版），只需选中“隐藏冲突”选项即可

---

更新：默认情况下，Chrome 58+隐藏了这些和其他调试消息。要显示它们，请单击“信息”旁边的箭头，然后选择“详细”

Chrome 57在默认情况下启用“隐藏冲突”。要重新启用它们，您需要启用过滤器并取消选中“隐藏冲突”框

当其他人参与该项目时，它突然出现

我认为你更有可能升级到Chrome56。这个警告是一个很好的新功能，在我看来，请只关闭它，如果你绝望，你的评估员会从你的分数。潜在的问题存在于其他浏览器中，但浏览器只是不告诉您有问题。Chromium的票是免费的，但是没有任何有趣的讨论

这些消息是警告而不是错误，因为它实际上不会导致重大问题。它可能会导致帧掉落或导致不太流畅的体验

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

function someMethodIThinkMightBeSlow() {
    const startTime = performance.now();

    // Do the normal stuff for this function

    const duration = performance.now() - startTime;
    console.log(`someMethodIThinkMightBeSlow took ${duration}ms`);
}

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

如果您想获得更高的级别，还可以使用或利用类似的基准库

一旦你发现了一些需要花费很长时间的代码（Chrome的阈值是50ms），你有几个选择：

删掉部分/全部可能不必要的任务

找出如何更快地完成相同的任务

将代码划分为多个异步步骤

（1） （2）可能很难或不可能，但有时确实很容易，应该是你的第一次尝试。如果需要，应该始终可以执行（3）。为此，您将使用以下方法：

setTimeout(functionToRunVerySoonButNotNow);

或

---

您可以阅读有关JavaScript异步特性的更多信息。

在Chrome控制台的“网络”选项卡下查找加载时间最长的脚本

在我的例子中，有一组Angular附加脚本，我已经包括在内，但尚未在应用程序中使用：

<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应用程序上遇到了“长时间运行任务”错误。删除后，错误立即停止

---

我最好的猜测是，这些有角度的附加组件递归地查看DOM中越来越深的部分，寻找它们的开始标记-没有找到，它们必须在退出之前遍历整个DOM，这比Chrome预期的要长-因此发出了警告。

正如大家提到的，这些只是警告。但是，如果您希望解决这些问题（您应该这样做），那么您需要首先确定导致警告的原因。没有一个原因可以使您获得强制回流警告。 有人为一些可能的选项创建了一个。您可以按照讨论了解更多信息。
以下是可能原因的要点：

什么强制布局/回流 以下所有属性或方法，在请求/调用时 JavaScript，将触发浏览器同步计算 样式和布局*。这也称为回流焊或， 这是常见的性能瓶颈

元素 盒度量

• elem.offsetLeft

  ，

  elem.offsetTop

  ，

  elem.offsetWidth

  ，

  elem.offsetlight

  ，

  elem.offsetParent

• elem.clientLeft

  ，

  elem.clientTop

  ，

  elem.clientWidth

  ，

  elem.clientHeight

• elem.getClientRect（）

  ，

  elem.getBoundingClientRect（）

卷轴材料

• elem.scrollBy（）

  ，

  elem.scrollBy（）

• 元素滚动视图（）

  ，

  元素滚动视图如果需要（）

• elem.scrollWidth

  ，

  elem.scr
  var resolvedPromise = typeof Promise == 'undefined' ? null : Promise.resolve();
  var nextTick = resolvedPromise ? function(fn) { resolvedPromise.then(fn); } : function(fn) { setTimeout(fn); };
  
  nextTick(function() {
    // your code
  });
  
  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');
  });
  
  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'));
  });
  
    return (
      <>
        <MyThemeProvider>
        <Container className={classes.appMaxWidth}>
  
          <SummaryAppBarPure
  //...
  
  ReactDOM.render(
    <React.StrictMode>
        <App />
  //...
  
  return (
      <>
        {/* move theme to index. made reflow problem go away */}
        {/* <MyThemeProvider> */}
        <Container className={classes.appMaxWidth}>
  
          <SummaryAppBarPure
  //...
  
  ReactDOM.render(
    <React.StrictMode>
      <MyThemeProvider>
        <App />
  //...
  
  [Violation] Forced reflow while executing JavaScript took <N>ms