前端性能之减少重排和重绘

怎么减少重排和重绘？？

首先减少获取操作

1  在for循环中，尽量不要进行样式的获取操作（因为一获取就会flush(清空)浏览器维护的队列 ）

2  尽量少用sytle修改样式，通过添加class进行一次性修改样式

3  使用 translate 代替 left/top等，（translate只会触发重绘，不会引起重排，可以减少一次重排的时间）

4  使用opacity代替visibility,改透明度渲染效率更高

5  使用绝对定位或者固定定位(absolute  fixed),脱离文档流不会引起页面其它盒子的变化

6  将大量需要重排操作的元素，进行display:none ，（专业术语是' 离线处理'）

备注：GPU 是图形处理器，使用3d属性可以触发gpu硬件加速。

移动端的优化可以给元素添加 3d属性（比如 transform: translateZ(0)），使用3d属性可以使手机开启gpu硬件加速，让手机可以最高性能的进行渲染。

使用css精灵图片，减少图片的张数，或者使用iconfont字体图标、svg 、 base64

减少ajax请求的次数，使用webpack打包

压缩/合并js和css代码，减少代码文件的个数和体积        

优化思路

1) 触发回流的耗时 > 触发重绘的耗时

- 所以 尽量避免回流 ,- 如果回流无法避免呢？

- 将频繁回流的 DOM 元素 单独作为一个 独立图层  那么这个 DOM 元素的重绘和回流只会影响 这个图层. 主要利用 transfrom 的字段来创建图层.

2) 需要注意, 图层重组也耗时 ,他的时间取决于图层的数量

- 所以需要权衡我们的页面究竟应该使用独立图层,还是放弃. 这就需要对两种方案进行测试,最后确实证明能提升性能. 浏览器的 performance 就会帮助我们测试.

备注： document.write只能重绘整个页面，innerHTML可以重绘页面的一部分