回流和重绘之间有什么区别？

Question

我对reflow + repaint之间的区别有点不清楚(如果有什么不同的话)

似乎reflow可能会改变各种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树中所有其他节点的可见性.

一个回流更是关键的性能,因为它涉及影响页面(或整个页面)的部分的布局变化.

导致回流的例子包括:添加或移除的内容,或明或暗地改变width,height,font-family,font-size等等.

了解哪些css-properties效果重绘并在http://csstriggers.com上查看

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

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

重绘只是显示器上像素的改变，虽然仍然对它征税，但它是两害相权取其轻的，因为回流在其过程中包括重绘。

Answer 3

在我看来,重绘只会影响DOM本身,但重排会影响整个页面.

重新绘制发生在某些更改时,只有其皮肤样式,如颜色和可见性.

当DOM页面更改其布局时发生重排.

最近我发现一个网站可以搜索哪个属性会触发重绘或重排. http://csstriggers.com/

Answer 4

我在这里找到的很好的解释。

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

Answer 5

这是另一篇很棒的文章：http : //blog.letitialew.com/post/30425074101/repaints-and-reflows-manipulating-the-dom

重新绘制或重画遍历所有元素并确定其可见性，颜色，轮廓和其他视觉样式属性，然后更新屏幕的相关部分。

重排计算页面的布局。元素上的重排会重新计算元素的尺寸和位置，并且还会触发该元素的子元素，祖先元素和出现在DOM中的元素的进一步重排。然后调用最后的重涂。回流非常昂贵。

还介绍了何时发生回流以及如何最大程度地减少回流。