重排和重绘有什么区别？

Question

我有点不清楚回流和重绘之间的区别（如果有的话）

似乎回流可能会改变各种DOM元素的位置，而重绘只是渲染新对象。例如，删除元素时会发生回流，而更改其颜色时会发生重绘。

这是真的吗？

- Jon Raasch

Answer 1

这篇文章似乎涉及到回流和重绘的性能问题。

http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/

关于定义，来自该文章:

重绘（repaint）是指对一个元素的样式进行更改，但不影响其布局的可见更改。

例如：outline, visibility, background, 或 color 等。根据Opera浏览器的说法，重绘非常昂贵，因为浏览器必须验证DOM树中所有其他节点的可见性。

回流（reflow）对性能影响更大，因为它涉及到影响页面某部分（或整个页面）的布局更改。

导致回流的示例包括：添加或删除内容、显式或隐式更改width、height、font-family、font-size等。

了解哪些CSS属性会影响重绘并查看http://csstriggers.com

- DVK

Answer 2

重新排版会在DOM布局发生变化时发生。重新排版的计算成本很高，因为页面元素的尺寸和位置必须重新计算，然后屏幕将被重绘。

导致重新排版的示例：

for (let i = 1; i <= 100; i++ {
const newEle = document.createElement('p');
newEle.textContent = 'newly created paragraph element';

document.body.appendChild(newEle);
}

以上代码非常低效，每次添加新的段落元素都会导致100次回流进程。

您可以通过使用.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);

以上代码现在将仅使用回流过程1次来创建100个新段落元素。

Repaint仅仅是改变显示器上的像素，虽然仍会对其造成一定的负担，但相比之下，它是两种方法中较小的邪恶，因为回流过程包含了重绘。

- starWave

---

创建一个父级 div / span，与创建文档片段是一样的，对吗？ - gaurav5430

这是真的吗？我认为如果你在循环中调用document.body.appendChild()，你仍然在主堆栈上。在该堆栈清除之前，不会有任何重绘 - 所以它实际上并不比文档片段更有效率？ - Don P

Answer 3

我在这里找到了一份很好的解释，请点击这里。

• 回流（Reflow）：计算每个可见元素的布局（位置和大小）。
• 重绘（Repaint）：将像素呈现到屏幕上。

- johannesMatevosyan

Answer 4

这里有另一篇很棒的文章：http://blog.letitialew.com/post/30425074101/repaints-and-reflows-manipulating-the-dom 重绘(repaint)会遍历所有元素并确定它们的可见性、颜色、轮廓和其他视觉样式属性，然后更新屏幕上相关部分。

回流(reflow)计算页面的布局。一个元素上的回流(reflow)会重新计算该元素的尺寸和位置，并触发其子元素、祖先元素和出现在DOM中其后面的元素的进一步回流。然后它会调用最后一次重绘(repaint)。回流非常昂贵。

它还介绍了何时发生回流以及如何最小化回流。

- coderz

Answer 5

我认为，repaint 只影响 DOM 本身，而 reflow 影响整个页面。

Repaint 发生在某些只涉及其样式的变化时，比如颜色和可见性。

Reflow 发生在页面的 DOM 更改其布局时。

最近我发现了一个可以搜索触发 repaint 或 reflow 的属性的网站。 http://csstriggers.com/

- leohxj

Answer 6

重排是浏览器布局页面的过程。在DOM（通常在DOM和CSS加载后）首次显示时发生，并且每当有任何可能更改布局的情况发生时都会再次发生。这是一个相对昂贵（慢）的过程。

重绘发生在重排之后，浏览器将新的布局绘制到屏幕上。这相当快速，但您仍然希望限制它发生的频率。

例如，如果您向元素添加CSS类，则浏览器通常重新计算整个页面的布局--这是一次重排和一次重绘！

- Madlen Arab