MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Document.createDocumentFragment()

 

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

语法

let docFragment = document.createDocumentFragment();

docFragment 是一个对空文档片段 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 id="ul">
</ul>

JavaScript

// assuming it exists (ul element)
let ul = document.getElementsByTagName("ul")[0],
    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);


浏览器兼容性

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 ? ? ? ? ?

标准

另见

文档标签和贡献者

 此页面的贡献者: xgqfrms-GitHub, yunnysunny, mike-j, charlie
 最后编辑者: xgqfrms-GitHub,