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中的節點刪除並移入文檔

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

Javascript高級編程學習筆記（41）—— DOM（7）DocumentFragment類型