性能优化——DocumentFragment

概念

DocumentFragment 接口表示文档的一部分（或一段）。更确切地说，它表示一个或多个邻接的Document 节点和它们的所有子孙节点。

DocumentFragment 节点不属于文档树，继承的 parentNode 属性总是 null。

不过它有一种特殊的行为，该行为使得它非常有用，即当请求把一个 DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作

说明

我们知道每执行一次DOM操作都会导致页面的重绘和重新排版，比如当进行循环批量插入节点时，每一次插入就会刷新一次DOM树，严重影响页面性能。

这时候我们可以选择使用DocumentFragment来临时保存要插入的所有节点，循环完成后再插入到主文档里边，这样就只需要修改一次DOM树。

代码

var fragment = document.createDocumentFragment();

for (let i = 0;i<10;i++){
  let node = document.createElement("p");
  node.innerHTML = i;
  fragment.appendChild(node);
}

document.body.appendChild(fragment);