性能优化：为什么不要频繁操作DOM

@[toc]

性能优化的时候，我们常说“不要频繁操作DOM”，但是“DOM 为什么这么慢”以及“如何使 DOM 变快”呢。

DOM 为什么这么慢，因为，DOM和JS的跨界交流

把 DOM 和 JavaScript 各自想象成一个岛屿，它们之间用收费桥梁连接。——《高性能 JavaScript》

JS 是很快的，在 JS 中修改 DOM 对象也是很快的。在JS的世界里，一切是简单的、迅速的。但 DOM 操作并非 JS 一个人的独舞，而是两个模块之间的协作。

JS 引擎和渲染引擎(浏览器内核)是独立实现的。当我们用 JS 去操作 DOM 时，本质上是 JS 引擎和渲染引擎之间进行了“跨界交流”。

“跨界交流”要收费——这个开销本身就是不可忽略的。我们每操作一次 DOM(不管是为了修改还是仅仅为了访问其值)，都要跨界一次。跨界的次数一多，就会产生比较明显的性能问题。因此“减少 DOM 操作”的建议，并非空穴来风。

对 DOM 的修改引发样式的更迭

很多时候，我们对 DOM 的操作都不会局限于访问，而是为了修改它。当我们对 DOM 的修改会引发它外观(样式)上的改变时，就会触发回流或重绘。

这个过程本质上还是因为我们对 DOM 的修改触发了渲染树(Render Tree)的变化所导致的：

回流：当我们对 DOM 的修改引发了 DOM 几何尺寸变化(比如修改元素的宽、高或隐藏元素等)时，浏览器需要重新计算元素的几何属性(其他元素的几何属性和位置也会因此受到影响)，然后再将计算的结果绘制出来。这个过程就是回流(也叫重排)。

重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性(比如修改了颜色或背景色)时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式(跳过了上图所示的回流环节)。这个过程叫做重绘。

由此我们可以看出，重绘不一定导致回流，回流一定会导致重绘。硬要比较的话，回流比重绘做的事情更多，带来的开销也更大。但这两个说到底都是吃性能的，所以都不是什么善茬。我们在开发中，要从代码层面出发，尽可能把回流和重绘的次数最小化。

如何使DOM变快

知道了 DOM 慢的原因，我们就可以对症下药了。

减少 DOM 操作：少“跨界交流”

例子，HTML 内容如下：

DOM操作测试

此时我有一个假需求——我想往 container 元素里写 10000 句一样的话。如果我这么做：

for(var count=0;count<10000;count++){

document.getElementById('container').innerHTML+='我是一个小测试'

}

这段代码有两个明显的可优化点。

第一点，跨界交流太多了。我们每一次循环都调用 DOM 接口重新获取了一次 container 元素，相当于每次循环都进行一次“跨界交流”。前后交了 10000 次，但其中 9999 次都可以用缓存变量的方式节省下来：

// 只获取一次container

let container = document.getElementById('container')

for(let count=0;count<10000;count++){

container.innerHTML += '我是一个小测试'

}

第二点，不必要的 DOM 更改太多了。我们的 10000 次循环里，修改了 10000 次 DOM 树。我们前面说过，对 DOM 的修改会引发渲染树的改变、进而去走一个(可能的)回流或重绘的过程，而这个过程的开销是很“贵”的。这么贵的操作，我们竟然重复执行了 N 多次！其实我们可以通过就事论事的方式节省下来不必要的渲染：

let container = document.getElementById('container')

let content = ''

for(let count=0;count<10000;count++){

// 先对内容进行操作

content += '我是一个小测试'

}

// 内容处理好了,最后再触发DOM的更改

container.innerHTML = content

JS 层面的事情，JS 自己去处理，处理好了，再来找 DOM 打报告。

事实上，考虑JS 的运行速度，比 DOM 快得多这个特性。我们减少 DOM 操作的核心思路，就是让 JS 去给 DOM 分压。

这个思路，在 DOM Fragment 中体现得淋漓尽致。

DocumentFragment 接口表示一个没有父级文件的最小文档对象。它被当做一个轻量版的 Document 使用，用于存储已排好版的或尚未打理好格式的XML片段。因为 DocumentFragment 不是真实 DOM 树的一部分，它的变化不会引起 DOM 树的重新渲染的操作(reflow)，且不会导致性能等问题。

在我们上面的例子里，字符串变量 content 就扮演着一个 DOM Fragment 的角色。其实无论字符串变量也好，DOM Fragment 也罢，它们本质上都作为脱离了真实 DOM 树的容器出现，用于缓存批量化的 DOM 操作。

前面我们直接用 innerHTML 去拼接目标内容，这样做固然有用，但却不够优雅。相比之下，DOM Fragment 可以帮助我们用更加结构化的方式去达成同样的目的，从而在维持性能的同时，保住我们代码的可拓展和可维护性。我们现在用 DOM Fragment 来改写上面的例子：

let container = document.getElementById('container')

// 创建一个DOM Fragment对象作为容器

let content = document.createDocumentFragment()

for(let count=0;count<10000;count++){

// span此时可以通过DOM API去创建

let oSpan = document.createElement("span")

oSpan.innerHTML = '我是一个小测试'

// 像操作真实DOM一样操作DOM Fragment对象

content.appendChild(oSpan)

}

// 内容处理好了,最后再触发真实DOM的更改

container.appendChild(content)

我们运行这段代码，可以得到与前面两种写法相同的运行结果。

可以看出，DOM Fragment 对象允许我们像操作真实 DOM 一样去调用各种各样的 DOM API，我们的代码质量因此得到了保证。