多年來，Javascript一直在web應用開發中佔據重要的地位，但是很多開發者往往忽視一些效能方面的知識，特別是隨著計算機硬體的不斷升級，開發者越發覺得Javascript效能優化的好不好對網頁的執行效率影響不明顯。但在某些情況下，不優化的Javascript程式碼必然會影響使用者的體驗。因此，即使在當前硬體效能已經大大提升的時代，在編寫Javascript程式碼時，若能遵循Javascript規範和注意一些效能方面的知識，對於提升程式碼的可維護性和優化效能將大有好處。
下面給出編寫高效能的Javascript程式碼的若干建議：
1、儘量不要用for-in 迴圈去訪問陣列，建議用 for 迴圈進行迴圈：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function foo1() { var i, b, c=[1,2,3]; for (i in c) { b = c[i]; if(b === "2") return b; } } //效能更好 function foo2() { var i, b, c=[1,2,3]; for (i=0;i<c.length;i++) { b = c[i]; if(b === "2") return b; } } |
2、建議將物件進行快取處理，特別是DOM訪問是比較消耗資源的：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
//c.length沒有快取，每次迭代都要計算一下陣列的長度 function foo1() { var i, b, c=[1,2,3]; for (i=0;i<c.length;i++) { b = c[i]; if(b === "2") return b; } } //效能更好，第一次將陣列的長度快取到變數l中，第二次及後續的迴圈無需計算陣列長度 function foo2() { var i, b, c=[1,2,3],l; for (i=0,l=c.length;i<l;i++) { b = c[i]; if(b === "2") return b; } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
//document.getElementById('info')沒有快取，每次都要遍歷DOM function foo1() { var e; document.getElementById('info').innerHTML="call 1"; document.getElementById('info').innerHTML="call 2"; } //效能更好，第二次無需訪問DOM function foo2() { var e=document.getElementById('info'); e.innerHTML="call 1"; e.innerHTML="call 2"; } |
3、建議不要在函式內進行過深的巢狀判斷：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
//函式內巢狀判斷語句過多 function foo1() { var r={}; r.data={}; r.data.myProp=2; if (r) { if (r.data) { if (r.data.myProp) { //邏輯處理 } else { //邏輯處理 } } } } //效能更好 function foo2() { var r={}; r.data={}; r.data.myProp=2; if (!r) return; if (!r.data) return; if (r.data.myProp) { //邏輯處理 } else { //邏輯處理 } } |
4、避免迴圈引用，防止記憶體洩漏：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//需要jQuery function foo1(e,d) { $(e).on("click", function() { //對d進行邏輯處理 cbk(d); } }); } //打破迴圈! function foo2(e, d) { $(e).on("click", cbk(d)); } function cbk (d) { //邏輯處理 } |
5、建議避免在函式內返回一個未宣告的變數，會汙染外部變數：
|
1 2 3 4 |
function foo(a, b) { r = a + b; return r; //r未宣告，則建立了一個全域性變數 } |
6、var宣告變數，建議寫在多行
|
1 2 3 4 5 6 7 8 9 10 11 |
//自己測試結果是foo1快，但也有一種觀點是foo2快 function foo1() { var c = 1; var sum=0; var d = 0; var e; } function foo2() { var c = 1,sum=0, d = 0, e; } |
說明：其實單個函式時間上差別較小，這裡採用迴圈多次用累計時間進行效能對比，不同PC配置或者瀏覽器測試結果可能存在差異。