前端性能优化二：布局和样式

重绘：其实就是触发浏览器的 paint 的过程。

回流：其实不仅仅是触发了 paint 的过程还触发 layout 的过程

回流必定触发重绘

能触发回流的样式：

 

 能触发回流的js:

除了上面的这些还有，只要是获取元素位置相关的，浏览器都会在当前时间点去计算得到该属性，该计算的过程就会触发回流。

 只触发重绘的样式：

 

1.减少回流和重绘

布局：

使用transform代替top/left等值的改变（启用GPU加速渲染）

用opacity代替visibility

DOM:

不要逐条修改 DOM 样式，可预先定义好 class，直接修改该值。

 

不要把 DOM 结点的属性值放在一个循环里当成循环里的变量，例如循环调用 getBoundingClientRect() 方法，将会导致页面一直处于回流的过程。

不要使用 table 布局，因为你改动一点点都将影响整个 table 的布局。

对于页面的动画，我们最好新建图层，把回流和重绘的消耗降低。

启用 GPU 硬件加速：使用 transform、opacity、filters、Will-change可以启用GPU加速。

 

参考资料：https://www.jianshu.com/p/f967e77fcd05