JavaScript Learning Notes (17) JS Optimization _ Basics

has been very confusing Masaki why the following for loops are also despised,

for (var i = 0; i < list.length; i++) {

Looping code

}

Read the following article finally TM understand ...

Language level aspects

Cycle

In JavaScript, we can use a for (;;), a while (), for (in) three loops, in fact, the efficiency of the three loops is very poor because he needs to query the hash key, as long as it can be used as little as possible.

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.

So the code above should write this:

for (var i = 0,l = List.length i < l; i++) {

Looping code

}

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.

string concatenation

If you are collecting strings, such as + + for the same string multiple times, it is best to use a cache. How to use it? Use a JavaScript array to collect, and then connect using the Join method, as follows

var buf = new Array ();

for (var i = 0; i < i++) {

Buf.push (i.ToString ());

}

var all = Buf.join ("");

Type conversions

Type conversions are common mistakes, because JavaScript is a dynamic type language and you can't specify the type of variable.

1. Convert numbers to strings, apply "+ 1", although it looks uglier, but in fact this efficiency is the highest, performance up to say: ("+) > String () >. toString () > New String () /c2>

A string () is an intrinsic function, so it is very fast, and. ToString () to query the function in the prototype, so the speed is somewhat inferior, and the new String () is used to return an exact copy.

2. Floating point conversion to integer type, this is more error-prone, many people like to use parseint (), in fact, parseint () is used to convert strings to numbers, rather than floating-point number and integer conversion between, we should use Math.floor () or Math.Round (). In addition, unlike the problem in the second section of the object lookup, math is an internal object, so Math.floor () actually does not have much of a query method and the time to call, the fastest speed.

3. For custom objects, if the ToString () method is defined for type conversion, an explicit call to ToString () is recommended, because an internal operation attempts to convert the object's ToString () method to a string after attempting all possibilities. So it would be much more efficient to call this method directly.

Use Direct quantity

In fact, this effect is relatively small, can be ignored. What is called using the direct amount, for example, JavaScript supports using [Param,param,param,...] To express an array directly, we used to use the new array (Param,param,...), which is explained directly by the engine, which calls an array internal constructor, so a little bit faster.

Similarly,var foo = {} is also more ways than var foo = new Object (); Quick,

var reg =/.. /; Faster than var reg=new RegExp () .

String traversal operation

Looping strings, such as substitution and lookup, should use regular expressions, because JavaScript itself is slow to circulate, and regular expressions operate as APIs for languages written in C, and perform well.

Advanced objects

Custom advanced objects and date, RegExp objects can consume a lot of time when they are constructed. If you can reuse, you should use the caching method.

Dom related

Inserting HTML

Many people like to use document.write in JavaScript to generate content for a page. In fact, this is less efficient, if you need to insert HTML directly, you can find a container element, such as specifying a div or span, and set their innerhtml to insert their own HTML code into the page.

Object Query

Using the ["] query is faster than. Items (), which is similar to the previous idea of reducing object lookup, and calling. Items () Adds a single call to the query and function.

Creating a DOM node

In general, we may use strings to write HTML directly to create a node, in fact, this does not guarantee the validity of the code.

Low string operation efficiency

So you should use the Document.createelement () method, and if there are ready-made boilerplate nodes in the document, you should use the CloneNode () method, because after you use the createelement () method, you need to set the attributes of multiple elements. With CloneNode () you can reduce the number of times a property is set--and if you need to create many elements, you should prepare a boilerplate node first.

Timer

If you are working with code that is running, you should not use settimeout instead of setinterval. SetTimeout each time you want to reset a timer.

Other

Script engine

Microsoft's JScript is much less efficient than Mozilla's spidermonkey, whether it's execution speed or memory management, because JScript is not currently updated. But SpiderMonkey can't use ActiveXObject

File optimization

File optimization is also a very effective means to delete all the blanks and comments, put the code in a row, you can speed up the download speed, note that the speed of the download rather than the speed of resolution, if it is local, comments and spaces do not affect the interpretation and execution speed.

Summarize

Some of the ways to improve JavaScript performance in JavaScript programming are based on several principles:

1. Directly with the ready-made things on hand faster, such as local variables faster than global variables, direct volume than run-time construction objects, and so on.

2. Reduce the number of executions as little as possible, such as caching requires multiple queries.

3. Use the built-in features of the language as much as possible, such as String links.

4. Use the API provided by the system whenever possible, because these APIs are compiled binary code, the implementation of high efficiency

5. Some basic algorithms for optimization, also can be used in JavaScript, such as the adjustment of the operation structure. However, since JavaScript is interpreted and generally does not optimize bytecode at run time, these optimizations are still important.

Of course, some of the techniques here are also used in other interpretive languages and can be referenced.