Improve Web website performance: 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 the big aspect, and this article will focus on analyzing the JavaScript optimization details.

BKJIA recommended reading: Summary of browser optimization policies for improving user experience

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:

◆ Must this loop be executed synchronously?
◆ 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 loop body into small blocks for asynchronous processing, and put the Defined variables and initialization operations in the loop out of the loop.

2. bloated function body

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

◆ Understand the JavaScript scope chain.
◆ Understand the prototype chain.

3. Excessive Recursion

The iteration method is used to replace recursion, The memoization technology is used to optimize recursion, And the recursive algorithm of the Fibonacci series is optimized.

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.

◆ Change the font.

◆ Add and remove stylesheet blocks.

◆ Content changes, even if it is input text in the input box.

◆ The CSS virtual class is triggered, such as 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, for example, element. style. width = "10px ").

◆ When obtaining a size value that must be calculated, such as accessing offsetWidth, clientHeight, or other CSS values that need to be calculated in a DOM-compatible browser, you can use 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 is triggered. To solve this problem, you can:

1) Replace style. xxx = xxx with className.

2. Use style.css Text = ''; To write a style at a 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.

4. Reduce the statement, use the operator priority to implement the if else expression, use a ternary expression, and use a continuous expression to check the situation, reducing program readability)

Use the operator priority to implement the if else expression.

5. Merge CSS and JS files into one file

6. Avoid Memory leakage when binding Javascript events

These memory leaks are often caused by circular applications between Javascript objects and objects.

7. Use WEB Workers technology to support html5 browsers)

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