详解DocumentFragment及其用途

简介

DocumentFragment 文档片段，一个没有父对象的最小文档对象。
它被作为一个轻量版的 Document 使用，存储由节点（nodes）组成的文档结构。与document相比，最大的区别是 DocumentFragment 不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，也就不会导致性能等问题。

使用场景

当我们需要批量的向目标 DOM 中插入大量的节点或内容时，使用传统方式会多次触发回流和重绘（每次插入数据后，页面会立即反映出这个变化），影响页面性能，此时就可以考虑使用 DocumentFragment ，把所有的新节点附加其上，然后把文档碎片的内容一次性添加到 document 中。相比传统操作，这个操作仅发生一个重渲染。

使用方法

DocumentFragment 使用方法和我们使用 createElement 是一样的。

 var frags = document.createDocumentFragment();

• 比如我们想向如下列表中插入数据：

<ul id="list"></ul>

• 我们就可以使用 DocumentFragment 把零散的 DOM 操作合并起来，最后批量 append 到 list 对应的真实 DOM 中

const list = document.querySelector('#list');
const fruits = ['Apple', 'Orange', 'Banana', 'Melon'];
const fragment = document.createDocumentFragment();

fruits.forEach(fruit => {
  const li = document.createElement('li');
  li.innerHTML = fruit;
  fragment.appendChild(li);
});

list.appendChild(fragment);

兼容性

😄 目前来说，主流浏览器都兼容该api，可以放心使用。

总结

DOM 操作是一个很费力耗时的工作，所以这样的交互越少越好。当要向目标 DOM 添加大量数据时，如果逐个添加这些节点，这个过程有可能会十分缓慢。而利用 DocumentFragement 来操作要更高效。所以，当需要进行大量 DOM 操作时，尽量使用 DocumentFragement，它会让你的应用变的更快！