How to optimize the performance of JavaScript scripts

With the development of the network, network speed and machine speed, more and more websites use a variety of client technologies. Ajax is currently the most popular method. JavaScript is an interpreted language, so it cannot reach the level of C/Java, which limits what it can do on the client. In order to improve its performance, I want to talk about my experience based on the many tests I have done for JavaScript before, hoping to help you improve your JavaScript script performance.

Language hierarchy

Loop

Loop is a commonly used control structure. Most things are completed by it. in JavaScript, we can use for (;), while (), for (in) in fact, the efficiency of for (in) in these three loops is very poor, because it needs to query hash keys, as long as it can be used as little as possible. The performance of for (;) and while loops is equivalent to that of normally used loops.

In fact, how to use these two cycles is very important. For some interesting cases during the test, see the appendix. The final conclusion is:

If it is a loop variable that increments or decreases, do not assign values to the loop variable separately. You should use nested ++ or -- operators during the last read.

If you want to compare the length of the array, you should first put the length attribute of the array into a local variable to reduce the number of queries.

For example, if arr is an array, the best way to traverse elements is:

For (var I = 0, len = arr. length; I


Or, if there is no order:

For (var I = arr. length; I> 0; I --){...}


Local 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 function stack.

Do not use Eval

Using eval is equivalent to calling the interpretation engine again at runtime to run the content, which consumes a lot of time. At this time, the closure supported by JavaScript can be used to implement the function template (for details about the closure, refer to the relevant content of functional programming)

Reduce Object Search

A. b. c. d. e. You must perform at least four query operations. Check a first, then B in a, and then c in B. So if such expressions repeat, you should try to avoid such expressions as long as possible. You can use local variables to put them in a temporary place for query.

This can be combined with loops, because we often need to loop based on the length of strings and arrays, And the length is usually unchanged, for example, each query. length, an additional operation is required, and the var

Len = a. length, a query is missing.

String connection

If it is an append string, it is best to use the s + = anotherStr operation instead of the s = s + anotherStr operation.

To connect multiple strings, use less + =, as shown in figure

S + = a; s + = B; s + = c;

It should be written

S + = a + B + c;

If it is to collect strings, for example, to perform the + = operation on the same string multiple times, it is best to use a cache. How to use it? Use JavaScript Arrays for collection, and connect using the join method, as shown below:

Var buf = new Array (); for (var I = 0; I <100; I ++) {buf. push (I. toString ();} var all = buf. join ("");


Type conversion

Type conversion is a common mistake because JavaScript is a dynamic type language and you cannot specify the type of a variable.

1. Convert the number into a string and apply "" + 1. Although it looks ugly, the efficiency is actually the highest. In terms of performance:

("" +)> String ()>. toString ()> new String ()

This is actually a bit similar to the following "Direct Volume". The internal operations that can be used during compilation are faster than those used during running.

String () is an internal function, so the speed is very fast, and. toString () is used to query functions in the prototype, so the speed is inferior. new String () is used to return an exact copy.

2. converting a floating point to an integer is more prone to errors. Many people prefer parseInt (). In fact, parseInt () is used to convert a string to a number, rather than converting between a floating point and an integer, we should use Math. floor () or Math. round ().

In addition, Math is an internal object, which is different from the problem in Object Search in section 2. Therefore, Math. floor () does not actually have many query methods and call times, and the speed is the fastest.

3. for custom objects, if the toString () method is defined for type conversion, we recommend that you explicitly call toString (), because after all the possibilities of internal operations are attempted, will try to convert the toString () method of the object to String, so it is more efficient to directly call this method.

• Four pages in total:
• Previous Page
• 1
• 2
• 3
• 4
• Next Page