n Tips for writing high-performance JavaScript code _javascript

For years, JavaScript has been an important part of Web application development, but many developers tend to ignore some of the performance aspects, especially with the continuous upgrading of computer hardware, developers increasingly feel that JavaScript performance optimization is not good for the effectiveness of the implementation of the Web page. In some cases, however, the JavaScript code that is not optimized inevitably affects the user's experience. Therefore, even in an era when the current hardware performance has been greatly improved, the JavaScript specification and the attention to performance aspects can be followed in the preparation of JavaScript code, which will be of great benefit for improving the maintainability and optimizing performance of the code.

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

　1, try not to use the for-in loop to access the array, recommended for loop for loop:

function foo () {
   var i, B, c=[,,];
   For (i in c) {
    b = c[i];
    if (b = = "") return
     B;
   }
  }
  Better performance
  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 is more resource-consuming:

 C.length does not have a cache, each iteration computes the length of the array
  function foo () {
   var i, B, c=[,,];
   for (i=;i<c.length;i++) {
    b = c[i];
    if (b = = "") return
     B;
   }
  }
  Better performance, for the first time, the length of the array is cached in the variable L, and the second and subsequent loops do not need to compute the array length
  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 ') is not cached, and every time you traverse Dom
  function foo () {
   var e;
   document.getElementById (' info '). innerhtml= "Call";
   document.getElementById (' info '). innerhtml= "Call";
  Better performance, no access to Dom
  function foo () {
  var e=document.getelementbyid (' info ') for the second time;
  E.innerhtml= "Call";
   E.innerhtml= "Call";
  

　　3. It is not recommended to make deep nesting judgments within functions:

function nested judgment statement too many
  function foo1 () {
   var r={};
   r.data={};
   r.data.myprop=2;
   if (r) {
   if (r.data) {
    if (r.data.myprop) {
     //logical processing
    } 
    else {
     //logical processing
    }
 }}
 }
  Better performance
 function Foo2 () {
   var r={};
   r.data={};
   r.data.myprop=2;
  if (!r) return;
  if (!r.data) return;  
  if (r.data.myprop) {
   //logical processing
  } else {
    //logical Processing
  }
 }

　4. Avoid circular references to prevent memory leaks:

jquery
 function foo (e,d) {
  $ (e) is required. On ("click", Function () {
    //D for logical processing
    CBK (d);
      } 
  );
 }
 //break cycle!
 function foo (e, D) {
  $ (E). On ("Click", CBK (d));
 }
 function CBK (d) {
 //logical processing
 }  

　　5. It is recommended to avoid returning an undeclared variable within a function to contaminate external variables:

 function foo (A, b) {
  r = a + B;
  return R; R is not declared, a global variable is created
 }

　　6, VAR declaration variable, recommended written in multiple lines

 Own test results are Foo fast, but there is also a view is Foo fast
 function foo () {
  var c =;
  var sum=;
  var d =;
  var e;
 }
 function foo () {
  var c =, sum=, d =, E;
 }

Note: In fact, a single function time difference is small, here using the cumulative time cycle for performance comparisons, different PC configuration or browser test results may be a difference.

The above is the writing of high-performance JavaScript code n suggestions, hope to be helpful to everyone.