JavaScript optimization Details

As a website development Web front-end engineers, to their own development of the site project should be as far as possible to optimize its performance, now on the Internet search on the site performance optimization is reproduced from the YAHOO14 or 34 articles. Yahoo's optimization advice is focused on the big side, and the following, the group provides you with the optimization details of JavaScript for the Web front-end development of High-performance optimizations!

First, avoid the occurrence of uncontrolled script

Any script that executes at any time, on any browser, should not exceed 100 milliseconds. If the actual execution time is longer than this limit, be sure to break the process down into smaller pieces of code.

There are basically four reasons why a script is out of control:

1. Too many operations performed in the loop

The trick to solving this problem is to evaluate each cycle with the following two questions:

Does this loop have to be synchronized?

Does the data inside the loop have to be executed sequentially?

If 1 and 2 can be negated, it is recommended to use the SetTimeout method to cut the loop body into small chunks for asynchronous processing

Put the definition variables and initialization operations in the loop outside the loop. See also: http://www.w3cgroup.com/article.asp?id=111

2. Bloated function body

In JavaScript, we should use local variables as much as possible instead of global variables!

Understand the JavaScript scope chain. See also: Http://www.jslab.org.cn/?tag=ScopeChainAndClosure

Understand the prototype chain. See also: Http://www.jslab.org.cn/?tag=prototypeChain

3. Excessive recursion

Using iterative method to replace recursion, using memoization technology to optimize recursion

4. Too many DOM calls

One of the most important functions of JavaScript in web development is to manipulate the DOM. But you know what? The operation of the DOM is very expensive because it causes the browser to perform a reflow (reflow) operation. And if you do a lot of reflux, you'll find your site getting slower. We should try to reduce DOM operations as much as possible.

Reflux operations can occur mainly in several situations:

Change the size of a form

Change font

Add Remove stylesheet block

Content change even if the input box input text

CSS virtual class is triggered as: hover

Change the classname of an element

When a new or deleted operation or content change is performed on a DOM node.

When a style style is dynamically set (for example, element.style.width= "10px").

When you get a dimension value that must be computed, such as accessing offsetwidth, ClientHeight, or other CSS values that need to be computed (in a browser that is compatible with DOM, you can get it through the getComputedStyle function; in IE, Can be obtained through the Currentstyle property.