# 1. 回流和重绘
回流(reflow)
- 当
render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow) - 当页面布局和几何属性改变时就需要回流
重绘(repaint)：
- 当
render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局的，比如background-color。则就叫称为重绘。 - 回流必将引起重绘，而重绘不一定会引起回流
改革像重绘，革命像回流。
# 1.1. 针对回流和重绘的优化点
- 用
translate替代top改变 - 用
opacity替代visibility - 不要一条一条地修改 DOM 的样式，预先定义好 class，然后修改 DOM 的
className - 把 DOM 离线后修改，比如：先把 DOM 给
display:none(有一次reflow)，然后你修改100次，然后再把它显示出来 - 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
- 不要使用
table布局，可能很小的一个小改动会造成整个table的重新布局（虚拟列表就是用的div） - 动画实现的速度的选择
- 对于动画新建图层
- 启用 GPU 硬件加速