我有点不清楚回流 + 重绘之间的区别（如果有任何区别的话）
似乎回流可能会改变各种 DOM 元素的位置，其中重绘只是渲染一个新对象。例如，移除元素时会发生回流，更改其颜色时会发生重绘。
这是真的？
回流和重绘有什么区别？
IT技术
javascript
performance
repaint
reflow
2021-02-07 05:27:58
5个回答
这篇文章似乎涵盖了回流与重绘性能问题
至于定义，来自那个帖子：
一个重绘更改时的元素皮肤改变明显制成，但不影响其布局发生。
这方面的例子包括
outline，visibility，background，或color。根据 Opera 的说法，重绘是昂贵的，因为浏览器必须验证 DOM 树中所有其他节点的可见性。一个回流更是关键的性能，因为它涉及影响页面（或整个页面）的部分的布局变化。
例子是回流的原因包括：添加或移除的内容，或明或暗地改变
width，height，font-family，font-size等等。
在http://csstriggers.com 上了解哪些 css-properties 影响重绘和审查
当 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 个新段落元素。
重绘仅仅是显示器上像素的改变，虽然仍然对其征税，但它是两害相权取其轻的，因为回流在其过程中包括重绘。
这是另一个很棒的帖子：http : //blog.letitialew.com/post/30425074101/repaints-and-reflows-manipating-the-dom
重绘或重绘会遍历所有元素并确定它们的可见性、颜色、轮廓和其他视觉样式属性，然后更新屏幕的相关部分。
回流计算页面的布局。元素上的回流会重新计算元素的尺寸和位置，并且还会触发该元素的子元素、祖先元素和 DOM 中出现在它之后的元素的进一步回流。然后它调用最终重绘。回流是非常昂贵的。
它还介绍了何时发生回流以及如何最大限度地减少回流。
在我看来，repaint 只影响 DOM 本身，但 reflow 会影响整个页面。
当某些仅更改其外观样式（例如颜色和可见性）时发生重绘。
当 DOM 的页面改变其布局时会发生回流。
最近我发现一个网站可以搜索哪个属性会触发重绘或回流。 http://csstriggers.com/