JavaScript代碼在web應用程序中經常用到，但是很多開發者忽視了一些性能方面的知識，如何編寫高性能javascript代碼呢?接下來，小編跟大家一起學習

多年來，Javascript一直在web應用開發中占據重要的地位，但是很多開發者往往忽視一些性能方面的知識，特別是隨著計算機硬件的不斷升級，開發者越發覺得Javascript性能優化的好不好對網頁的執行效率影響不明顯。但在某些情況下，不優化的Javascript代碼必然會影響用戶的體驗。因此，即使在當前硬件性能已經大大提升的時代，在編寫Javascript代碼時，若能遵循Javascript規范和注意一些性能方面的知識，對于提升代碼的可維護性和優化性能將大有好處。

下面給出編寫高性能的Javascript代碼的若干建議：

1、盡量不要用for-in 循環去訪問數組，建議用 for 循環進行循環：

1. function foo() { 
2. var i, b, c=[,,]; 
3. for (i in c) { 
4. b = c[i]; 
5. if(b === "") 
6. return b; 
7. } 
8. } 
9. //性能更好 
10. function foo() { 
11. var i, b, c=[,,]; 
12. for (i=;i<c.length;i++) { 
13. b = c[i]; 
14. if(b === "") 
15. return b; 
16. } 
17. }  

2、建議將對象進行緩存處理，特別是DOM訪問是比較消耗資源的：

1. //c.length沒有緩存，每次迭代都要計算一下數組的長度 
2. function foo() { 
3. var i, b, c=[,,]; 
4. for (i=;i<c.length;i++) { 
5. b = c[i]; 
6. if(b === "") 
7. return b; 
8. } 
9. } 
10. //性能更好，第一次將數組的長度緩存到變量l中，第二次及后續的循環無需計算數組長度 
11. function foo() { 
12. var i, b, c=[,,],l; 
13. for (i=,l=c.length;i<l;i++) { 
14. b = c[i]; 
15. if(b === "") 
16. return b; 
17. } 
18. } 
19.  
20. //document.getElementById('info')沒有緩存，每次都要遍歷DOM 
21. function foo() { 
22. var e; 
23. document.getElementById('info').innerHTML="call "; 
24. document.getElementById('info').innerHTML="call "; 
25.  
26. } 
27. //性能更好，第二次無需訪問DOM 
28. function foo() { 
29. var e=document.getElementById('info'); 
30. e.innerHTML="call "; 
31. e.innerHTML="call "; 
32. } 

3、建議不要在函數內進行過深的嵌套判斷：

1. //函數內嵌套判斷語句過多 
2. function foo1() { 
3. var r={}; 
4. r.data={}; 
5. r.data.myProp=2; 
6. if (r) { 
7. if (r.data) { 
8. if (r.data.myProp) { 
9. //邏輯處理 
10. }  
11. else { 
12. //邏輯處理 
13. } 
14. } 
15. } 
16. } 
17. //性能更好 
18. function foo2() { 
19. var r={}; 
20. r.data={}; 
21. r.data.myProp=2; 
22. if (!r) return; 
23. if (!r.data) return;  
24. if (r.data.myProp) { 
25. //邏輯處理 
26. } else { 
27. //邏輯處理 
28. } 
29. } 

4、避免循環引用，防止內存泄漏：

1. //需要jQuery 
2. function foo(e,d) { 
3. $(e).on("click", function() { 
4. //對d進行邏輯處理 
5. cbk(d); 
6. }  
7. }); 
8. } 
9. //打破循環! 
10. function foo(e, d) { 
11. $(e).on("click", cbk(d)); 
12. } 
13. function cbk (d) { 
14. //邏輯處理 
15. } 

5、建議避免在函數內返回一個未聲明的變量，會污染外部變量：

1. function foo(a, b) { 
2. r = a + b; 
3. return r; //r未聲明，則創建了一個全局變量 
4. } 

6、var聲明變量，建議寫在多行

1. //自己測試結果是foo快，但也有一種觀點是foo快 
2. function foo() { 
3. var c = ; 
4. var sum=; 
5. var d = ; 
6. var e; 
7. } 
8. function foo() { 
9. var c = ,sum=, d = , e; 
10. } 

說明：其實單個函數時間上差別較小，這里采用循環多次用累計時間進行性能對比，不同PC配置或者瀏覽器測試結果可能存在差異。

以上內容是編寫高性能Javascript代碼的N條建議，希望對大家有所幫助。