javascript - 回流和重绘有什么区别？

Question

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

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

这是真的？

Answer 1

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

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。

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

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

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

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

Answer 4

在我看来，repaint 只会影响 DOM 本身，但 reflow 会影响整个页面。

当仅更改其皮肤样式（例如颜色和可见性）时，会发生重绘。

当 DOM 的页面更改其布局时，就会发生回流。

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

Answer 5

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

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

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

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