Expose the basic principles of JavaScript DOM operations

We all know that the efficiency of JavaScript DOM operations is very low and not very slow, and this is also one of the common problems that cause performance problems. Why is it slow? Since DOM modification affects the webpage user interface, page re-painting is an expensive operation.

Basic Principles of JavaScript DOM operations

In Web development, a very important role of JavaScript is to operate the DOM. We all know that the efficiency of JavaScript DOM operations is very low, and it is not generally slow, this is also one of the common problems that cause performance problems. Why is it slow? Since DOM modification affects the webpage user interface, page re-painting is an expensive operation. Too many JavaScript DOM operations will lead to a series of re-painting operations. To ensure the accuracy of the execution results, all modification operations are executed in sequence. This process is called reflux reflow), which is also one of the most expensive browser operations. Reflux operations may occur in the following situations:

◆ When you add or delete a DOM node.

◆ 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 backflow times caused by JavaScript DOM operations. Most browsers do not update the DOM during JavaScript execution. Correspondingly, these browsers put DOM operations in a queue, and once executed in order after the JavaScript script is executed. That is to say, during JavaScript execution, the user cannot interact with the browser until a backflow operation is executed. The out-of-control script dialog box triggers the backflow operation because it executes an operation to stop JavaScript Execution and updates the user interface)

There are two basic methods to reduce the reflux operation caused by DOM modification. First, make as many preparations as possible before performing operations on the current DOM. A typical example is to add many DOM nodes to the document Object:

 
 

  
  
for(vari=0;i<items.length;i++){  
  
  
varitem=document.createElement("li");  
  
  
item.appendChild(document.createTextNode("Option"+i);  
  
  
list.appendChild(item);  
  
  
} 
 
 

This code is very inefficient because it modifies the current DOM structure in each loop. To improve performance, we need to minimize this number of times. In this case, the best way is to create a document fragment) as a temporary container for those elements that have been created, the last time you add the container content to the parent node:

 
 

  
  
varfragment=document.createDocumentFragment();  
  
  
for(vari=0;i<items.length;i++){  
  
  
varitem=document.createElement("li");  
  
  
item.appendChild(document.createTextNode("Option"+i);  
  
  
fragment.appendChild(item);  
  
  
}  
  
  
list.appendChild(fragment); 
 
 

The adjusted Code only modifies the structure of the current DOM once, and is on the last line. Before that, we use document fragments to save the intermediate results. Because there is no visible content in the document fragments, such modifications do not trigger backflow. In fact, the File Fragment cannot be added to the DOM. We need to pass it as a parameter to the appendChild function. What we actually add is not the File Fragment itself, but all the child elements under it.
Another method to avoid unnecessary backflow operations is to delete the elements to be operated from the current DOM structure before performing operations on the JavaScript DOM. There are two basic methods to delete an element:

◆ Delete objects in the true sense through removeChild () or replaceChild.

◆ Set the display style of the element to "none ".

Once the modification operation is complete, the above process needs to be reversed and the deleted elements should be added to the current DOM structure again. Let's take the above example to explain:

 
 

  
  
list.style.display="none";  
  
  
for(vari=0;i<items.length;i++){  
  
  
varitem=document.createElement("li");  
  
  
item.appendChild(document.createTextNode("Option"+i);  
  
  
list.appendChild(item);  
  
  
}  
  
  
list.style.display=""; 
 
 

After setting the display style of the list to "none", the element is deleted from the current DOM structure because the node is no longer visible. Adding sub-elements to the display attribute does not trigger backflow before setting the display attribute back to the default value.

In addition, the style attribute is used to modify the appearance of an element. For example:

 
 

  
  
element.style.backgroundColor="blue";  
  
  
element.style.color="red";  
  
  
element.style.fontSize="12em";