多年來,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條建議,希望對大家有所幫助。