文檔碎片是什么？

參考標準的描述，DocumentFragment是一個輕量級的文檔對象，能夠提取部分文檔的樹或創建一個新的文檔片段，換句話說有文檔緩存的作用。

createDocumentFragment有什么作用

多次使用節點方法(如：appendChild)繪制頁面，每次都要刷新頁面一次。效率也就大打折扣了，而使用document_createDocumentFragment()創建一個文檔碎片，把所有的新結點附加在其上，然后把文檔碎片的內容一次性添加到document中，這也就只需要一次頁面刷新就可以了。

DocumentFragment類型

在所有節點類型中，只有DocumentFragment在文檔中沒有對應的標記。DOM規定文檔片段（documentfragment）是一種“輕量級”的文檔，可以包含和控制節點，但不會像完整的文檔那樣占用額外資源。DocumentFragment節點具有下列特征：

1. nodeType的值為11
2. nodeName的值為“#document-fragment”
3. nodeValue的值為 null
4. parentNode的值為 null
5. 子節點可以是 Element、ProcessingInstruction、Comment、Text、CDATASection 或 EntityReference

雖然不能把文檔片段直接添加到文檔中，但可以將它作為一個“倉庫”來使用，即可以在里面保存將來可能會添加到文檔中的節點。要創建文檔片段，可以使用 document.createDocumentFragment()方法，如下所示：

var fragment = document.createDocumentFragment();

文檔片段繼承了Node的所有方法，通常用于執行那些針對文檔的DOM操作。如果將文檔中的節點添加到文檔片段中，就會從文檔樹中再看到該節點。添加到文檔片段中的新節點同樣也不屬于文檔樹?？梢酝ㄟ^appendChild()或insertBefore()將文檔片段中內容添加到文檔中。在將文檔片段作為參數傳遞給這兩個方法時，實際上只會將文檔片段的所有子節點添加到相應的位置上；文檔片段本身永遠不會稱為文檔樹的一部分。

http://www.w3cmm.com/dom/documentfragment.html

createElement與createDocumentFragment

createElement是創建一個新的節點，createDocumentFragment是創建一個文檔片段。

DocumentFragment 接口表示文檔的一部分（或一段）。更確切地說，它表示一個或多個鄰接的 Document 節點和它們的所有子孫節點。

DocumentFragment 節點不屬于文檔樹，繼承的 parentNode 屬性總是 null。

不過它有一種特殊的行為，該行為使得它非常有用：

即當請求把一個 DocumentFragment 節點插入文檔樹時，插入的不是 DocumentFragment 自身，而是它的所有子孫節點。這使得 DocumentFragment 成了有用的占位符，暫時存放那些一次插入文檔的節點。它還有利于實現文檔的剪切、復制和粘貼操作，尤其是與 Range 接口一起使用時更是如此。

可以用 Document.createDocumentFragment() 方法創建新的空 DocumentFragment 節點。

也可以用 Range.extractContents() 方法 或 Range.cloneContents() 方法 獲取包含現有文檔的片段的 DocumentFragment 節點。

除此之外，createElement創建的元素可以使用innerHTML，createDocumentFragment創建的元素使用innerHTML并不能達到預期修改文檔內容的效果，只是作為一個屬性而已。兩者的節點類型完全不同，并且createDocumentFragment創建的元素在文檔中沒有對應的標記，因此在頁面上只能用js中訪問到。

createElement創建的元素可以重復操作，添加之后就算從文檔里面移除依舊歸文檔所有，可以繼續操作，但是createDocumentFragment創建的元素是一次性的，添加之后再就不能操作了，在之前domManip方法中提到的iNoClone多個節點操作需要克隆，就是因為文檔碎片的特性引起的，大體了解了，我們看看jQuery對于節點操作的時候，加強版的文檔碎片buildFragment。