标签（空格分隔）： JavaScript
DocumentFragment接口表示一个没有父级文件的最小文档对象。它被当做一个轻量版的Document使用，用于存储已排好版的或尚未打理好格式XML片段。最大的区别是因为DocumentFragment不是真实DOM树的一部分，它的变化不会引起DOM树的重新渲染的操作(reflow)，且不会导致性能等问题。
最常用的方法是使用文档片段作为参数（例如，任何Node接口类似Node.appendChild和Node.insertBefore的方法），这种情况下被添加（append）或被插入（inserted）的是片段的所有子节点，而非片段本身。因为所有的节点会被一次插入到文档中，而这个操作仅发生一个重渲染操作，而不是每个节点分别被插入到文档中，因为后者会发生多次渲染的操作。
该接口在Web组件中也非常有用：模板元素在其HTMLTemplateElement.content属性中包含了一个DocumentFragment。
可以使用document.createDocumentFragment方法或者构造函数来创建一个空的DocumentFragment。
一、属性
该接口没有特殊的属性，其属性否继承自Node，并补充了ParentNode接口接口中的属性。
ParentNode.children [只读][实验属性]
返回一个实时（live）HTMLCollection，包含所有属于DocumentFragment的元素类型的子对象。
ParentNode.firstElementChild [只读][实验属性]
返回DocumentFragment的第一个Element类型的子对象，如果没有则返回null。
ParentNode.lastElementChild [只读][实验属性]
返回DocumentFragment的最后一个Element类型的子对象，如果没有则返回null。
ParentNode.childElementCount [只读][实验属性]
返回一个无符号长整型，给出DocumentFragment所有子项的数量。
二、构造函数
DocumentFragment() [实验属性]
返回空的DocumentFragment对象。
三、方法
该接口继承Node的全部方法，并实现了ParentNode接口的方法。
DocumentFragment.find() [实验属性]
返回DocumentFragment树里第一个匹配的元素Element。
DocumentFragment.findAll() [实验属性]
返回DocumentFragment树里所有匹配的元素NodeList。
DocumentFragment.querySelector()
返回DocumentFragment中的第一个元素节点，按照文档顺序，并与指定的选择器匹配。
DocumentFragment.querySelectorAll()
DocumentFragment.getElementById()
四、兼容性
Desktop
| 特性 | Chrome | FireFox | IE | Opera | Safari |
|---|---|---|---|---|---|
| 基本支持 | 1.0 | 1.0 | Yes | Yes | Yes |
querySelector() querySelectorAll() |
1.0 | 3.5 | 8.0 | 10.0 | 3.2(525.3) |
find() findAll() |
不支持 | 不支持 | 不支持 | 不支持 | 不支持 |
DocumentFragment() 构造函数 |
28.0 | 24.0 | 不支持 | 15.0 | 不支持 |
ParentNode 属性 |
28.0 | 24.0 | 不支持 | 15.0 | 不支持 |
ParentNode 方法 |
不支持 | 不支持 | 不支持 | 不支持 | 不支持 |
Mobile
| 特性 | Android | Firefox Mobile | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本支持 | Yes | 1.0 | Yes | Yes | Yes |
querySelector() querySelectorAll() |
2.1 | 3.5 | 8.0 | 10.0 | 3.2(525.3) |
* 其余实验属性参见原文
五、示例
当我们要想document中添加大量DOM节点时，如果循环插入，会出现明显的性能问题。我们也可以创建个新节点，比如说div，然后将div一次性插入document中，但是这样会多加一层div，而文档碎片（DocumentFragment）不会产生这种节点。
var docFragment = document.createDocumentFragment();
for (var i = counts; i > 0; i--) {
var node = document.createElement('p');
var node_text = document.createTextNode(i + ', hehe');
node.appendChild(node_text);
docFragment.appendChild(node);
}
document.body.appendChild(docFragment);
Last updated by: Jehorn, Dec 26, 2017, 11:20 AM