浏览器渲染过程
- 解析HTML并构建DOM树
- 处理CSS构建CSSOM树
- 将DOM与CSSOM合并成一个渲染树Render Tree
- 根据渲染树来布局,计算每个节点的位置Layout
- 调用GPU绘制,合成图层,显示在屏幕上 Painting
回流(重排reflow)
当DOM的变化影响了元素的几何属性(宽和高),比如改变边框宽度或给段落增加文字,导致行数增加。浏览器需要重新计算元素的几何属性,同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树。
重绘
完成重排后,浏览器会重新绘制受影响的部分到屏幕中。布局不会变化的DOM属性修改,例如改变原始背景色,这种情况只会发生一次重绘。
触发重排
- 添加或者删除可见DOM元素
- 元素位置变化
- 元素尺寸改变(包括:外边界、内边距、边框厚度、宽度、高度等属性改变)
- 内容改变,例如:文本改变或图片被另一个不同尺寸的图片替代
- 页面渲染器初始化
- 浏览器窗口尺寸改变
最小化重绘和重排
- 减少发生次数,合并多次DOM和样式的修改,例如:使用cssText一次性修改,或者直接修改样式名称
- 不要在布局信息改变时查询影响重排的属性(例如:offsetTop等offset属性 ,scrollTop等scroll属性,client属性,getComputedStyle())
- 批量修改DOM,首先使元素脱落文档流,然后对其修改 ,最后把元素带回文档。
- 缓存布局信息
- 让元素脱离动画流
脱离DOM文档方法
- 隐藏元素,应用修改,重新显示
- 使用文档片段在当前DOM之外构建一个子树,再把文档拷贝回文档。
- 将原始元素拷贝到一个脱离文档的节点中,修改副本,完成后替代原始元素。