(三)重绘和回流
1:回流
当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(reflow),当页面布局和几何属性改变时就需要回流
2:重绘
当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘。
3.回流和重绘的关系
①回流必将引起重绘
②而重绘不一定会引起回流
4.触发页面重布局的属性(回流)
①盒子模型相关属性会触发重布局
width
height
padding
margin
display
border-width
border
min-height
②定位属性及浮动也会触发重布局
top
bottom
left
right
position
float
clear
③改变节点内部文字结构也会触发重布局
text-align
overflow-y
font-weight
overflow
font-family
line-height
vertival-align
white-space
font-size
5:只触发重绘的属性
color
border-style
border-radius
visibility
text-decoration
background
background-image
background-position
background-repeat
background-size
outline-color
outline
outline-style
outline-width
box-shadow
6:新建DOM的过程
1. 获取DOM后分割为多个图层
2. 对每个图层的节点计算样式结果(Recalculate style--样式重计算)
3. 为每个节点生成图形和位置(Layout--回流和重布局)
4. 将每个节点绘制填充到图层位图中(Paint Setup和Paint--重绘)
5. 图层作为纹理上传至GPU
6. 符合多个图层到页面上生成最终屏幕图像(Composite Layers--图层重组)
Chrome创建图层的条件
3D或透视变换(perspective transform)CSS属性
使用加速视频解码的<video>节点
拥有3D(WebGL)上下文或加速的2D上下文的<canvas>节点
混合插件(如Flash)
对自己的opacity做CSS动画或使用一个动画webkit变换的元素
拥有加速CSS过滤器的元素
元素有一个包含复合层的后代节点(一个元素拥有一个子元素,该子元素在自己的层里)
元素有一个z-index较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)
7:实战优化点:
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 硬件加速 tranform3D
8 总结:避免使用重绘回流的两种方法
(1) 避免使用重绘和回流的CSS属性
(2) 将重绘和回流的影响范围限制在单独的图层中(gif图)