创建一个新的空白的文档片段( DocumentFragment)。

语法

let fragment = document.createDocumentFragment();

fragment 是一个对空文档对象 DocumentFragment 对象的引用。

描述

DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到DOM树。在DOM树中,文档片段被其所有的子元素所代替。

因为文档片段存在于内存中,并不在DOM树中,所以将子元素插入到文档片段时不会引起页面回流(reflow)(对元素位置和几何上的计算)。因此,使用文档片段document fragments 通常会起到优化性能的作用(better performance)

documentFragment 被所有主流浏览器支持。所以,没有理由不用。

http://caniuse.com/#search=documentFragment

https://github.com/Fyrd/caniuse/pull/3498

似乎IE 6/7/8也支持documentFragment!

ie5 test

怀疑 caniuse 上给出的数据是错误的,因为起码在 IE8 上这个 document.createDocumentFragment 是可以被调用的。

http://caniuse.com/#search=documentFragment

例子

此示例创建主要Web浏览器的列表。

HTML

<ul data-uid="ul">
</ul>

JavaScript

// assuming it exists (ul element)
let ul = document.querySelector(`[data-uid="ul"]`),
    docfrag = document.createDocumentFragment();

const browserList = [
    "Internet Explorer", 
    "Mozilla Firefox", 
    "Safari", 
    "Chrome", 
    "Opera"
];

browserList.forEach((e) => {
    let li = document.createElement("li");
    li.textContent = e;
    docfrag.appendChild(li);
});

ul.appendChild(docfrag);


浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
Feature Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

标准

另见

文档标签和贡献者

最后编辑者: undermoodzyx,