DocumentFragment型別

除開昨天我們瞭解的兩種不常用的型別之外

今天我們要介紹的兩種型別可以說使用頻率不輸於前面最常用的幾種元素型別

首先就是DocumentFragment型別

有些小夥伴可能沒有聽說過這個型別，但是這個型別在前端效能優化方面有著舉足輕重的作用

應該是僅次於VirtualDOM（虛擬節點技術）的

那麼為什麼大家對這種型別沒有太多的感觸呢？

因為只有這種型別沒有對應的DOM標記，也就是說沒法通過解析頁面程式碼獲得

書中對該型別的定義如下：

是一種輕量級文件，可以包含和控制節點，但不會像普通的頁面那樣佔用瀏覽器資源

該類節點具有以下特徵：

1、nodeType：11

2、nodeName："#document-fragment"

3、nodeValue：null

4、parentNode：null

這類節點說白了就是不完整的文件

當然也不屬於當前的頁面的文件

所以通常用於暫存頁面的節點變動，比如有時候我們可能需要迴圈新增一些DOM內容

但是每一次迴圈瀏覽器都會進行頁面的重排、重繪等，以此來展現變更的內容

然而實際上，在很多情況下我們實際上要的只是最終的結果

至於其中迴圈了幾次，進行了多少次的操作我們並不關心

這種時候我們就需要使用 DocumentFragment 來儲存節點的變動，然後一次性渲染到頁面上

例如如下程式碼：

var fragment = document.createDocumentFragment();
var ul = document.getElementById("myList");
var li = null;

for(let i = 0;i<10;i++){
    li = document.createElement("li");
    li.appendChild(document.createTextNode("Iten"+i));
    fragment.appendChild(li);
}

ul.appendChild(fragment); 
 
//將Fragment中的節點刪除並移入文件

所以我們平時在不使用框架的時候，這些優化頁面效能的方式還是十分重要的