前言：在昨天的學(xué)習(xí)中吱韭，聽老師介紹了createDocumentFragment()這個(gè)方法惧互，好吧棱烂，我承認(rèn)昨天是我第一次聽說這個(gè)方法租漂，今天查了資料，有了些許初步的了解，簡(jiǎn)單介紹一下吧
一.首先哩治，讓我們看幾種常見的動(dòng)態(tài)創(chuàng)建html節(jié)點(diǎn)的方法秃踩，如下所示：
| 方法 | 說明 |
|---|---|
| createAttribute(name) | 用指定名稱name創(chuàng)建特性節(jié)點(diǎn) |
| createComment(text) | 創(chuàng)建帶文本text的注釋節(jié)點(diǎn) |
| createDocumentFragment() | 創(chuàng)建文檔碎片節(jié)點(diǎn) |
| createElement(tagname) | 創(chuàng)建標(biāo)簽名為tagname的節(jié)點(diǎn) |
| createTextNode(text) | 創(chuàng)建包含文本text的文本節(jié)點(diǎn) |
以上這些方法，每次JavaScript對(duì)DOM的操作都會(huì)改變當(dāng)前頁面的呈現(xiàn)业筏，并重新刷新整個(gè)頁面憔杨，從而消耗了大量的時(shí)間。而createDocumentFragment()的作用蒜胖，就是可以創(chuàng)建一個(gè)文檔碎片消别，把所有的新節(jié)點(diǎn)附加其上，然后把文檔碎片的內(nèi)容一次性添加到document中翠勉。
二妖啥，接下來正式介紹createDocumentFragment()
DocumentFragment：表示文檔的一部分（或一段），更確切地說对碌，它表示一個(gè)或多個(gè)鄰接的 Document 節(jié)點(diǎn)和它們的所有子孫節(jié)點(diǎn)。且不屬于文檔樹蒿偎，繼承的 parentNode 屬性總是 null朽们。
不過它有一種特殊的行為，該行為使得它非常有用诉位，即當(dāng)請(qǐng)求把一個(gè)DocumentFragment 節(jié)點(diǎn)插入文檔樹時(shí)骑脱，插入的不是 DocumentFragment 自身，而是它的所有子孫節(jié)點(diǎn)苍糠。這使得 DocumentFragment 成了有用的占位符叁丧，暫時(shí)存放那些一次插入文檔的節(jié)點(diǎn)。 它還有利于實(shí)現(xiàn)文檔的剪切岳瞭、復(fù)制和粘貼操作拥娄。
可以用Document.createDocumentFragment() 方法創(chuàng)建新的空DocumentFragment 節(jié)點(diǎn)。
三.用法示例
使用appendChild逐個(gè)向DOM文檔中添加1000個(gè)新節(jié)點(diǎn)：
for (var i = 0; i < 1000; i++)
{
var el = document.createElement('p');
el.innerHTML = i;
document.body.appendChild(el); //直接用appendChild向文檔中插入節(jié)點(diǎn)
}
使用createDocumentFragment()一次性向DOM文檔中添加1000個(gè)新節(jié) 點(diǎn)：
var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++)
{
var el = document.createElement('p');
el.innerHTML = i;
frag.appendChild(el); //首先將新節(jié)點(diǎn)先添加到DocumentFragment 節(jié)點(diǎn)
}
document.body.appendChild(frag);//然后用appendChild插入文檔中
四.總結(jié)
我們可以理解為DocumentFragment （文檔碎片節(jié)點(diǎn)）是一個(gè)插入結(jié)點(diǎn)時(shí)的過渡瞳筏，我們把要插入的結(jié)點(diǎn)先放到這個(gè)文檔碎片里面稚瘾，然后再一次性插入文檔中，這樣就減少了頁面渲染DOM元素的次數(shù)姚炕。經(jīng)IE和FireFox下測(cè)試摊欠，在append1000個(gè)元素時(shí)，效率能提高10%-30%柱宦，F(xiàn)ireFox下提升較為明顯些椒。
不要小瞧這10%-30%，效率的提高是著眼于多個(gè)細(xì)節(jié)的掸刊，如果我們能在很多地方都能讓程序運(yùn)行速度提高10%-30%免糕，那將是一個(gè)質(zhì)的飛躍！
