重绘和回流
css性能让javascript变慢？
频繁的触发重绘与回流，会导致UI频繁渲染，最终导致JS变慢。
1.回流
当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)
当页面布局和几何属性改变时就需要回流.
回流 -> 元素大小布局layout
平时可能碰到：
分页 效果增加到DOM TREE layout变化
图片 重点的 移入变大 图片大小变化
2.重绘
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
回流必将引起重绘，而重绘不一定会引起回流
3.触发页面回流的属性
- 盒子模型相关属性会触发重布局
- 定位属性及浮动也会触发重布局
- 改变节点内部文字结构也会触发重布局
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
4.只触发重绘的属性
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
5.新建DOM的过程
- 获取DOM后分割为多个图层
- 对每个图层的节点计算样式结果（Recalculate style–样式重计算）
- 为每个节点生成图形和位置（Layout–回流和重布局）
- 将每个节点绘制填充到图层位图中（Paint Setup和Paint–重绘）
- 图层作为纹理上传至GPU
- 符合多个图层到页面上生成最终屏幕图像（Composite Layers–图层重组）
6.Chrome创建图层的条件
- 3D或透视变换（perspective transform）CSS属性
- 使用加速视频解码的节点
- 拥有3D（WebGL）上下文或加速的2D上下文的节点
- 混合插件（如Flash）
- 对自己的opacity做CSS动画或使用一个动画webkit变换的元素
- 拥有加速CSS过滤器的元素
- 元素有一个包含复合层的后代节点（一个元素拥有一个子元素，该子元素在自己的层里）
- 元素有一个z-index较低且包含一个复合层的兄弟元素（换句话说就是该元素在复合层上面渲染）
1.避免使用触发重绘，回流的CSS属性
2.将重绘，回流的影响返回限制在单独的图层之间。
7.优化
- 用translate替代top改变
- 用opacity替代visibility
- 不要一条一条地修改 DOM 的样式，预先定义好 class，然后修改 DOM 的 className
- 把 DOM 离线后修改，比如：先把 DOM 给 display:none (有一次 Reflow)，然后你修改100次，然后再把它显示出来
- 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
- 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
- 动画实现的速度的选择
- 对于动画新建图层
- 启用 GPU 硬件加速
对于网络性能的调试，可以通过chrome,
通过勾选 rendering的部分可以看到重绘的部分。
