浏览器Reflow（回流）与Repaint（重绘）的区别

 首先了解浏览器是如何渲染网页的？

1.浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree。

2.根据RenderTree，我们就知道了所有节点的样式，然后计算它们在页面上的大小和位置，最后把节点绘制到页面上。由于浏览器使用流式布局模型 (Flow Based Layout)，通常对Render Tree的计算只需要遍历一次即可，但table及其内部元素除外。（避免使用table布局）

---

回流

当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。

重绘

当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

回流必将引起重绘，重绘不一定会引起回流。

---

会导致回流的操作：

• 页面首次渲染
• 浏览器窗口大小发生改变
• 元素尺寸或位置发生改变
• 元素内容变化（文字数量或图片大小等等）
• 元素字体大小变化
• 添加或者删除可见的DOM元素
• 激活CSS伪类（例如：:hover）
• 查询某些属性或调用某些方法

一些常用且会导致回流的属性和方法：

• clientWidth、clientHeight、clientTop、clientLeft
• offsetWidth、offsetHeight、offsetTop、offsetLeft
• scrollWidth、scrollHeight、scrollTop、scrollLeft
• scrollIntoView()、scrollIntoViewIfNeeded()
• getComputedStyle()
• getBoundingClientRect()
• scrollTo()

总结：

引起回流：页面发生的某些变化影响了布局；

引起重绘：页面的变化只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性）

总的来说，回流比重绘的代价要更高。

详细了解可参考链接：

浏览器的回流与重绘 (Reflow & Repaint) - 掘金

reflow（重排/回流）、repaint（重绘）及其优化_. . . . .的博客-CSDN博客