iT邦幫忙

DAY 29
5

JavaScript 三十參系列 第 29

JavaScript 三十參(29):DOM和瀏覽器(3/3)

參與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 三十參(總整理)


上一篇
JavaScript 三十參(28):DOM和瀏覽器(2/3)
下一篇
JavaScript 三十參(30):尾聲與下一步
系列文
JavaScript 三十參30

1 則留言

0
老鷹(eagle)
iT邦高手 1 級 ‧ 2012-11-06 16:51:57

沙發筆記
來領晚餐~~!

ted99tw iT邦高手 1 級 ‧ 2012-11-06 17:03:31 檢舉

第一名當然要嚐嚐第一名的正宗蘭州拉面啦~~

魯大 iT邦高手 1 級 ‧ 2012-11-06 17:14:37 檢舉

抗議
上次的餐點比這個差很多..
抗議

ted99tw iT邦高手 1 級 ‧ 2012-11-06 17:21:49 檢舉

晚餐....通常....比較豐盛....臉紅

我要留言

立即登入留言