Basic principles of JavaScript DOM operation

This article introduces the relevant knowledge of "the basic principles of JavaScript DOM operation". Many people will encounter such a dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Basic principles of JavaScript DOM operation

In Web development, a very important role of JavaScript is to operate on DOM. As we all know, the efficiency of JavaScript DOM operation is very low, and it is not generally slow, and this is one of the common problems that cause performance problems. Why is it slow? Because the changes to DOM affect the user interface of the web page, redrawing the page is an expensive operation. Too many JavaScript DOM operations will lead to a series of redrawing operations, and in order to ensure the accuracy of the execution results, all changes are performed synchronously in sequence. We call this process reflow, and it is one of the most expensive browser operations. Reflow operations mainly occur in several situations:

◆ when adding or deleting a DOM node.

When ◆ dynamically sets a style (such as element.style.width= "10px").

◆ when getting a size value that must be calculated, such as accessing offsetWidth, clientHeight, or other CSS values that need to be calculated (in DOM-compatible browsers, it can be obtained through the getComputedStyle function; in IE, it can be obtained through the currentStyle property).

The key to solving the problem is to limit the number of reflows caused by the JavaScript DOM operation. Most browsers do not update DOM during the execution of JavaScript. Accordingly, these browsers put their operations on DOM into a queue and execute them sequentially after the JavaScript script has been executed. That is, during JavaScript execution, the user cannot interact with the browser until a reflow operation is performed. (the runaway script dialog triggers a reflux operation because it performs an operation that aborts JavaScript execution, and the user interface is updated.)

There are two basic ways to reduce backflow operations due to DOM modifications. * is to do as much preparation as possible before operating on the current DOM. A classic example is to add many DOM nodes to a document object:

For (vari=0;i