JavaScript 中的 document.createDocumentFragment

其實只是一些基本的東西，只是容易被忘記。

今天強者我同學問我一個 JavaScript 的問題，大意是說他有一個迴圈要跑，而在這個迴圈之中會產生 DOM element，每次一產生 DOM element 就會把它加入到頁面中，然而他程式中的迴圈執行次數不少，造成他這段程式碼有很嚴種的效率問題，簡單地說就是在各個瀏覽器上都有很慢的感覺。

所以我先跟他說，你可以先把欲生成的東西以字串方式組合好，然後再一次加入到頁面，程式碼的流程大致如下：（這裡用陣列來串接字串的方式，可以參考我同事寫的文章：在 JavaScript 使用 Array.join 取代大量的字串相加 ）

var html = [];
for (var i in some_array) {
    var node = ..... // 產生 HTML 字串
    html.push(node);
}
targetNode.innerHTML = html.join('');

不過當然這個作法有一些問題，比方說光是這樣寫，若是有<script>標籤的話，JavaScript 並不會被 evaluated；或是要把 <option> 塞進 <select> 標籤中，在 IE 就會失效等等。我同學剛好碰到了 <select> 的這個問題，於是我引用 jQuery 中 clean 函式的作法來回答它。

var fragment = document.createDocumentFragment();
for (var i in some_array) {
    var node = document.createElement('option');
    node.innerHTML = '....';
    fragment.appendChild(node);
}
targetNode.appendChild(fragment);

在這段程式碼中，使用了 document.createDocumentFragment() 這個函式產生一個 document fragment，你可以把它想作是一個處理 DOM element 的 buffer，把欲生成的 DOM element 先加入到這個 fragment 中，最後再一次加到頁面的 DOM 結構中，這樣的作法比起在迴圈中一直 appendChild 來得快上許多，當然更重要的是，問題也被解決了 :)

歷史上的今天

• 為什麼要抗爭 - 2006
• 身為一個 blogger 該注意什麼呢？ - 2006
• 嫌 Flickr 的 Photoset 太少？ - 2006
• Blog 上字型的問題 - 2006