參與iT邦JavaScript中忍比賽，獲得一本JS武林祕級“JavaScript設計模式”，因而閉門修練月餘，今神功既成故節錄三十片段，以饗邦友。

除了存取DOM元素之外，我們也經常需要去改變元素，刪除或新增元素。更新元素將導致瀏覽器重新繪製畫面，也經常導致reflow（重調元素結構），而這些都是昂貴的操作。

讓我們再次強調，最佳的規則是DOM更新次數要少，而這也正意味著要“批次”處理改變，並且要在現有DOM樹之外進行，為此您可使用一個文件片段（Fragment）當作暫存區來操作。

先來看一個不良的範例：

var p, t;

pp = document.createElement('p');
t = document.createTextNode('first paragraph');
pp.appendChild(t);
document.body.appendChild(pp);   //第一次 document append

pp = document.createElement('p');
t = document.createTextNode('second paragraph');
pp.appendChild(t);
document.body.appendChild(pp);   //第二次 document append

這個範例不好的地方是對HTML文件（document）進行了2次appendChild動作。

更好的操作方式如下：

var p, t, frag;

frag = document.createDocumentFragment(); //frag就類似暫存區塊

pp = document.createElement('p');
t = document.createTextNode('first paragraph');
pp.appendChild(t);
frag.appendChild(pp)

pp = document.createElement('p');
t = document.createTextNode('second paragraph');
pp.appendChild(t);
frag.appendChild(pp)

document.body.appendChild(frag);   //僅一次 document append

此例中，文件只被更新了一次，所以效能便大幅增加了，真是小改進，大獎勵！

今天就上到這，進廣告囉～

（待）

JavaScript 三十參（總整理）