多年來，Javascript一直在web應用開發中占據重要的地位，但是很多開發者往往忽視一些性能方面的知識，特別是隨著計算機硬件的不斷升級，開發者越發覺得Javascript性能優化的好不好對網頁的執行效率影響不明顯。但在某些情況下，不優化的Javascript代碼必然會影響用戶的體驗。因此，即使在當前硬件性能已經大大提升的時代，在編寫Javascript代碼時，若能遵循Javascript規范和注意一些性能方面的知識，對于提升代碼的可維護性和優化性能將大有好處。
下面給出編寫高性能的Javascript代碼的若干建議：
1、盡量不要用for-in 循環去訪問數組，建議用 for 循環進行循環：
function foo() { var i, b, c=[,,]; for (i in c) { b = c[i]; if(b === "") return b; } } //性能更好 function foo() { var i, b, c=[,,]; for (i=;i<c.length;i++) { b = c[i]; if(b === "") return b; } } 2、建議將對象進行緩存處理，特別是DOM訪問是比較消耗資源的：
//c.length沒有緩存，每次迭代都要計算一下數組的長度 function foo() { var i, b, c=[,,]; for (i=;i<c.length;i++) { b = c[i]; if(b === "") return b; } } //性能更好，第一次將數組的長度緩存到變量l中，第二次及后續的循環無需計算數組長度 function foo() { var i, b, c=[,,],l; for (i=,l=c.length;i<l;i++) { b = c[i]; if(b === "") return b; } } //document.getElementById('info')沒有緩存，每次都要遍歷DOM function foo() { var e; document.getElementById('info').innerHTML="call "; document.getElementById('info').innerHTML="call "; } //性能更好，第二次無需訪問DOM function foo() { var e=document.getElementById('info'); e.innerHTML="call "; e.innerHTML="call "; }3、建議不要在函數內進行過深的嵌套判斷：
//函數內嵌套判斷語句過多 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、避免循環引用，防止內存泄漏：
//需要jQuery function foo(e,d) { $(e).on("click", function() { //對d進行邏輯處理 cbk(d); } }); } //打破循環! function foo(e, d) { $(e).on("click", cbk(d)); } function cbk (d) { //邏輯處理 } 5、建議避免在函數內返回一個未聲明的變量，會污染外部變量：
function foo(a, b) { r = a + b; return r; //r未聲明，則創建了一個全局變量 }6、var聲明變量，建議寫在多行
//自己測試結果是foo快，但也有一種觀點是foo快 function foo() { var c = ; var sum=; var d = ; var e; } function foo() { var c = ,sum=, d = , e; }說明：其實單個函數時間上差別較小，這里采用循環多次用累計時間進行性能對比，不同PC配置或者瀏覽器測試結果可能存在差異。
以上內容是編寫高性能Javascript代碼的N條建議，希望對大家有所幫助。
新聞熱點
疑難解答
