Javascript 回流和重绘有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2549296/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What's the difference between reflow and repaint?
提问by Jon Raasch
I'm a little unclear on the difference between reflow + repaint (if there's any difference at all)
我有点不清楚回流 + 重绘之间的区别（如果有任何区别的话）
Seems like reflow might be shifting the position of various DOM elements, where repaint is just rendering a new object. E.g. reflow would occur when removing an element and repaint would occur when changing its color.
似乎回流可能会改变各种 DOM 元素的位置，其中重绘只是渲染一个新对象。例如，移除元素时会发生回流，更改其颜色时会发生重绘。
Is this true?
这是真的？
回答by DVK
This posting seems to cover the reflow vs repaint performance issues
这篇文章似乎涵盖了回流与重绘性能问题
As for definitions, from that post:
至于定义，来自那个帖子：
A repaintoccurs when changes are made to an elements skin that changes visibly, but do not affect its layout.
Examples of this include
outline,visibility,background, orcolor. According to Opera, repaint is expensive because the browser must verify the visibility of all other nodes in the DOM tree.A reflowis even more critical to performance because it involves changes that affect the layout of a portion of the page (or the whole page).
Examples that cause reflows include: adding or removing content, explicitly or implicitly changing
width,height,font-family,font-sizeand more.
一个重绘更改时的元素皮肤改变明显制成，但不影响其布局发生。
这方面的例子包括
outline，visibility，background，或color。根据 Opera 的说法，重绘是昂贵的，因为浏览器必须验证 DOM 树中所有其他节点的可见性。一个回流更是关键的性能，因为它涉及影响页面（或整个页面）的部分的布局变化。
例子是回流的原因包括：添加或移除的内容，或明或暗地改变
width，height，font-family，font-size等等。
Learn which css-properties effect repaint and review at http://csstriggers.com
在http://csstriggers.com 上了解哪些 css-properties 影响重绘和
回答by leohxj
In my opinion, repaint just affects the DOM itself, but reflow affects the whole page.
在我看来，repaint 只影响 DOM 本身，但 reflow 会影响整个页面。
Repaint occurs when some changes which only its skin styles, such as color and visibility.
当某些仅更改其外观样式（例如颜色和可见性）时发生重绘。
Reflow occur when the page of DOM changes its layout.
当 DOM 的页面改变其布局时会发生回流。
Recently I found a site can search which attribute will trigger repaint or reflow. http://csstriggers.com/
最近我发现一个网站可以搜索哪个属性会触发重绘或回流。 http://csstriggers.com/
回答by coderz
Here is another great post: http://blog.letitialew.com/post/30425074101/repaints-and-reflows-manipulating-the-dom
这是另一个很棒的帖子：http: //blog.letitialew.com/post/30425074101/repaints-and-reflows-manipating-the-dom
A repaint, or redraw, goes through all the elements and determines their visibility, color, outline and other visual style properties, then it updates the relevant parts of the screen.
A reflow computes the layout of the page. A reflow on an element recomputes the dimensions and position of the element, and it also triggers further reflows on that element's children, ancestors and elements that appear after it in the DOM. Then it calls a final repaint. Reflowing is very expensive.
重绘或重绘会遍历所有元素并确定它们的可见性、颜色、轮廓和其他视觉样式属性，然后更新屏幕的相关部分。
回流计算页面的布局。元素上的回流会重新计算元素的尺寸和位置，并且还会触发该元素的子元素、祖先元素和 DOM 中出现在它之后的元素的进一步回流。然后它调用最终重绘。回流是非常昂贵的。
It also introduced when reflow occurs and how to minimize reflow.
它还介绍了何时发生回流以及如何最大限度地减少回流。
回答by starWave
Reflowhappens when there is a change to the DOM layout. Reflow is very expensive computationally as dimensions and positions of page elements must be calculated again, then the screen will be repainted.
当 DOM 布局发生变化时会发生回流。回流在计算上非常昂贵，因为必须再次计算页面元素的尺寸和位置，然后重新绘制屏幕。
Example of something that will cause reflow
会导致回流的示例
for (let i = 1; i <= 100; i++ {
const newEle = document.createElement('p');
newEle.textContent = 'newly created paragraph element';
document.body.appendChild(newEle);
}
The above code is very inefficient, causing 100 reflow processes for every new paragraph element appended.
上面的代码效率很低，每添加一个新的段落元素都会导致 100 个回流过程。
You can mitigate this computationally stressful process by using .createDocumentFragment()
您可以通过使用来减轻这种计算压力的过程 .createDocumentFragment()
const docFrag = document.createDocumentFragment();
for (let i = 1; i <= 100; i++ {
const newEle = document.createElement('p');
newEle.textContent = 'newly created paragraph element';
docFrag.appendChild(newEle);
}
document.body.appendChild(docFrag);
The above code will now instead only use the reflow process 1x for the creation of 100 new paragraph elements.
上面的代码现在将只使用回流过程 1x 来创建 100 个新段落元素。
Repaintis merely the changing of pixels on the monitor, while still taxing it is the lesser of two evils, since a reflow includes a repaint in its procedure.
重绘仅仅是显示器上像素的改变，虽然仍然对它征税，但它是两害相权取其轻的，因为回流在其过程中包括重绘。
