Front-end performance optimizations: DOM Operational Performance Tuning recommendations

In fact, in the web development, simply because of JS caused performance problems, mainly because of the DOM operation caused.

1 optimization of Find elements

2 Changing the DOM, including adding, modifying, deleting DOM

3 changing the style class of the DOM, etc.

4 Bulk Modifying the DOM

5 Reducing IFRAME

6 styles are placed in the header, scripts are placed before closing tags </body>

1 optimization of Find elements

Because the ID is unique, there is also the original method, so using the ID to find the element is the fastest, followed by the class and type to find the element, through the property lookup element is the slowest, so should be as far as possible through the ID or class to find elements, avoid through the class to find elements.

2 Changing the DOM, including adding, modifying, deleting DOM

Changing the DOM will cause the browser to render, and rendering is fairly slow, so you should avoid unnecessary rendering

divupdate.innerhtml = ""; for (var i=0; i<100; i++) {  divupdate.innerhtml + = "<span>this is a slower method! </SPAN> "; }

Switch

var str= ""; for (var i=0; i<100; i++) {  str + = "<span>this is faster because it uses a string! </SPAN> "; } divupdate.innerhtml = str;

3 Changing the style class of the DOM, etc.

Changing the style of DOM elements, classes can also cause browser rendering, so you should also reduce unnecessary operations

Switch

4 Bulk Modifying the DOM removes the element from the document stream, applies multiple changes to it, and brings the element back to the document

This minimizes redrawing and re-typesetting,

Specific methods:

1 hide the element, make the changes, and then display it.

2 Copy the original element into a node that is out of the document, modify the copy, and overwrite the original element.

5 Reducing IFRAME

the IFRAME consumes a lot of time and is blocked from downloading , it is recommended to use less    

It is said that dynamically adding URLs to the IFRAME can improve performance without testing

6 styles are placed in the header, scripts are placed before closing tags </body>

The style is placed in the header to speed up rendering, and the script can speed up the download before closing the tag </body>, blocking the download.

Microsoft Reference Articles

Front-end performance optimizations: DOM Operational Performance Tuning recommendations