优化回流和重绘

1：用transform 代替 top，left ，margin-top， margin-left... 这些位移属性

2：用opacity 代替 visibility，但是要同时有translate3d 或 translateZ 这些可以创建的图层的属性存在才可以阻止回流

但是第二点经过我的实验，发现如果不加 transform: translateZ(0) 配合opacity的话还是会产生回流的，而只用visibility 就只会产生重绘不会回流

而  opacity 加上 transform: translateZ/3d  这个属性之后便不会发生回流和重绘了

3：不要使用 js 代码对dom 元素设置多条样式，选择用一个 className 代替之。

4：如果确实需要用 js 对 dom 设置多条样式那么可以将这个dom 先隐藏，然后再对其设置

5：不要在循环内获取dom 的样式例如：offsetWidth, offsetHeight, clientWidth, clientHeight... 这些。浏览器有一个回流的缓冲机制，即多个回流会保存在一个栈里面，当这个栈满了浏览器便会一次性触发所有样式的更改且刷新这个栈。但是如果你多次获取这些元素的实际样式，浏览器为了给你一个准确的答案便会不停刷新这个缓冲栈，导致页面回流增加。

所以为了避免这个问题，应该用一个变量保存在循环体外。

6：不要使用table 布局，因为table 的每一个行甚至每一个单元格的样式更新都会导致整个table 重新布局

7：动画的速度按照业务按需决定

8：对于频繁变化的元素应该为其加一个 transform 属性，对于视频使用video 标签

9：必要时可以开启 GPU 加速，但是不能滥用

转载于:https://www.cnblogs.com/aisiqi-love/p/10317548.html