重绘与回流(重排)

这时候你要先了解防抖、节流（可以看看我的文章）

防抖 任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行（比如说我们一直点击按钮  只有不点击按钮之后1秒才会触发）

节流 指定时间间隔内只会执行一次任务（比如说我们一直点击按钮  1秒之后会触发一次  然后1秒之后又会触发一次......）

 

重绘与回流

重绘（repaint）：当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要 UI 层面的重新像素绘制，因此损耗较少（元素背景颜色，字体颜色等的改变，不会影响到布局的就喊重绘）

常见的重绘操作：

1. 改变元素颜色
2. 改变元素背景色
3. more ……

 

回流（reflow）：别名又叫重排。当元素的尺寸、结构或者触发某一些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。（元素宽高、位置等的改变，会影响到布局的就喊回流）

常见的回流操作：

1. 页面初次渲染
2. 浏览器窗口大小改变
3. 元素尺寸/位置/内容发生改变
4. 元素字体大小变化
5. 添加或者删除可见的 DOM 元素
6. 激活 CSS 伪类（:hover……）
7. more ……

 

这个与防抖跟节流有什么关系？

      举个例子：界面上有个 div 框，用户可以在 input 框中输入 div 框的一些信息，例如宽、高等，输入完毕立即改变属性。但是，因为改变之后还要随时存储到数据库中，所以需要调用接口。如果不加限制......

为什么需要节流？

      因为有些事情会造成浏览器的 回流，而 回流 会使浏览器开销增大，所以我们通过 节流 来防止这种增大浏览器开销的事情

 

 

好 说到这里，估摸大家都理解了 什么是重绘？ 什么是回流？什么是防抖？什么是节流？如何配合防抖、节流来优化重绘和回流（减少浏览器消耗）

那我们在工作中如何避免大量使用重绘与回流呢？

1.避免频繁操作样式，可汇总之后统一修改

2.尽量使用class进行样式修改，而不是直接操作样式

3.减少DOM的操作，可使用字符串一次性插入

 

参考：

一篇文章搞定前端面试（https://juejin.im/post/5bbaa549e51d450e827b6b13）

2019 面试准备 - JS 防抖与节流（https://juejin.im/post/5c87b54ce51d455f7943dddb）

浏览器渲染页面过程剖析（https://www.jianshu.com/p/32ca5f1c0768）