回流与重绘，以及解决回流与重绘的办法

回流（重排）一定会触发重绘，重绘不一定会触发回流（重排）。

回流：任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流。

（1）添加或者删除可见的 DOM 元素；

（2）元素尺寸改变——边距、填充、边框、宽度和高度

（3）内容变化，比如用户在 input 框中输入文字

（4）浏览器窗口尺寸改变——resize事件发生时

（5）计算 offsetWidth 和 offsetHeight 属性

（6）设置 style 属性的值

（7）当你修改网页的默认字体时。

这个计算的阶段就是回流

重绘：当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局的操作，比如 background-color，我们将这样的操作称为重绘。如背景颜色发生改变，那么会引起重绘，但是不会引发回流。

解决办法：

使用class代替style，减少style的使用

使用resize、scroll时进行防抖和节流处理，这两者会直接导致回流

使用visibility替换display:none，因为前者只会引起重绘，后者会引发回流

批量修改元素时，可以先让元素脱离文档流，等修改完毕后，再放入文档流

避免触发同步布局事件，我们在获取offsetwidth这类的属性时，可以使用变量将查询结果存起来，避免多次查询，每次对offset / scroll /client等属性进行操作时都会触发回流