你的位置:首页 > Java教程

[Java教程]编写高性能Javascript代码的若干建议


  多年来,Javascript一直在web应用开发中占据重要的地位,但是很多开发者往往忽视一些性能方面的知识,特别是随着计算机硬件的不断升级,开发者越发觉得Javascript性能优化的好不好对网页的执行效率影响不明显。但在某些情况下,不优化的Javascript代码必然会影响用户的体验。因此,即使在当前硬件性能已经大大提升的时代,在编写Javascript代码时,若能遵循Javascript规范和注意一些性能方面的知识,对于提升代码的可维护性和优化性能将大有好处。

  下面给出编写高性能的Javascript代码的若干建议:

  1、尽量不要用for-in 循环去访问数组,建议用 for 循环进行循环: 

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

 

  2、建议将对象进行缓存处理,特别是DOM访问是比较消耗资源的:

 1   //c.length没有缓存,每次迭代都要计算一下数组的长度 2   function foo1() { 3     var i, b, c=[1,2,3]; 4     for (i=0;i<c.length;i++) { 5       b = c[i]; 6       if(b === "2") 7         return b; 8     } 9   }10   //性能更好,第一次将数组的长度缓存到变量l中,第二次及后续的循环无需计算数组长度11   function foo2() {12     var i, b, c=[1,2,3],l;13     for (i=0,l=c.length;i<l;i++) {14       b = c[i];15       if(b === "2")16         return b;17     }18   }

 1   //document.getElementById('info')没有缓存,每次都要遍历DOM 2   function foo1() { 3     var e; 4     document.getElementById('info').innerHTML="call 1"; 5     document.getElementById('info').innerHTML="call 2"; 6      7   } 8   //性能更好,第二次无需访问DOM 9   function foo2() {10    var e=document.getElementById('info');11    e.innerHTML="call 1";12      e.innerHTML="call 2";13   }

  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、避免循环引用,防止内存泄漏:

 1 //需要jQuery 2 function foo1(e,d) { 3   $(e).on("click", function() { 4      //对d进行逻辑处理 5        cbk(d); 6           }  7    }); 8 } 9 10 //打破循环!11 function foo2(e, d) {12   $(e).on("click", cbk(d));13 }14 function cbk (d) {15 //逻辑处理16 }     

  5、建议避免在函数内返回一个未声明的变量,会污染外部变量:

1 function foo(a, b) {2   r = a + b;3   return r; //r未声明,则创建了一个全局变量4 }

  6、var声明变量,建议写在多行

 1 //自己测试结果是foo1快,但也有一种观点是foo2快 2 function foo1() { 3   var c = 1; 4   var sum=0; 5   var d = 0; 6   var e; 7 } 8  9 function foo2() {10   var c = 1,sum=0, d = 0, e;11 }

说明:其实单个函数时间上差别较小,这里采用循环多次用累计时间进行性能对比,不同PC配置或者浏览器测试结果可能存在差异。