JS性能優化 之 文檔片斷 createDocumentFragment

咱們用原生JS進行開發時,常常會用到兩種更新DOM節點的方法:innerHTML 和 appendChild() 。其中 innerHTML 會徹底替換掉原先的節點內容,若是咱們是想向元素追加子節點的話,那麼 innerHTML 顯然知足不了需求。 轉而咱們就會想到 appendChild() 方法。appendChild方法接收的參數類型爲單個的節點類型對象。所以當咱們要添加多個子節點時,只能經過循環來實現。web

例如:瀏覽器

for (var i = Things.length - 1; i >= 0; i--) {
    element.appendChild(Things[i]);
}

 

咱們都知道,對DOM的操做次數越多,性能消耗也就越大。像這樣的循環添加節點,循環了多少次,就對DOM操做了多少次,性能消耗明顯是不划算的。咱們就會想,可否把要插入的節點進行打包,而後一次性添加呢?若是能夠的話,那就只對DOM作了一次操做了。要實現打包,這就要用到咱們的主角 createDocumentFragment。app

DocumentFragments是DOM節點。它們不是主DOM樹的一部分。一般的用例是建立文檔片斷,將元素附加到文檔片斷,而後將文檔片斷附加到DOM樹。在DOM樹中,文檔片斷被其全部的子元素所代替。由於文檔片斷存在於內存中,並不在DOM樹中,因此將子元素插入到文檔片斷時不會引發頁面迴流(對元素位置和幾何上的計算)。所以,使用文檔片斷一般會帶來更好的性能。性能

 

示例:建立主流web瀏覽器列表spa

HTMLcode

<ul id="ul"></ul>

 

JAVASCRIPT對象

var element  = document.getElementById('ul');

var fragment = document.createDocumentFragment();
var browsers = ['Firefox', 'Chrome', 'Opera', 
    'Safari', 'Internet Explorer'];

browsers.forEach(function(browser) {
    var li = document.createElement('li');
    li.textContent = browser;
    fragment.appendChild(li);  // 此處往文檔片斷插入子節點,不會引發迴流 (至關於打包操做)
});

element.appendChild(fragment);  // 將打包好的文檔片斷插入ul節點,只作了一次操做

 

參考資料: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragmentblog

相關文章
相關標籤/搜索