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('');

不過當然這個作法有一些問題,比方說光是這樣寫,若是有