了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档

重排触发的几种方式

• 添加或删除可见的DOM元素
• 元素位置改变
• 元素本身的尺寸发生改变
• 内容改变
• 页面渲染器初始化
• 浏览器窗口大小发生改变

性能优化的方式

1. 新版本的浏览器，其本身就会对重绘重排进行优化

var div = document.querySelector('.div');
div.style.width = '200px';
div.style.background = 'red';
div.style.height = '300px';

2. 更换类名

// css 
.active {
    padding: 5px;
    border-left: 1px;
    border-right: 2px;
}
// javascript
var el = document.querySelector('.el');
el.className = 'active';

3. 批量修改DOM

批量修改DOM元素的核心思想是：

• 让该元素脱离文档流
• 对其进行多重改变
• 将元素带回文档中

具体方法：

• 隐藏元素，进行修改后，然后再显示该元素
• 使用文档片段创建一个子树，然后再拷贝到文档中
• 将元素拷贝到一个独立的节点中，操作这个节点，然后覆盖原始元素

4. 缓存布局信息

当访问诸如offsetLeft，clientTop这种属性时，会冲破浏览器自有的优化，应该尽量减少对布局信息的查询次数，查询时，将其赋值给局部变量，使用局部变量参与计算。

可以参考这篇文章：

https://segmentfault.com/a/1190000016990089

常见的引起重排属性和方法

任何会改变元素的位置和尺寸大小的操作，都会触发重排。常见的例子如下：

• 添加或删除可见的DOM元素
• 元素尺寸改变
• 内容变化，比如在input框中输入文字
• 浏览器窗口尺寸改变
• 计算offsetTop、offsetLeft等布局信息
• 设置style属性的值
• 激活CSS伪类，例如 :hover
• 查询某些属性或调用某些方法

几何属性

几何属性：包括布局、尺寸等可用数学几何衡量的属性。

• 布局：display、float、position、list、table、flex、columns、grid
• 尺寸：margin、padding、border、width、height

获取布局信息的属性或方法

获取布局信息的属性如下：

• offsetTop、offsetLeft、offsetWidth、offsetHeight
• scrollTop、scrollLeft、scrollWidth、scrollHeight
• clientTop、clientLeft、clientWidth、clientHeight
• getComputedStyle()
• getBoundingClientRect()

看到这里有的人可能会疑惑，我们只是获取这些属性值，并没有改变它，为什么会触发重排？

现代的浏览器都是很聪明的，由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。但是！当你获取布局信息的操作的时候，会强制清空队列，因为队列中，可能会有影响到这些值的操作，为了给我们最精确的值，浏览器会立即重排+重绘。

所以我们应避免频繁使用上述的属性。