Two methods to accelerate Javascript DOM operation optimization (1)

Are you familiar with the methods for accelerating Javascript DOM operation optimization? When developing Internet rich application RIA, we often write some javascript scripts to modify or add page elements, these tasks are ultimately completed by DOM, or the Document Object Model, and our implementation will affect the application response speed.

Accelerate Javascript DOM Operation Optimization

When developing Internet rich applications (RIA), we often write javascript scripts to modify or add page elements. These tasks are completed by DOM or Document Object Model, our implementation will affect the application response speed.

Javascript DOM operations can cause reflow in the browser. This is a computation process in the browser that determines how page elements are displayed. Modifying the DOM directly, modifying the CSS style of the element, and modifying the window size of the browser will trigger re-resolution. Reading the layout attributes of an element, such as offsetHeithe or offsetWidth, triggers re-resolution. Re-resolution takes computing time. Therefore, the less trigger of re-resolution, the faster the application will be.

Javascript DOM operations usually involve modifying elements on an existing page or creating new page elements. The following two optimization schemes cover modifying and creating DOM nodes, helping you reduce the number of times that browser reresolution is triggered.

Solution 1: Modify the DOM by switching the CSS Class Name

This solution allows us to modify multiple style attributes of one element and its child elements at a time and trigger re-resolution only once.

Requirements:

Emu Note: when the original author writes this article, his mind is obviously short-circuited, and the problems to be solved in the Out-of-the-flowDOMManipulation mode are put here, however, it is easy to understand the problems that the author really wants to describe from the Demo code, so emu will not translate the original text)

Now we need to write a function to modify several style rules of a hyperlink. It is easy to implement. Just change the attributes corresponding to these rules one by one. However, each modification to a style attribute causes a page re-resolution.

 
 

  
  
functionselectAnchor(element){  
  
  
element.style.fontWeight='bold';  
  
  
element.style.textDecoration='none';  
  
  
element.style.color='#000';  
  
  
} 
 
 

Solution:

To solve this problem, we can first create a style name and place all the style rules to be modified on this class name. Then we add this new class name to the hyperlink, you can add several style rules and trigger re-resolution only once. This mode also achieves separation of performance and logic.

 
 

  
  
.selectedAnchor{  
  
  
font-weight:bold;  
  
  
text-decoration:none;  
  
  
color:#000;  
  
  
}  
  
  
 
  
  
functionselectAnchor(element){  
  
  
element.className='selectedAnchor';  
  
  
}  
  
  
 
 
 

This article introduces solution 1 for accelerating Javascript DOM operation optimization. Let's take a look at solution 2 below.