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

这是谷歌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给你在性能分析器，在布局配置文件(淡紫色区域)，对警告的更多信息。

更新: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异步特性的内容。

正如大家提到的，这些只是警告。然而，如果您热衷于解决这些问题(这是应该的)，那么您需要首先确定导致警告的原因。没有一个原因可以导致强制回流警告。 有人列出了一些可能的选择。您可以跟随讨论了解更多信息。 以下是可能原因的要点:

What forces layout / reflow All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck. Element Box metrics elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight elem.getClientRects(), elem.getBoundingClientRect() Scroll stuff elem.scrollBy(), elem.scrollTo() elem.scrollIntoView(), elem.scrollIntoViewIfNeeded() elem.scrollWidth, elem.scrollHeight elem.scrollLeft, elem.scrollTop also, setting them Focus elem.focus() can trigger a double forced layout (source) Also… elem.computedRole, elem.computedName elem.innerText (source) getComputedStyle window.getComputedStyle() will typically force style recalc (source) window.getComputedStyle() will force layout, as well, if any of the following is true: The element is in a shadow tree There are media queries (viewport-related ones). Specifically, one of the following: (source) * min-width, min-height, max-width, max-height, width, height * aspect-ratio, min-aspect-ratio, max-aspect-ratio device-pixel-ratio, resolution, orientation The property requested is one of the following: (source) height, width * top, right, bottom, left * margin [-top, -right, -bottom, -left, or shorthand] only if the margin is fixed. * padding [-top, -right, -bottom, -left, or shorthand] only if the padding is fixed. * transform, transform-origin, perspective-origin * translate, rotate, scale * webkit-filter, backdrop-filter * motion-path, motion-offset, motion-rotation * x, y, rx, ry window window.scrollX, window.scrollY window.innerHeight, window.innerWidth window.getMatchedCSSRules() only forces style Forms inputElem.focus() inputElem.select(), textareaElem.select() (source) Mouse events mouseEvt.layerX, mouseEvt.layerY, mouseEvt.offsetX, mouseEvt.offsetY (source) document doc.scrollingElement only forces style Range range.getClientRects(), range.getBoundingClientRect() SVG Quite a lot; haven't made an exhaustive list , but Tony Gentilcore's 2011 Layout Triggering List pointed to a few. contenteditable Lots & lots of stuff, …including copying an image to clipboard (source)

点击这里查看更多信息。

另外，这里是原始问题的Chromium源代码，以及关于警告的性能API的讨论。

编辑:谷歌还有一篇关于如何在PageSpeed Insight上最小化布局回流的文章。它解释了什么是浏览器回流:

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.

此外，它还解释了如何将其最小化:

Reduce unnecessary DOM depth. Changes at one level in the DOM tree can cause changes at every level of the tree - all the way up to the root, and all the way down into the children of the modified node. This leads to more time being spent performing reflow. Minimize CSS rules, and remove unused CSS rules. If you make complex rendering changes such as animations, do so out of the flow. Use position-absolute or position-fixed to accomplish this. Avoid unnecessary complex CSS selectors - descendant selectors in particular - which require more CPU power to do selector matching.

这里有几个想法:

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

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

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