这是谷歌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 56测试版中添加的，尽管它不在Chrome博客的更新日志中:Chrome 56测试版:“不安全”警告，Web蓝牙和CSS位置:粘滞

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

这里有几个想法:

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

这不是一个错误，只是一个简单的消息。执行此消息更改 <！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">(示例) 来 <！DOCTYPE html>(Firefox源代码期望此) 该消息显示在谷歌Chrome 74和Opera 60。改变后它是清晰的，0 verbose。 解决方法

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

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.

不管怎样，这是我在遇到

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

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

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

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