CSS的重绘和回流

回流

定义：当RenderTree中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，则称为回流
触发回流属性
1.盒子模型相关属性：width height display padding margin border border-width min-height
2.定位属性及浮动：position left right top bottom float clear
3.改变节点内部文字结构：text-align overflow-y font-weight overflow font-family line-height vertical-align white-space font-size

重绘

定义：当RenderTree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，则称为重绘。
只触发重绘属性

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

回流一定会引起重绘，而重绘不一定会引起回流

减少回流、重绘

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