[转载]回流(reflow)和重绘(repaint)的理解

写在前面

---

在讨论回流和重绘之前，我们要知道：

1. 回流和重绘都是浏览器的行为。
2. 浏览器使用流式布局模型(Flow Based Layout)。
3. 浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree。
4. 有了Render Tree，我们就知道了所有节点的样式，可以计算出元素在网页中的大小和位置，最后把节点绘制到页面上。
5. 由于浏览器使用了流式布局，对Render Tree的计算通常只需要遍历一次就可以完成，但是table及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一。
   一句话总结：回流必会引起重绘，重绘不一定会引起回流。

回流(reflow)

---

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

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

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

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

重绘(repaint)

---

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