如何页面减少重绘回流

主要方法：

1. 直接改变className，如果动态改变样式，则使用cssText（考虑没有优化的浏览器）
2. 让要操作的元素进行”离线处理”，处理完后一起更新
3. 不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，利用缓存

4. 让元素脱离动画流，减少回流的Render Tree的规模

   具体操作：

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

13. 启用 GPU 硬件加速（translateZ、translate3d）；（合成多图层也有代价）

转载于:https://www.cnblogs.com/janas-luo/p/9605645.html