性能优化

重绘重流

1、translate 代替 top top会触发回流过程（translate没有回流只有重绘）

`tranform: translateY(0)`	(替换top,例如页面浮窗)

2、opacity代替visibility visibility会触发重绘 （ paint）不会回流 （ opacity都不触发 ）

`opacity: 0`   生效的话要独立图层加一个个触发重绘的就行 （例如： transform）	

3、预先定义类名 不要一条条修改dom样式 ( 避免回流重绘多次触发 )

`className`
`addClass`

4、把DOM离线后修改 例如display: none

`display: none` ;  不会触发重绘回流（离线）

5、不要每次动态获取dom的属性 获取后存起来

避免循环中，不停调用 `clientWidth`   `clientHeight 等等` 

6、不要使用table 尽量div

table 会影响 layout 的时间

7、css动画会导致js变慢 选择合适的动画时间

动画时间短, 	`动画更平滑` ，复杂的话会影响性能 

8、动画新建图层 canvas 和video
9、启用GPU硬件加速 考察情况

浏览器自动检查，根据实际优化场景，本身有代价的，页面太多图层合成图层会麻烦