This is the first day of my participation in the August Text Challenge.More challenges in August
Before we get to know the virtual DOM, we should first familiarize ourselves with the browser’s process of parsing the real DOM. In general, there are the following steps:
Build DOM tree – Build CSSOM tree – DOM tree and CSSOM tree combined to generate render tree – layout – rendering
1. Use HTML analyzer to analyze HTML elements and build a DOM tree
2. Use CSS analyzer to analyze inline styles on CSS files and elements and generate a style sheet for the page
3. Associate the DOM tree with the stylesheet to build a Render tree
4. With the Render tree, the browser starts to lay out the exact coordinates for each node in the Render tree to appear on the display
5. With the Render tree and node display coordinates in place, call the paint method for each node to Render them
Extension:
Rearrangement:
Changing the position or size of a DOM element causes the browser to regenerate the render tree, a process called rearrangement
Redraw:
When the render tree is regenerated, each node of the render tree is drawn to the screen, a process called redrawing. Not all actions cause rearrangement, such as changing font colors, only redrawing. Remember, rearranging leads to redrawing, redrawing does not lead to rearranging
What actions will cause the rearrangement?
· Add or remove visible DOM elements
· Element position changes
· Element size changes
· Content changes
· Browser window size changes
What would cause a redraw?
Change the visibility, outline, background color, text color and other properties
As you can see from the above procedure, js manipulating the real DOM is a bit more cumbersome, and the browser manipulating the real DOM is done immediately. The change of each DOM node is accompanied by each calculation, resulting in a waste of performance. Frequent operations will also lead to page lag, affecting user experience.
To save browser performance, the virtual DOM was created:
Principle of virtual DOM:
1. Simulate the DOM tree with JavaScript and render the DOM tree
2. Compare the old and new DOM trees to get the comparison difference object
3. Apply the difference object to the rendered DOM tree
Virtual DOM definition:
The virtual DOM is a tree based on javascript objects. It describes nodes with the attributes of the object, and the object contains at least three attributes: tag, attrs and children. Eventually, the tree can be mapped to the real world through a series of operations.
What the virtual DOM does:
The virtual DOM does two things in vue.js:
Virtual nodes corresponding to real DOM nodes are provided
Compare the virtual node VNode with the old virtual node oldVnode and update the view
The diff algorithm:
It is an algorithm that compares the old and new virtual DOM trees, obtains the difference between them, and determines the minimal DOM update operation.
Features: When using the DIff algorithm to compare the old and new nodes, the comparison will only be carried out at the same level, not across levels
Process:
Description: When data changes in Vue, the set method calls dep. notify to notify all subscribers Watcher, and the subscribers call Patch to patch the real DOM.
Extension:
Function of key value in VUE: It is mainly used in virtual DOM algorithm of VUE to identify VNodes when comparing old and new nodes. If keys are not used, Vue uses an algorithm that minimizes dynamic elements and tries to modify/reuse the same type of elements in place whenever possible. With a key, it rearranges the elements based on the change in the key and removes elements where the key does not exist