高端性能：节流、防抖、重绘、回流

节流

• 节流：指定时间间隔内只会执行一次任务。

这有点像我们刷抢购一样，当我们在某段时间间隔内触发了多次事件，其实，它只执行一次请求！

防抖

• 防抖：任务频繁触发的情况下，只有任务触发的间隔超过制定的时间间隔的时候，任务才会被执行。

节流和防抖的区别

• 防抖是需要等待多久时间才能再触发一次事件！
• 节流是多久时间内只能触发一次事件！

重绘

• 重绘(repaint)：当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要 UI 层面的重新像素绘制，因此损耗较少。

回流

• 回流(reflow)：又叫重排（layout）。当元素的尺寸、结构或者触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。

重绘和回流的区别

• 简单点说，就比如我们页面中的某些颜色会发生动态改变，而木有影响到尺寸，布局、位置、结构这些改变的，就叫做重绘，而例如动态添加结点、改变尺寸、位置这些的，就叫做回流！
• 回流的损耗是比较大的！所以尽量不要产生太多的回流！就比如，样式的动态修改不要多步而尽量应一步到位！

为了避免大量的重绘和回流:

• 1，避免频繁操作样式，可汇总后统一一次修改
• 2，尽量使用 class 进行样式修改，而不是直接操作样式
• 3，减少 DOM 的操作，可使用字符串一次性插入

回流必定会触发重绘，重绘不一定会触发回流。重绘的开销较小，回流的代价较高。