How to optimize the performance of JavaScript scripts

Author: shiningray @ Nirvana Studio

With the development of the network and the speed of the machine, more and more websites use the rich client technology. Now Ajax is one of the most popular ways. JavaScript is an interpreted language, so it can't reach the level of C/java and so on, limiting what it can do on the client, and in order to improve his performance, I want to talk about my experience based on a lot of the tests I've done on JavaScript before. Hopefully it will help you improve your JavaScript scripting performance.

Language-level aspect loops

Loops are a very common control structure, most things depend on it to do it, in JavaScript we can use for (;;), while (), for (in) three loops, in fact, in these three loops for (in) is very inefficient because he needs to query the hash key, As long as you can, you should try to use less. for (;;) The performance of the while loop should be the same as the basic (usually used) equivalent.

In fact, the use of these two cycles, there is a great stress. I have some interesting situations in the test, see appendix. The final conclusion is:

If the loop variable is incremented or decremented, do not assign a value to the loop variable alone, and you should use the nested + + or--operator characters when it is last read.

If you want to compare the length of an array, you should put the length property of the array into a local variable in advance, reducing the number of queries.

For example, suppose Arr is an array, the best way to traverse the element is:

For (var i=0, len = arr.length;i<len;i++) {...}

Or, if it doesn't matter in order:

for (Var i=arr.length;i>0;i--) {...}

Local variables and global variables

Local variables are faster than global variables, because global variables are actually members of global objects, and local variables are placed in the stack of functions.

Do not use eval

Using Eval is equivalent to invoking the interpretation engine to run the content at run time, which takes a lot of time. This time using JavaScript-supported closures enables functional templates (refer to functional programming for the contents of closures)

Reduce Object Lookup

Because of the interpretation of JavaScript, so a.b.c.d.e, you need to do at least 4 query operations, first check A and then check a B, and then check C in B, so down. So if this expression repeats itself, as long as possible, you should try to minimize the expression, you can use the local variable, put it into a temporary place to query.

This can be combined with loops, because we often have to loop according to the length of the string, the length of the array, which is usually constant, such as the a.length of each query, the additional operation, and the advance of the Var

Len=a.length, there is one less query.

string concatenation

If you are appending a string, it is best to use the S+=ANOTHERSTR action instead of using S=S+ANOTHERSTR.

If you want to connect multiple strings, you should use + = less, such as

s+=a;
s+=b;
s+=c;

should be written

s+=a + b + c；