Interviewer: Tell me about your understanding of the virtual DOM
What is the virtual DOM?
The virtual DOM is essentially a JS object that describes the structure of a page. In VUE, each component corresponds to a virtual DOM tree. There is one for each componentrenderFunction, eachrenderAll functions return a virtual DOM tree.
2. Why use the virtual DOM?
Before addressing this issue, let’s look at the performance cost of creating real DOM and JS objects
The code is as follows:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
</head>
<body>
<script>
console.log('Time to create 10000 JS objects versus 10000 real DOM objects')
const t = 10000;
console.time('JS Object')
for (let i = 0; i < t; i++) {
var o = {};
}
console.timeEnd('JS Object')
console.time('DOM Object')
for (let j = 0; j < t; j++) {
var div = document.createElement('div')}console.timeEnd('DOM Object')
</script>
</body>
</html>
Copy the codeConsole print result:
As you can see, creating real DOM objects directly is a very performance-damaging operation, and the more you create them, the greater the difference. Real DOM updates, inserts, and so on are also very performance-intensive. Therefore, in VUE, each time a component is created or updated, the corresponding virtual DOM tree is generated through the render function, so as to replace the real DOM and improve rendering efficiency.
3. How to convert the virtual DOM into the real DOM?
As you can see, the virtual DOM in vUE still has to be converted to the real DOM. Doesn’t that affect rendering efficiency? Yes, and rendering a view for the first time in vUE takes up a bit more performance than using the real DOM directly, but that’s understandable, since subsequent view updates, inserts, and so on can greatly improve rendering efficiency.
Each time a component instance is rendered for the first time, it calls its render function to generate a corresponding virtual DOM tree, and then creates a real DOM tree from that virtual DOM tree and mounts it to the appropriate place on the page, one for each virtual DOM. In addition, when the responsive data that this component depends on changes, the render function will still be called to generate a new virtual DOM tree, compare the new tree with the old tree, find the minimum changes of two DOM trees, and then update the corresponding virtual DOM. Finally, modify the corresponding real DOM through the updated virtual DOM. This ensures minimal changes to the real DOM.
Template (4.template) and the virtual DOM
Vue has a compile module that converts the template to the Render function and then generates a virtual DOM tree by calling the render function. Compilation: convert template strings to AST and then AST to render functions.
If you use the traditional external file import method, template compilation is sent when the component is first loaded, which is called runtime compilation. If it is done under the default configuration of VUE – CLI (runtimeCompiler:false), template compilation occurs at package time, which is called template precompilation
Compilation is also a performance-consuming process. Precompilation can effectively improve runtime performance. In addition, template precompilation does not need to be compiled again during runtime.
Templates exist only to facilitate code writing, and when Vue finally runs, it calls the Render function to get a virtual DOM tree, not a template.