Javascript 什么'；回流焊和重新喷漆的区别是什么？

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

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

---

这是真的吗？

这篇文章似乎涵盖了回流与重新喷漆的性能问题

关于定义，来自该帖子：

更改时会发生重新绘制 添加到发生变化的元素蒙皮 可见，但不影响其 布局

这方面的例子包括

大纲

，

可见性

，

背景

， 或

颜色

。根据Opera的说法，重新粉刷是必要的 昂贵，因为浏览器必须 验证所有其他组件的可见性 DOM树中的节点

A回流焊是 对性能更为关键 因为它涉及的变化 影响部分内容的布局 第页（或整页）

导致回流的示例包括：添加或删除内容，显式或隐式更改

宽度

，

高度

，

字体系列

，

字体大小

等等

---

了解哪些css属性会影响重新绘制，并查看

在我看来，重新绘制只会影响DOM本身，而回流会影响整个页面

当某些更改仅影响其蒙皮样式（例如颜色和可见性）时，会发生重新绘制

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

最近我发现一个网站可以搜索哪个属性会触发重绘或回流。

---

这里是另一篇很棒的帖子：

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

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

---

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

当DOM布局发生更改时，会发生回流。回流在计算上非常昂贵，因为必须再次计算页面元素的尺寸和位置，然后将重新绘制屏幕

导致回流的示例

for (let i = 1; i <= 100; i++ {
const newEle = document.createElement('p');
newEle.textContent = 'newly created paragraph element';

document.body.appendChild(newEle);
}

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

---

重新喷漆仅仅是改变显示器上的像素，但仍然让显示器负担过重，这是两个坏处中较小的一个，因为回流焊的过程中包括重新喷漆。

我发现了一个很好的解释

• 回流

  ：计算每个可见元素的布局（位置和位置） 尺寸）

• 重新绘制

  ：将像素渲染到屏幕上

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