css的回流和重绘

• 浏览器的的渲染过程

  1.将 HTML 文档解析成 DOM 树

  2.将 CSS 解析成 CSS 规则树

  3.将 DOM 树和 CSSOM 合并为 Rendering Tree（渲染树）

  4.计算元素位置

  5.遍历 render 树 进行绘制页面

• 回流（重排）：页面中的某个部分发生了改变并且影响了布局，需要重新排页面结构

• 重绘：仅仅样式变化，不会引起页面结构变化，如改变字体颜色、边框颜色、背景颜色等

可以想象成搭积木，如果我们抽离其中的一块木块或者把添加一块木块，那么原来的结构会发生改变了，这时候就好比“重排”。如果我们拿画笔给其中的某一块木块上颜色，那么结构是不会发生改变的，这时候可以比喻成重绘。而上颜色和抽离其中的一块木块相比较，上颜色更容易一些，所以重排（回流）要花费的代价更高一些，性能损耗也是更高。

什么时候会发生回流

• 页面初次渲染
• 浏览器窗口大小发生改变
• 元素字体大小发生改变 font-size
• 删除或者添加 DOM 元素
• 元素的 width 和 height 的改变
• display：none
• margin、padding、border-width 的改变

什么时候会发生重绘

• background-color 修改背景颜色
• border-color 修改边框颜色
• visibility 隐藏和显示元素（占物理空间）
• color 修改字体颜色

区别

• 重绘不一定会伴随回流
• 回流一定伴随重绘
• 回流比重绘代价高

如何减少回流和重绘

• 减少 DOM 操作