其實只是一些基本的東西,只是容易被忘記。
今天強者我同學問我一個 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('');
不過當然這個作法有一些問題,比方說光是這樣寫,若是有標籤的話,JavaScript 並不會被 evaluated;或是要把
塞進
標籤中,在 IE 就會失效等等。我同學剛好碰到了
的這個問題,於是我引用 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
來得快上許多,當然更重要的是,問題也被解決了 🙂
多謝指導,我沒用過耶^^”
Thank you for your indicate!
的確是很有用,但容易被忽略的細節
受教了…