性能优化之回流_重绘

回流与重绘

当render树中的元素发生尺寸、布局、隐藏等变化时就需要重新构建。当页面布局和几何属性发生变化时就需要回流。

当render树中的一些元素更新属性，而属性只是影响外观风格时，不会影响布局，比如background-color。

会触发页面重新布局的属性

1. 盒子模型相关属性
2. 定位相关属性
3. 改变节点内部因素

盒模型	定位	文字
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创建图层的条件

1. 3D或者透视变换（perspective transform）CSS属性
2. 使用加速视频解码的节点
3. 拥有3D（WebGL）上下文或加速的2D上下文的节点
4. 对自己的opacity做CSS动画或使用一个动画webkit变换的元素
5. 拥有加速CSS过滤器的元素
6. 元素有一个包含复合层的后代节点（一个元素拥有一个子元素，该子元素在自己的层里）
7. 元素有一个z-index较低且包含一个复合层的兄弟元素（换句话说就是该元素在复合层上面渲染）

新建DOM的过程

1. 获取DOM后分割为多个图层
2. 对每个图层的节点计算样式结果（Recalculate style–样式重计算）
3. 为每个节点生成图形和位置（Layout–回流和重布局）
4. 将每个节点绘制填充到图层位图中（Paint Setup和Paint–重绘
5. 图层作为纹理上传至GPU
6. 符合多个图层到页面上生成最终屏幕图像（Composite Layers–图层重组）
   

实际应用优化点

1. 用translate替代top改变
2. 用opacity替代visibility
3. 不要一条一条地修改 DOM 的样式，预先定义好 class，然后修改 DOM 的 className
4. 把 DOM 离线后修改，比如：先把 DOM 给 display:none (有一次 Reflow)，然后你修改100次，然后再把它显示出来
5. 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
6. 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
7. 动画实现的速度的选择
8. 对于动画新建图层
9. 启用 GPU 硬件加速