iT邦幫忙

DAY 28
4

JavaScript 三十參系列 第 28

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

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


使用DOM樹是客戶端JS最常進行的工作之一,同時也是造成使用者頭痛的主因,不僅如此,更打壞了JS名聲。因為在不同瀏覽器上DOM的實作並不一致,這也是為什麼要使用一個好的JS framework,抽象化瀏覽器間的差異,進而提昇開發效率。

DOM的存取是十分昂貴耗時的,也是最常見的JS效能瓶頸。因此最低限度是DOM的存取應該盡量減至最少,其中技巧如下:

==================
(1)避免在迴圈中存取DOM
(2)將DOM參考指派給區域變數,並用變數來操作
(3)使用selector API
(4)預先快取HTML元素length
==================

先看範例:

速度慢,不要這樣作

for (var i = 0; i < 100; i++){
	document.getElementById("result").innerHTML += i + ",";
};

較佳,處理的是區域變數,最後才動到DOM

var i, content = "";
for (var i = 0; i < 100; i++){
	 content += i + ",";
};

document.getElementById("result").innerHTML += content;

今天就上到這,進廣告囉~

(待)

JavaScript 三十參(總整理)


上一篇
JavaScript 三十參(27):DOM和瀏覽器(1/3)
下一篇
JavaScript 三十參(29):DOM和瀏覽器(3/3)
系列文
JavaScript 三十參30

2 則留言

0
總裁
iT邦好手 1 級 ‧ 2012-11-05 15:55:02

拍手加油!!!魔術數字剩二!!!

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

今天的技術文早鳥禮,電影票一張,請上土豆網....

0
Ken(Bigcandy)
iT邦大師 1 級 ‧ 2012-11-05 19:01:44

快結束了

ted99tw iT邦高手 1 級 ‧ 2012-11-05 19:11:23 檢舉

衝刺衝刺衝刺

集氣...衝刺!!

我要留言

立即登入留言