编写高性能Javascript代码的N条建议

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条建议，希望对大家有所帮助。