css回流与重绘?如何进行规避

        回流也叫重排,是指一个元素的尺寸或位置变化时,浏览器重新计算元素的几何尺寸并重新绘制的过程;当读取元素尺寸位置时,浏览器为保证即时性,也会回流重绘是指元素样式发生变化时,重新绘制元素样式的过程

        重绘不一定导致回流，回流一定会导致重绘

如何规避css.回流与重绘,提高渲染效率?

1. 避免在循环或事件函数中频繁的读取元素尺寸位置,可以用变量提前记录尺寸位置,在频繁执行的代码中操作变量，最后统一更新，减少回流次数
2. 避免逐条改变样式，使用类名去合并样式，减少重绘次数
3. 在设置DOM元素前,设置display:none将DOM离线,避免后续大量操作导致的回流与重绘，最后再将DOM显示出来，此过程仅触发两次回流与重绘
4. 使需要频繁回流的元素脱离文档流,提高回流效率﹐如关键帧动画,过渡动画
5. 在js.动画中牺牲平滑度换取速度:每次移动1像素改为每次移动3像素,降低回流频率，...等等,还有很多