页面回流和重绘的优化

在页面中 js的执行和css的执行其实是两条线程 

我们只知道 最终的renderTree是由（domTree + cssomTree + js ）的作用下 来生成的

但是js 的执行最终要依赖 domTree + cssomTree的生成结果， 这样就导致了 css的执行 阻塞了js的执行，因此， 我们把css 的执行优化做好是提升页面速度的比较重要的环节

在页面发生变化的时候 可能会发生三个变化

一，回流 ，触发回流的case：

   1， 页面布局发生变化 

   2， 页面的几何属性发生变化

二，重绘 ，触发重绘的case：

  1， 页面元素的属性发生了变化的时候绘触发重绘

三，图层重合 ： 浏览器的页面 其实是由一个个的图层重叠绘制 而成的， 我们在优化的时候 ，如果有必要的情况下，那么就把某个重绘频繁的元素单独生成一个图层， 比如video， canvas 这些元素 就单独一个图层，重绘频繁不会影响到其他的元素， 创建图层的方法可以加上启用 gpu的属性就可以开启一个图层 ，比如 transform，willchange：transform

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

 

基于此，优化的理念就是变回流为重绘，节省操作

优化点就是：

1， 使用teanslate 代替top 改变

2， 使用opacity 代替visibility 改变

3，不要一条一条的修改dom的样式，预先设定好class ，修改dom的className

4， 把dom离线以后作修改： dom 设为displaynone 比如100次修改完再显示

5， 不要把dom的属性值放到循环变量里去

6，不要使用table布局，table布局会引起回流，尽量使用div

7，动画实现速度的选择

8， 对于动画新建一个图层

9， 启用gpu 硬件加速

以上的话 还是基于实际的case 去做具体的选择，毕竟满足满足需求时第一位的