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

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

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

更新:Chrome 58+默认隐藏这些和其他调试消息。要显示它们，单击“信息”旁边的箭头，并选择“详细”。

Chrome 57默认开启“隐藏违规”。要打开它们，你需要启用过滤器并取消选中“隐藏违规”框。

突然，当其他人参与这个项目时，它就出现了

我觉得更可能是你更新到Chrome 56。这个警告是一个很好的新功能，在我看来，只有在你非常绝望，考官会扣你分的时候，才请关闭它。潜在的问题在其他浏览器中存在，但浏览器只是不告诉你有问题。铬票在这里，但实际上没有任何有趣的讨论。

这些消息是警告而不是错误，因为它不会真正导致重大问题。它可能会导致帧被丢弃或导致不太流畅的体验。

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

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

    // Do the normal stuff for this function

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

如果你想要更高级，你也可以使用Chrome的分析器，或者使用像这样的基准测试库。

一旦你发现一些代码需要很长时间(50ms是Chrome的阈值)，你有几个选择:

砍掉一些/全部不必要的任务 弄清楚如何更快地完成同样的任务 将代码分成多个异步步骤

(1)和(2)可能很难或不可能，但有时真的很容易，应该是你的第一次尝试。如果需要，它应该总是可以做到(3)。要做到这一点，你将使用如下内容:

setTimeout(functionToRunVerySoonButNotNow);

or

// This one is not available natively in IE, but there are polyfills available.
Promise.resolve().then(functionToRunVerySoonButNotNow);

你可以在这里阅读更多关于JavaScript异步特性的内容。

不管怎样，这是我在遇到

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

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

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

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

我在我的代码中找到了这条消息的根，它搜索并隐藏或显示节点(脱机)。这是我的代码:

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个节点)。

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