- 直译过来就是文档碎片，表示一个没有父级文件的最小文档对象。它被作为一个轻量版的 Document。最大的区别是因为 DocumentFragment 不是真实DOM树的一部分，它的变化不会触发 DOM 树的（重绘) ，且不会导致性能等问题。
- 它主要用来解决dom元素的插入问题，比如需要插入多个dom节点时，可以创建一个DocumentFragment，把节点依次添加到DocumentFragment上，添加完毕后再把DocumentFragment添加到页面document上，这样只会产生一次重绘。而如果直接把dom节点依次添加到页面document上就会引发多次重绘
- 实际上现代浏览器对js引发重绘的操作也会进行节流控制的，比如短时间内触发了多次repaint的话，浏览器会将他们合并成一次repaint来处理，不过保险起见直接使用DocumentFragment即可。
- 可以通过
document.createDocumentFragment创建一个文档碎片。
var oFrag=document.createDocumentFragment();
for (var i=0; i<1000; i++) {
var op=document.createElement("div");
var oText=document.createTextNode(‘i’);
op.appendChild(oText);
oFrag.appendChild(op);
}
document.body.appendChild(oFrag);
- html原生的
<template>标签其实就是一个documentfragment，使用template标签时，实际插入到document上面的是，template的子节点，它本身不会被添加到dom上面。
- react框架也有类似template的文档碎片概念：fragments，从而可以一个组件返回多个元素。
- vue也使用了template标签，不过他不允许一个组件模板上有多个父元素节点(必须有一个唯一父节点)。
