回流（reflow）与重绘（repaint）

介绍下回流（reflow）与重绘（repaint）

---

1.了解浏览器的渲染机制

1. 浏览器采用流式布局模型。
2. 首先浏览器会将HTML解析成DOM，把CSS解析成CSSOM，把CSSOM与DOM结合产生render tree。
3. 有了render tree之后，我们知道了节点样式，然后浏览器会计算节点的位置，然后把节点绘制到页面上。

总结：回流一定会引起重绘，重绘不一定会引起回流。

2.回流

• 当我们render tree中的一些元素的结构或者尺寸发生改变，浏览器会重新渲染部分或者全部的文档流，这个过程就叫做回流。

会导致回流的操作：

• 页面首次渲染
• 浏览器窗口大小发生变化
• 内容变换
• 添加或者删除节点
• 激活CSS伪类
• clinentWidth/offWidth

3.重绘

• 当页面中元素样式的改变不影响它在文档流中的位置，浏览器会将新样式赋予给元素，这个过程就叫做重绘。

会导致重绘的操作：

• background
• visibility：隐藏后文档流中任保留空间。

4.性能影响

总结：回流的性能