快捷導(dǎo)航

高效率JavaScript編寫技巧整理

更新時間：2013年08月23日 18:11:06 作者：

最近在編寫一個JavaScript框架，發(fā)現(xiàn)有很多細(xì)節(jié)注意得不夠,于是開始關(guān)注JavaScript提高效率的一些技巧，在這里分享給大家，感興趣的你可以參考下

最近在編寫一個JavaScript框架，發(fā)現(xiàn)有很多細(xì)節(jié)注意得不夠，擔(dān)心長時間積累會導(dǎo)致框架實際應(yīng)用的時候出現(xiàn)嚴(yán)重的效率問題。于是開始關(guān)注JavaScript提高效率的一些技巧，在這里分享給大家。

1.JavaScript是唯一一個對代碼體積要求越小越好的語言，因此我們可以通過一些工具來精簡和壓縮JavaScript代碼，如JSMin、Packer、YUICompressor等。這些工具會將局部變量的名字替換成很短的變量名，例如將parseFloat()替換成a()。因此我們在編寫JavaScript代碼時，應(yīng)將每一個全局變量都映射到一個局部變量，如var parseFloat = parseFloat;

2.通過JSLint來檢測你編寫的JavaScript，可以發(fā)現(xiàn)里面隱藏的很多問題。JSLint是一個JavaScript驗證工具（非開源），可以掃描JavaScript源代碼來查找問題。如果JSLint發(fā)現(xiàn)一個問題，JSLint就會顯示描述這個問題的消息，并指出錯誤在源代碼中的大致位置。

3.我們在寫JavaScript的時候經(jīng)常需要遍歷一個數(shù)組，代碼如下：

復(fù)制代碼代碼如下:

 
for (var i=0;i<array.length;i++){ 
//do something 
} 

JavaScript的成員變量是運行時確定的，這就導(dǎo)致每一次循環(huán)都需要查找數(shù)組length屬性，因此我們可以增加一個變量來存儲數(shù)組大小：

復(fù)制代碼代碼如下:

 
var l = array.length; 
for (var i=0;i<l;i++){ 
//do something 
} 

這樣看起來已經(jīng)優(yōu)化得不錯了，但實際上我們可以做得更好：

復(fù)制代碼代碼如下:

 
var i=array.length; 
while(i--){ 
//do something 
} 

這是因為這兩行代碼轉(zhuǎn)換成匯編時，while語句所需的指令更少，在這里就不展開說明了，大家有興趣可以去研究下匯編。

4.由于JavaScript中任何人都可以修改或添加Object.prototype中的屬性，因此我們在遍歷一個對象的屬性時，應(yīng)先使用hasOwnProperty進(jìn)行判斷，避免遍歷整個原型鏈，影響效率。如：

復(fù)制代碼代碼如下:

 
for (var key in obj) { 
if (obj.hasOwnProperty(key)) { 
//do something 
} 
} 

5.在使用undefined的時候先定義一個局部變量undefined

復(fù)制代碼代碼如下:

 
var checkVal = function(val) { 
var undefined; 
return val !== undefined; 
}; 

上述代碼中，如果沒有提前定義局部變量，直接使用全局變量undefined進(jìn)行判斷，如果第三方在別的地方定義了一個全局變量undefined=3將導(dǎo)致結(jié)果錯誤。

6.在將一個非字符串類型的變量轉(zhuǎn)換成字符串類型時，可以直接使用

復(fù)制代碼代碼如下:

var str = (i + "").replace(...);

這個地方如果使用String(i)會慢很多。

7.定義數(shù)組的時候如果不需要使用數(shù)組類的排序等方法，只是進(jìn)行一般的賦值和訪問，應(yīng)該直接寫

復(fù)制代碼代碼如下:

var array = {};

而不是

復(fù)制代碼代碼如下:

var array = new Array();

否則這就和定義一個數(shù)字變量時寫var i = new Number(1)一樣沒有意義

8.使用jQuery時，對同一個對象執(zhí)行多個函數(shù)盡量放在同一行代碼里，例如：

復(fù)制代碼代碼如下:

$("p.neat").addClass("ohmy").show("slow");

而不是

復(fù)制代碼代碼如下:

 
$("p.neat").addClass("ohmy"); 
$("p.neat").show("slow"); 

其余的技巧還有使用DocumentFragment優(yōu)化多次append，使用firstChild和nextSibling代替childNodes遍歷dom元素等。
具體大家可以參考這篇博客：http://www.nowamagic.net/librarys/veda/detail/363
本文還參考了這篇文章：http://www.cnblogs.com/justinw/archive/2009/12/07/1618500.html

您可能感興趣的文章: