重绘与回流

重绘：元素样式发生变化，颜色，背景等；大小，位置不变，不会影响其他元素的大小位置。

重新绘制页面，只要页面有变化就会重绘

回流（重排）：元素的大小位置发生变化，触发重新布局，导致渲染树重新计算布局和渲染。

重新排布页面结构，页面的结构布局，元素之间的位置关系发生变化

重排一定会引起重绘，而重绘不一定会重排

如何避免回流

• 放弃传统的DOM操作，使用vue/react

使用虚拟DOM，DOM 对比算法技术减少低效的DOM操作

• 分离读写操作

浏览器会优化集中的dom读或写，会将集中的读写操作一次性完成，减少回流。
所以需要尽量把读操作和写操作集中在一起

• 样式集中改变

使用class将多个样式操作集中在一起，然后使用className方法一次性添加

• 缓存布局信息

将常用的DOM信息缓存在内存中，不要每次使用时，都用document读取

• 元素批量修改（使用文档碎片或者模板字符串）

使用文档碎片将多个DOM添加入文档碎片，然后再一次性加入页面中，只引发一次回流
记得销毁文档碎片，回收垃圾

• 使用元素移动代替增删

使用appendChild等方法，移动元素代替将同一元素在一处删除后再在另一处生成

• 动画应用在脱离文档流的元素上

position设为absolute或者fixed

• 使用css3硬件加速

使用transform/opacity/filters，自动开启GPU加速，不会引发回流和重绘

• 牺牲平滑度换取速度

增加动画每次移动的偏移量，降低动画帧率，减少回流次数

• 避免使用table布局和css的JavaScript表达式