【前端性能优化】避免DOM的回流

回流

元素位置发生变化，需要重新排布和渲染

避免DOM的回流

1. 放弃传统的操作dom，基于vue/react数据影响视图模式
mvvp/mvc/虚拟dom/dom diff…[尽可能的避免的重绘和回流]

2. 分离读写模式
浏览器都有批量渲染机制：如果有连续修改样式的内容，浏览器会有渲染队列机制，先统一加载到队列之中，然后进行统一的渲染；

**分离读写：**将操作样式和读取样式分开来写，利用浏览器的队列渲染机制【图中:console.log（）放在中间问题很大】

4. 样式集中改变
box.style.cssText=“width:200px；height:200px”//统一修改样式

5.缓存布局信息

box.clienrWidth是读取操作，如果放在a/b的位置会使回流的次数增加【图中的为优化之后的操作】

文档碎片容器：

字符串拼接也会减少回流
一次性加载

6.动画效果应用到position属性为absolute或者fixed元素上（脱离文档流）
脱离文档流之后，对其它的元素影响小，从而提升性能
7.css中用transform\opacity\filters这些属性会触发硬件加速，不会引发回流和重绘
缺点：过多占用内存，性能消耗严重，导致字体模糊等
【能用transform的就不要用其他的】

8.牺牲平滑度换取速度

减少对象的变化次数（减少回流）
一次性多改变一点

9.避免table布局和使用css的javascript表达式