Javascript performance optimization summary

Understanding JS performance optimization is an essential skill for learning the front-end. Below we will summarize the js performance optimization methods:

1. Pay attention to the scope to avoid global search.

Accessing global variables is slower than accessing local variables because it takes additional time to traverse the scope chain and search for the scope chain. Therefore, in a function, the global objects or out-of-domain variables accessed for multiple times are stored as local variables. If a method needs to reference the value of a global variable, define a local variable in the scope of the object where the method is located to be equal to the value of the global variable.

Avoid unnecessary property search and set the property as a local variable.

Function (){

Var title = document. title;

For (var I = 0; I <3; I ++ ){

Console. log (title );

}

}

 

2. Optimized cycle

Simplify the loop body. Expand the loop when there are not many loops. If-else is large, we recommend that you use the switch statement.

 

3. Minimize the number of statements

When multiple variables are declared, you can use a var keyword to declare them. Variables are expressed by commas.

Create an array or object using an array or object literal. Var arr = [1, 2, 4]; var map = {a: 1, B: 2}

 

4. JS execution should be separated from the DOM tree as much as possible, limit the number of DOM operations, optimize DOM interaction, and minimize the rendering and re-painting operations on DOM by the browser.

To minimize the number of on-site updates, the on-site update is to immediately update the page display. Update as few as possible. In this case, we can use document fragments to construct the DOM structure. Document. createDocumentFragment ()

Use innerHTML to construct a large DOM structure. But it also avoids repeated use.

 

5. Use event proxy

There is a negative correlation between the number of event handlers on the page and the speed of page response user interaction. Therefore, in order to reduce the number of event handlers, we recommend that you use event delegation technology whenever possible.

 

6. Execution sequence of JS

When JavaScript is placed at the end of the HTML page, JS performance may not be improved, but the page will be rendered quickly when the network speed is slow.

 

7. JS defines behavior, html definition content, CSS definition appearance, not obfuscation

 

8. Reduce the number of HTTP requests, JS compression, and HTTP compression

 

9. Store data in arrays as much as possible

 

10. Code optimization does not reduce the amount of code, but increases the code readability.

Including correctly marking variables, encapsulating a repeated behavior, and reasonable comments.


11. Avoid excessive shuffling and re-painting operations.

Try to put multiple read operations in the DOM together, and do not insert write operations in the middle, because write operations will cause the browser to rapidly rearrange, thus affecting performance. Put multiple write operations in the DOM together and do not insert read operations. If you insert a read operation, the browser rearranges the operation multiple times. That is, read/write operations in the DOM are separated.

 

12. Value obtained by cache shuffling

The browser needs to rearrange the value the next time it is used.

 

13. Modify the element style by setting the style name

You can change the style of an element by changing the class of the element or the csstext attribute.

 

14. Try to use offline DOM to operate nodes

For example, to operate on the Document Fragment object, insert the object to the actual DOM. Or cloneNode () method, operate on the cloned node, and then replace the original node with the cloned node.

 

15. Use display: none for frequently-operated elements and then operate on them. After the operation, the display: block will be restored.

In this way, the browser only renders the page twice (hidden or displayed ). Invisible elements do not affect shuffling or re-painting.

 

16. Set the element to position: fixed or absolute, and the overhead of rescheduling will be very small.

Because the positioning element does not affect the layout of other elements.

 

17. Script Library using Virtual DOM

For example, React.

 

18. Use window. requestAnimationFrame (), window. requestIdleCallback ()

The two methods adjust the re-rendering.

RequestAnimationFrame (func): transmits a function as a parameter. This function is called before screen re-painting and performs operations in the function during the next browser rendering. In fact, this is similar to setTimeout (), but the interval is determined by the browser itself (next rendering. This method solves the problem that the browser does not know how many Javascript animations are being executed and how many Javascript animations are being executed.

Compatible syntax: mozRequestAnimationFrame () | msRequestAnimationFrame () | Weibo kitrequestanimationframe () | oRequestAnimationFrame ()

Use cases such as repeated functions, JS animations (slide), page scrolling, page amplification, and so on.

Case:

<Script>
Function scroll (elem ){
Var hei = elem. clientHeight;
Window. requestAnimationFrame (function (){
Elem. style. height = (hei * 2) + 'px ';
})
}
Function scroll2 (elem ){
Var hei = elem. clientHeight;
Elem. style. height = (hei * 2) + 'px ';
}

Elem = document. getElementById ('elem ');
Console. time ('A ');
For (var I = 0; I <100000; I ++ ){
Scroll (elem );
}
Console. timeEnd ('A ');

Console. time ('B ');
For (var I = 0; I <100000; I ++ ){
Scroll2 (elem );
}
Console. timeEnd ('B ');
</Script>


Log output:

A: 389.112 ms
B: 3922.486 ms

Obviously, it is more efficient to use the requestAnimationFrame () method. However, this method also has compatibility issues. Whether to use it depends on the project.