js 避免回流和重绘

重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式（跳过了上图所示的回流环节）。

回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）

会发生回流和重绘的的操作：

• DOM的添加和删除；
• 页面的加载；
• 元素尺寸改变——边距、填充、边框、宽度和高度；
• 元素位置的改变；
• 内容变化，比如用户在input框中输入文字；
• 浏览器窗口尺寸改变——resize事件发生时；

• 获取某些属性：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight。

减少回流和重绘的操作（会继续补充）：

• 使用 transform 替代 top
• 使用 visibility 替换 display: none

文章来自：https://www.cnblogs.com/charliePU/p/10749730.html