Principle of virtual dom: When using native js or jquery and other libraries to operate DOM, the browser will start from building the DOM tree and execute the entire process. Therefore, frequent operation of DOM will cause unnecessary calculations, resulting in page Stuttering affects user experience, and Virtual DOM can solve this problem very well.
#The operating environment of this article: Windows 7 system, Dell G3 computer.
Virtual DOM principle:
1. Why virtual DOM is needed
First introduce the browser What processes need to be experienced to load a web page; we only discuss the page parsing process and do not consider the network request process.
After the browser kernel gets the html file, it is roughly divided into the following five steps:
Parse the html elements and build the dom tree
Parse CSS and generate page css rule tree (Style Rules)
Associate dom tree and css rule tree to generate render tree
Layout (layout/reflow), the browser will determine the size and position on the screen for each node in the Render tree
Draw the Render tree , draw the pixel information of the page to the screen. This process is called paint
When you use libraries such as native js or jquery to operate the DOM, the browser will start by building the DOM tree The entire process is executed once, so frequent operations on the DOM will cause unnecessary calculations, cause the page to freeze, and affect the user experience. Virtual DOM can solve this problem very well. It uses JavaScript objects to represent virtual nodes (VNode), calculates the minimum changes required to the real DOM based on the VNode, and then operates the real DOM nodes to improve rendering efficiency.
2. Virtual DOM
Virtual DOM uses javascript objects to represent VNode. The structure of VNode is as follows:
Virtual node (vNode) structure
The following is the algorithm flow chart of virtual DOM:
React Diff algorithm
The efficient diff algorithm can ensure minimal changes to the actual DOM. However, the standard Diff algorithm requires O(n^3) complexity, which obviously cannot meet the performance requirements. To achieve the goal of refreshing the interface as a whole every time, the algorithm must be optimized. React makes two simple assumptions based on the characteristics of the web interface, which directly reduces the complexity of the Diff algorithm to O(n).
1. Two identical components produce similar DOM structures, and different components produce different DOM structures;
2. For a group of child nodes at the same level, they can pass a unique id Make a distinction.
Algorithmic optimization is the basis of React’s entire interface rendering, ensuring the performance of the overall interface rendering.
Comparison of different node types
In order to compare between trees, we must first be able to compare two nodes, in React, compare two virtual DOM nodes , how to handle when two nodes are different. This is divided into two situations: (1) Node types are different, (2) Node types are the same, but attributes are different.
Node types are different: delete the original node directly and insert a new node.
React’s DOM Diff algorithm actually only compares trees layer by layer. Two trees will only compare nodes at the same level as described below.
#React will only compare DOM nodes within the same color box, that is, all child nodes under the same parent node. When it is found that a node no longer exists, the node and its sub-nodes will be completely deleted and will not be used for further comparisons. In this way, only one traversal of the tree is needed to complete the comparison of the entire DOM tree.
Comparison of nodes of the same type
React will reset the properties to achieve node conversion.
Related free learning recommendations: js video tutorial, jquery video tutorial
The above is the detailed content of What is the principle of virtual dom. For more information, please follow other related articles on the PHP Chinese website!