JavaScript Tips 使用DocumentFragment加快DOM渲染速度

大家在使用JavaScript的時候，DOM操作是最平常不過的了， 隨著Web前端技術的發展,我們越來越多的使用JS來操作DOM元素，比如通過ajax請求擷取到資料，然後更新頁面上的元素，一般情況下，這種操作我們會用類似node.appendChild()這中方式來完成。這個方法是無緩衝的，也就是說我們每次調用appendChild方法的時候，瀏覽器都會重新渲染頁面。當然，使用這種方法也沒有什麼不行，因為我們在一般情況下都是對少量的DOM節點進行更新，也並不會帶來太大的效能問題，但是如果大量的更新DOM節點，那麼效能的差距就會越來越明顯了。因為瀏覽器要不停的渲染頁面，尤其是一些複雜的標籤，大量的重新渲染非常消耗效能，影響使用者體驗。那麼有什麼好的方法能讓這類DOM操作的效率提高呢？

　　雖然我們平時在開發中遇到這樣情況的時候並不多，但還是有必要瞭解一下，JS中提供了一個DocumentFragment的機制，相信大家對這個並不陌生，它可以提供一個緩衝的機制，將DOM節點先放到記憶體中，當節點都構造完成後，再將DocumentFragment對象添加到頁面中，這時所有的節點都會一次渲染出來，這樣就能減少瀏覽器很多的負擔，明顯的提高頁面渲染速度。例如下面的代碼：

複製代碼 代碼如下:function CreateNodes(){
for(var i = 0;i < 10000;i++){
var tmpNode = document.createElement("div");
tmpNode.innerHTML = "test" + i + " <br />";
document.body.appendChild(tmpNode);
}
}
function CreateFragments(){
var fragment = document.createDocumentFragment();
for(var i = 0;i < 10000;i++){
var tmpNode = document.createElement("div");
tmpNode.innerHTML = "test" + i + "<br />";
fragment.appendChild(tmpNode);
}
document.body.appendChild(fragment);
}

　　上面的代碼給出了兩個函數，分別是用普通的DOM方法和DocumentFragement兩種方式向頁面添加一萬個div節點，大家可以自己實驗一下，使用第二種方式要比第一種快很多。這裡只是簡單的div標籤的平鋪添加，如果是更加複雜的HTML標籤或是多層的嵌套標籤，那麼效能的差距就會更加明顯。
　　通過上面的例子，大家在開發JavaScript應用的時候，如果遇到這種大量節點的情況，不妨將DocumentFragment作為一個備選的方案。