Website development WEB front-end high-performance optimization-JavaScript optimization details

As a WEB Front-end engineer for website development, we should optimize the performance of our self-developed website projects as much as possible, currently, most of the website performance optimizations found on the Internet are translated and reproduced from 14 or 34 yahooss. Yahoo's optimization recommendations focus on major aspects. The W3C Group below shows you the JavaScript optimization details in the high-performance optimization section of WEB Front-end development!

I. avoid losing control of scripts

No matter what script is executed at any time or in any browser, it should not exceed 100 milliseconds. If the actual execution time is longer than this limit, the process must be broken down into several smaller code segments.

The script is out of control for the following reasons:

1. Too many operations are executed in the loop.

The trick to solve this problem is to evaluate each loop using the following two problems:
1. Must this loop be executed synchronously?
2. Do the data in the loop need to be executed in order?

If neither 1 nor 2 can be negative, we recommend that you use the setTimeout method to split the cyclic body into small blocks for asynchronous processing.

Place the Defined variables and initialization operations in the loop out of the loop. See: http://www.w3cgroup.com/article.asp? Id = 111

2. bloated function body

In JavaScript, we should try to replace global variables with local variables!

Understand the JavaScript scope chain. See: http://www.jslab.org.cn /? Tag = ScopeChainAndClosure

Understand the prototype chain. See: http://www.jslab.org.cn /? Tag = prototypeChain

3. Excessive Recursion

Use iteration instead of recursion, and use memoization technology to optimize Recursion

For the recursive algorithm optimization of the Fibonacci series, see: http://www.jslab.org.cn /? Tag = memoization

4. Too many DOM calls

In web development, a very important role of JavaScript is to operate the Dom. But do you know? Dom operations are very expensive, because this will cause the browser to execute the Reflow operation. If you perform too many backflow operations, you will find that your website is getting slower and slower. We should try to reduce Dom operations as much as possible.

Reflux operations may occur in the following situations:

* Change the form size.
* Changing the font
* Add and remove stylesheet Blocks
* The content is changed, even if it is input text in the input box.
* The CSS virtual class is triggered, for example, hover.
* Change the classname of an element.
* When a DOM node is added or deleted or its content is changed.
* When setting a style dynamically (such as element. style. width = "10px ").
* When obtaining a size value that must be calculated, for example, accessing offsetwidth, clientheight, or other CSS values that need to be calculated (in a dom-compatible browser, you can get it using the getcomputedstyle function; in IE, it can be obtained through the currentstyle attribute ).

The key to solving the problem is to limit the number of backflows caused by DOM operations:

1. Make as many preparations as possible before performing operations on the current DOM to ensure N creation and 1 Write.

2. Before DOM operations, delete the elements to be operated from the current DOM structure:
1. Delete objects in the true sense through removeChild () or replaceChild.
2. Set the display style of the element to "none ".
After the modification is completed, we recommend that you use 2nd methods to reverse the process.

3. CSS Section
Another common cause of backflow is to modify the appearance of an element through the style attribute, such as element. style. backgroundColor = "blue ";
Each time you modify the style attribute of an element, the reflux operation will be triggered. To solve this problem, you can:
1. Replace style. xxx = xxx with className.
2.use style.css Text = ''; write style at one time.
3. Avoid setting too many in-row styles.
4. Try to set the positions of the elements outside the structure to fixed or absolute.
5. Avoid table layout
6. Avoid using JavaScript expressions (ie only) in CSS)

4. cache the retrieved DOM data. This method is especially important for obtaining attributes that will trigger backflow operations (such as offsetwidth.

5. when you operate an htmlcollection object, you should minimize the number of accesses as much as possible. You can cache the Length attribute in a local variable, in this way, the cycle efficiency can be greatly improved.

2. Avoid large String literal object operations, such as String. lenth. Convert to new String as much as possible before performing operations

3. Use regular expressions when performing character search and replacement operations

Quick grasp of ecmascript regular expressions. See: http://www.w3cgroup.com/article.asp? Id = 202

4. Reduce the statement, use the operator priority to implement the if else expression, use a ternary expression, and use a continuous expression(Depending on the situation, program readability will be lost)

Use operator precedence to implement if else expressions see: http://www.w3cgroup.com/article.asp? Id = 131

5. Merge CSS and JS files into one file(If you are not a Bt enthusiast, do not play ^_^)

See: http://www.w3cgroup.com/article.asp? Id = 29

6. Avoid Memory leakage when binding Javascript events

"These memory leaks often occur as a result of circular references between JavaScript objects and objects within IE's Dom (Document Object Model)." Microsoft gpdteam blog

See: http://www.w3cgroup.com/article.asp? Id = 207

7. Use WEB Workers Technology(HTML5 browsers supported)

Web workers provides JavaScript with a method to run in background processes. Web workers processes tasks without affecting the user interface.

See: http://www.w3cgroup.com/article.asp? Id = 242

8. Y! 14(14 Rules for faster-loading Web sites)

* Rule 1-make fewer HTTP requests
* Rule 2-Use a content delivery network (server side)
* Rule 3-add an Expires header (server side)
* Rule 4-gzip components (server side)
* Rule 5-put stylesheets at the top
* Rule 6-put scripts at the bottom
* Rule 7-avoid CSS expressions
* Rule 8-Make JavaScript and CSS External
* Rule 9-Reduce DNS Lookups (Server side)
* Rule 10-Minify JavaScript
* Rule 11-Avoid Redirects (Server side)
* Rule 12-Remove Duplicate Scripts
* Rule 13-Configure ETags (Server side)
* Rule 14-Make AJAX Cacheable
* Rule 15-Use Iframes Wisely

See: http://www.w3cgroup.com/article.asp? Id = 97

9. Microsoft's early DHTML optimization suggestions

* Replace string accumulation with array push

Original article, reprint please indicate the source of http://www.w3cgroup.com/article.asp? Id = 255