1. 什么是重排与重绘

想要了解什么是重排与重绘，我们需要知道浏览器的渲染渲染页面的过程

浏览器渲染过程

浏览器得到所有的页面资源之后，会对他们进行分析，根据 HTML 生成 DOM 数，根据 CSS 等样式资源生成 Style Tree，然后两者相结合构建渲染树，一旦渲染树构建完成，浏览器就会开始排布、绘制页面。当 DOM 产生几何数据的变化，例如宽高，位置等浏览器需要重新计算元素的几何属性，同样其他元素的位置等几何属性也会收到影响，浏览器会使渲染树中受到影响的部分失效，并重新构建渲染树，这个过程称为重排。完成重排后，浏览器会重新绘制受影响的部分到屏幕上，这个过程就是重绘

重排

即 DOM 的几何属性发生变化，浏览器使受影响的渲染树部分时效，重新构建渲染树

重绘

浏览器会重新绘制受影响的部分到屏幕上

这样一看，重排必然导致重绘，而重绘不一定导致重排

2. 重排重绘的触发机制

上面已经讲到了，当元素的几何数据产生变化，就会引起重排，不难总结触发重排的因素：

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

重绘就很简单了，只要是元素的属性类似于 backgroud-color 发生改变就会导致重新绘制元素，触发重绘

3. 基于重排与重绘的一些性能优化方案

重排与重绘都是比较消耗浏览器性能的，因此我们需要尽量避免对 DOM 进行过多的操作，避免重排与重绘的发生

使用虚拟 DOM

偷个小懒，即使用 Vue、React 等框架，对虚拟 DOM 进行操作，对 DOM 节点上的变化转移到对虚拟 DOM 上，最终将虚拟 DOM 渲染出来，这样当你进行很多次操作时，他都会只进行一次渲染重排，减少浏览器的渲染次数，提高性能

减少重排次数

当我们对元素进行多个属性的修改时，我们可以通过对这个元素添加 class 属性或者 cssText 来减少重排与重绘的次数

// 原始代码
let dom = document.querySelector('#dom')
dom.style.height = '100px'
dom.style.width = '100px'

上述代码在远古浏览器中可能会触发两次重排一次重绘，那么我们可以将代码优化为以下形式

cssText 优化

// 优化方案 1
let dom = document.querySelector('#dom')
dom.style.cssText = 'height: 100px; width: 100px'

class 优化

// 优化方案 2
let dom = document.querySelector('#dom')
dom.classList.add('className')

这样能减少一些重排的次数

将重排修改为重绘

当我们需要对元素进行营隐藏或者其他操作时，尽量减少对元素的几何属性进行操作

let dom = document.querySelector('#dom')
dom.style.display = 'none'

// 有华为
dom.style.opacity = 0

使用文档碎片减少对 DOM 添加进行的操作

当我们需要对一个 DOM 元素内添加多个 DOM 元素时，我们可以使用文档碎片，在文档碎片中添加 DOM 元素，然后将文档碎片插入到 DOM 元素中去

let ul = document.querySelector('ul')

// 创建文档碎片
let fragment = document.createDocumentFragment()
for ( let i = 0; i < 99; i++ ) {
    let li = document.createElement('li')
    li.innerHTML = i
    fragment.appendChild(li)
}
ul.appendChild(fragment)

操作克隆 DOM

我们可以将要被进行操作的 DOM 进行克隆，然后对这个克隆出来的 DOM 进行操作，操作完成之后重新替换到这个节点上，这样即使我们的操作有触发多次重排的条件，也只会触发浏览器的一次重排

let oldElement = document.querySelector('#old-element')
let cloneElement = oldElement.cloneNode(true)

// 对这个克隆的 DOM 进行操作
cloneElement.style.height = '100px'
cloneElement.appendChild(document.createElement('div'))
// ...

// 替换原有 DOm
oldElement.parentNode.replaceChild(clone, cloneElement)