回流和重绘有啥区别？

Posted 2023-02-21

技术标签:

【中文标题】回流和重绘有啥区别？【英文标题】：What's the difference between reflow and repaint?回流和重绘有什么区别？ 【发布时间】：2011-02-02 16:56:57 【问题描述】：

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

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

这是真的吗？

【问题讨论】：

【参考方案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 影响重绘和审查

【讨论】：

【参考方案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 个新的段落元素。

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

【讨论】：

不是创建文档片段，而是创建一个父div/span，对吧？这是真的吗？我想如果你在循环中调用 document.body.appendChild()，你仍然在主堆栈中。在该堆栈清除之前，不会有任何重绘 - 所以它实际上并不比文档片段效率低？【参考方案3】：

我发现 here 的解释很好。

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

【讨论】：

【参考方案4】：

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

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

当 DOM 的页面改变其布局时，会发生重排。

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