Question

我对reflow + repaint之间的差异有点不清楚（如果有任何差异的话）

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

这是真的吗？

Answer 1

这篇文章似乎涵盖了重排与重绘性能问题

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

至于定义，从那篇文章：

进行更改时会发生重绘   到一个变化的元素皮肤   明显但不影响它   布局。

这方面的例子包括   outline，visibility，background，   或color。根据歌剧院，重画是   昂贵，因为浏览器必须   验证所有其他人的可见性   DOM树中的节点。

重排是   对性能更为关键   因为它涉及到变化   影响一部分的布局   页面（或整页）。

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

了解哪些css-properties影响重绘并在http://csstriggers.com

进行审核

Answer 2

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

当某些更改仅发生其外观样式（例如颜色和可见性）时会发生重绘。

当DOM页面改变其布局时会发生回流。

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

Answer 3

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

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

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

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

Answer 4

我发现here的很好的解释。

Reflow：计算每个可见元素的布局（位置和尺寸）。
Repaint：将像素渲染到屏幕上。

Answer 5

重排会在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个新的段落元素。

重涂只是监视器上像素的变化，同时还要加重这是两个弊端中较小的一种，因为重排在其过程中包括重涂。

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

5 个答案: