为什么DOM操作会慢？

不仅要避免去操作DOM，还要减少去访问DOM的次数。

在浏览器中，DOM和JS的实现用的并不是同一个‘东西’，即不是在同一个地方，DOM和JS是两个独立的个体。

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

 原因：

（1）我们知道浏览器内核中有两个引擎，JS引擎和渲染引擎，他们是彼此分开的，且每一次使用JS去操作DOM时，两个引擎之间会发生“跨界交流”，这个交互的过程是有性能开销的，访问的量大会造成明显的性能问题。

（2）我们使用JS操作DOM时，当DOM节点被修改时，会触发渲染树的变化，从而触发重回或重排。

 

减少DOM操作

使用JS去给DOM分压----------DocumentFragment对象

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

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)...