重排和重绘有什么不同？

Question

我不太清楚回流和重绘之间的区别(如果有任何区别的话)

看起来回流可能会改变各种DOM元素的位置，而重绘只是渲染一个新的对象。例如，移除元素时会发生回流，更改颜色时会发生重绘。

这是真的吗？

Answer 1

这篇文章似乎涵盖了reflow vs repaint的性能问题。

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

至于定义，从那篇文章中可以看到：

当对元素外观所做的更改明显更改但不影响其布局时，就会发生重绘。

这方面的示例包括outline、visibility、background或color。根据Opera的说法，重新绘制的代价很高，因为浏览器必须验证DOM树中所有其他节点的可见性。

reflow对性能更为关键，因为它涉及的更改会影响页面的一部分(或整个页面)的布局。

导致重流的例子包括:添加或删除内容，显式或隐式地更改width、height、font-family、font-size等。

在http://csstriggers.com上了解哪些css-properties会影响重绘和查看

Answer 2

当DOM布局发生变化时，就会发生Reflow。回流在计算上是非常昂贵的，因为必须重新计算页面元素的尺寸和位置，然后屏幕将被重绘。

会导致回流的示例

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);

上面的代码现在将只使用回流过程1x来创建100个新的段落元素。

重绘仅仅是改变显示器上的像素，同时仍然是两害中较轻的一种，因为回流在其过程中包括重绘。

Answer 3

很好的解释，我找到了here。

​

​

• Reflow：计算每个可见元素的布局(位置和大小)。
• Repaint：将像素渲染到屏幕上。