-
浏览器的的渲染过程
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 操作