What is virtual DOM? What are its advantages and disadvantages?

Virtual DOM is essentially a js object, which is an abstract description of the real DOM in the browser. Vue2's Virtual DOM draws on the implementation of the open source library snabbdom.

As follows:

<div class="warp" ><span>我是子元素</span></div>

const Vnode={
  tag:'div',
  props:{
       class:"warp"
       }
  children:[
      {
        tag:'span',
        props:{}
        children:['我是子元素']
   ]
}

 The h function and render function in Vue are to create Vnode with createElement(tag,propos,childern). The jsx template returned by the render function in React is actually the syntax sugar of React.createElement, and its internal filtering properties are passed to ReactElement. Create Vnode. Finally, the Vnode is rendered into the page.

Why are Vue\React using Vnode??

To understand why virtual dom is so "popular", you have to understand the problem it wants to solve.

The cost of operating DOM in the browser is very expensive. Every change of DOM may cause the current node and its related nodes to be redrawn and rearranged. Then what is redrawing and rearranging? When the style attributes or geometric attributes of the DOM in the page change, part of the rendering tree or even the entire rendering tree will be reanalyzed, calculated and combined into a render tree for rendering. Frequent operations on the DOM will cause the page to frequently resize. Range rendering, this process is very performance consuming.

To solve this problem, Vnode becomes a good solution.

When the page is rendered for the first time, a Vnode is generated based on the DOM, and then a new Vnode is generated after the data is changed. Combined with the Diff algorithm, the DOM batch differential updates are realized to avoid unnecessary updates and reduce frequent and substantial page reloads. Row redrawing to ensure the lowest performance limit.

Vnode advantages and disadvantages

advantage

• Guaranteed performance, remember what I am talking about here is "guarantee", not improvement, because using virtual dom for the first time renders an extra layer of virtual dom calculations. If the dom structure The calculation process is complex and time-consuming. If a large amount of data is modified, the performance of Vnode cannot be significantly improved. It can only be said that it has a good performance lower limit optimization. His value lies elsewhere [cross-platform, no need to manually operate Dom, and improved development efficiency]
• Reduce manual operation of DOM and improve development efficiency: We no longer need to manually operate DOM, we only need to write the code logic of View-Model, and the framework will be based on the virtual DOM and Two-way data binding helps us update views in a predictable way, greatly improving our development efficiency;
• A cross-platform solution with good compatibility: Virtual DOM is essentially a JavaScript object. Vnode can be run wherever js can be run, and DOM is strongly related to the platform. , in contrast, virtual DOM can perform more convenient cross-platform operations, such as server rendering, weex development, etc.

shortcoming

• When rendering a large amount of DOM at once, it will be slower than innerHTML insertion due to the extra layer of virtual DOM calculation.