JavaScript DocumentFragment應用

使用DocumentFragment可增加DOM操作速度

let fragment = document.createDocumentFragment();

使用一般方法每一次都會對網頁造成更新。

使用DocumentFragment 是一個頁面上不存在的物件，是一個輕量的 DOM ，他只會存在記憶體中，但是可以在記憶體中操作子節點，再把它加在即時的 DOM 上。最後再對網頁做一次更新，造成效能上的差異；也是就一般的每一次都操作DOM物件，而DocumentFragment只會對物件操作一次。

範例

若要將同樣的資料放入不同的下拉選單，fragment只能放入一次，這時就要使用cloneNode。

測試效能

我們將大量國家資料放入下拉選單，第一組使用fragment物件，另一組使用jQuery append的方式。

結果發現，差異非常的大，尤其資料量越大的時候，差異會更明顯。