高效率JavaScript編寫技巧整理_javascript技巧

最近在編寫一個JavaScript框架，發現有很多細節注意得不夠，擔心長時間累積會導致框架實際應用的時候出現嚴重的效率問題。於是開始注意JavaScript提高效率的一些技巧，在這裡分享給大家。

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

2.透過JSLint來偵測你所寫的JavaScript，可以發現裡面隱藏的很多問題。 JSLint是一個JavaScript驗證工具（非開源），可以掃描JavaScript原始程式碼來找出問題。如果JSLint發現一 個問題，JSLint就會顯示描述這個問題的訊息，並指出錯誤在原始碼中的大致位置。

3.我們在寫JavaScript的時候常常需要遍歷一個數組，程式碼如下：

複製程式碼

複製程式碼

程式碼如下:

for (var i=0;i//do something
}

JavaScript的成員變數是運行時確定的，這導致每個循環都需要查找數組length屬性，因此我們可以增加一個變數來儲存數組大小：

複製程式碼

代碼如下:


var l = array.length;

for (var i=0;i//do something
}

這樣看起來已經優化得很好了，但實際上我們可以做得更好：

複製程式碼

程式碼如下:


var i=array.length;

while(i--){
//do something
}
}

這是因為這兩行程式碼轉換成彙編時，while語句所需的指令更少，在這裡就不展開說明了，大家有興趣可以去研究下彙編。 4.由於JavaScript中任何人都可以修改或加入Object.prototype中的屬性，因此我們在遍歷一個物件的屬性時，應先使用hasOwnProperty進行判斷，避免遍歷整個原型鏈，影響效率。如：

複製程式碼


程式碼如下:


for (var key in obj) {

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

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

複製程式碼


程式碼如下:

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

上述程式碼中，如果沒有事先定義局部變量，直接使用全域變數undefined來判斷，如果第三方在別的地方定義了一個全域變數undefined=3將導致結果錯誤。 6.將一個非字串型別的變數轉換成字串型別時，可以直接使用

複製程式碼

程式碼如下:


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

這個地方如果使用String(i)會慢很多。 7.定義數組的時候如果不需要使用數組類的排序等方法，只是進行一般的賦值和訪問，應該直接寫

複製代碼

代碼如下:

var array = {}; 而不是

複製程式碼

程式碼如下: var array = new Array();
そうでない場合、これは数値変数を定義するときに var i = new Number(1) と記述するのと同じくらい無意味です

8 jQuery を使用する場合は、同じコード行で同じオブジェクトに対して複数の関数を実行してみてください。例:

コードをコピー コードは次のとおりです。

$("p.ニート") .addClass("ohmy").show("slow");

の代わりに コードをコピー コードは次のとおりです:

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

その他のヒントには、DocumentFragment を使用して複数の追加を最適化すること、childNodes の代わりに firstChild と nextSibling を使用して dom 要素を走査することなどが含まれます。
詳細については、このブログを参照してください: http://www.nowmagic.net/librarys/veda/detail/363
この記事は次の記事も参照しています: http://www.cnblogs.com /ジャスティンw /archive/2009/12/07/1618500.html