N Tips for Writing High-Performance Javascript Code_javascript tips

For many years, Javascript has played an important role in web application development, but many developers often ignore some performance knowledge. Especially with the continuous upgrading of computer hardware, developers are increasingly concerned about the performance optimization of Javascript. It has no obvious impact on the execution efficiency of the web page. But in some cases, unoptimized Javascript code will inevitably affect the user experience. Therefore, even in the current era when hardware performance has been greatly improved, when writing Javascript code, if you can follow Javascript specifications and pay attention to some performance knowledge, it will be of great benefit to improve the maintainability of the code and optimize performance.

　 Here are some suggestions for writing high-performance Javascript code:

1. Try not to use for-in loop to access arrays. It is recommended to use for loop to loop: 　　

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. It is recommended to cache objects, especially DOM access, which consumes resources:

 //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. It is recommended not to make too deep nested judgments within functions:

//函数内嵌套判断语句过多
  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. Avoid circular references and prevent memory leaks:

//需要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. It is recommended to avoid returning an undeclared variable within a function, which will pollute external variables:

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

　6. var declares variables. It is recommended to write them in multiple lines

 //自己测试结果是foo快，但也有一种观点是foo快
 function foo() {
  var c = ;
  var sum=;
  var d = ;
  var e;
 }
 function foo() {
  var c = ,sum=, d = , e;
 }

Note: In fact, the difference in the time of a single function is small. Here we use the cumulative time to loop multiple times for performance comparison. There may be differences in the test results of different PC configurations or browsers.

The above content is N suggestions for writing high-performance Javascript code. I hope it will be helpful to everyone.