1. What is virtual DOM
The virtual DOM is an abstraction of the real DOM. The virtual DOM tree is imitated based on the real DOM tree. Both are the same tree data structure with the same nodes.
An application page is generally a basic skeleton composed of nested combinations of multiple element nodes. Changes in one of the nodes may cause chain reactions. There will be an obvious sense of stuttering. Therefore, the use of virtual DOM can reduce the number of DOM operations and improve the fluency of using the page.
2. Browser rendering process
Before understanding the virtual DOM, we need to understand the mechanism and process of the browser rendering the page. The premise of browser rendering is that the browser generates a network request during the functional interaction with the user, and then sends a request to the server for the required resources. After completing this step, the resource is rendered to the specified location.
1) HTML parsing, to build a DOM tree after parsing the HTML element nodes;
2) CSS parsing, to parse the CSS style and element inline style in the data to build an element style sheet;
3) DOM tree and CSSOM tree together, according to the node Combined with the construction of the rendering tree, each node has a mounting method;
4) After the rendering tree is built, the browser starts to call layout to confirm that the rendering tree appears at the specified position on the page;
5) After the coordinates of the rendering tree nodes are confirmed, the browser calls The node paint method draws a one-to-one correspondence between the style sheet and the coordinates and displays them on the page. The rendering process is shown in the figure below.
The browser's reflow and redraw operations will change the already rendered content, which will bring more workload and performance loss to the browser engine. Therefore, as long as the frequent operations on the DOM are reduced, it can be realized. Performance optimization of web applications. You can use JavaScript to simulate all nodes in the entire application page. After the page changes, JavaScript simulates the difference before and after the page change, and then renders the page. This is the virtual DOM to be introduced in this article.
3. Virtual DOM implementation process
1) When the page is loaded for the first time, according to the real DOM structure, use JS to imitate and build a virtual DOM tree, and render the application page based on this.
2) After the page element changes, compare the real and virtual DOM according to the new changes to get the difference. To quickly compare the differences requires a DIFF algorithm. Generally speaking, the amount of calculation required to completely compare the two DOM trees is very large. For general front-end pages, as long as the nodes at the same level are compared with each other That's it.
3) Record the difference object in process 2), and then apply it to the real DOM, and the browser will re-render the page to refresh the page.
Four. Summary
When the page needs to be re-rendered frequently, the virtual DOM technology can efficiently locate the difference nodes and complete the rendering. However, the rendering speed when the page is updated infrequently is similar to the speed of directly manipulating the DOM, and even the speed of the page with very small node changes is not as good as directly manipulating the DOM. Therefore, in the daily development work, different development projects should choose the appropriate operation technology development according to the corresponding demand type.