性能优化之回流_重绘
回流与重绘
当render树中的元素发生尺寸、布局、隐藏等变化时就需要重新构建。当页面布局和几何属性发生变化时就需要回流。
当render树中的一些元素更新属性,而属性只是影响外观风格时,不会影响布局,比如background-color。
会触发页面重新布局的属性
- 盒子模型相关属性
- 定位相关属性
- 改变节点内部因素
盒模型 | 定位 | 文字 |
---|---|---|
width | top | text-align |
height | bottom | overflow-y |
padding | left | font-weight |
margin | right | overflow |
display | position | font-family |
border-width | float | line-height |
border | clear | vertival-align |
min-height | white-space | |
font-size |
只触发重绘的属性
只重绘属性 |
---|
color |
border-radius |
visibility |
text-decoration |
background |
background-image |
background-position |
background-repeat |
background-size |
outline-color |
outline |
outline-style |
outline-width |
box-shadow |
Chrome创建图层的条件
- 3D或者透视变换(perspective transform)CSS属性
- 使用加速视频解码的节点
- 拥有3D(WebGL)上下文或加速的2D上下文的节点
- 对自己的opacity做CSS动画或使用一个动画webkit变换的元素
- 拥有加速CSS过滤器的元素
- 元素有一个包含复合层的后代节点(一个元素拥有一个子元素,该子元素在自己的层里)
- 元素有一个z-index较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)
新建DOM的过程
- 获取DOM后分割为多个图层
- 对每个图层的节点计算样式结果(Recalculate style–样式重计算)
- 为每个节点生成图形和位置(Layout–回流和重布局)
- 将每个节点绘制填充到图层位图中(Paint Setup和Paint–重绘
- 图层作为纹理上传至GPU
- 符合多个图层到页面上生成最终屏幕图像(Composite Layers–图层重组)
实际应用优化点
- 用translate替代top改变
- 用opacity替代visibility
- 不要一条一条地修改 DOM 的样式,预先定义好 class,然后修改 DOM 的 className
- 把 DOM 离线后修改,比如:先把 DOM 给 display:none (有一次 Reflow),然后你修改100次,然后再把它显示出来
- 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
- 不要使用 table 布局,可能很小的一个小改动会造成整个 table 的重新布局
- 动画实现的速度的选择
- 对于动画新建图层
- 启用 GPU 硬件加速