浅谈CSS重绘与回流/重排

任何对渲染树的修改都有可能会导致下面两种操作：

1、回流/重排

渲染树的一部分必须要更新且节点的尺寸发生了变化，会触发重排操作。每个页面至少在初始化的时候会有一次重排操作。

2、重绘

部分节点需要更新，但没有改变其形状，会触发重绘操作。

 

会触发重绘或回流/重排的操作

1、添加、删除元素(回流+重绘)

2、隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)

3、移动元素，如改变top、left或移动元素到另外1个父元素中(重绘+回流)

4、改变浏览器大小(回流+重绘)

5、改变浏览器的字体大小(回流+重绘)

6、改变元素的padding、border、margin(回流+重绘)

7、改变浏览器的字体颜色（只重绘，不回流）

8、改变元素的背景颜色（只重绘，不回流）