I. Virtual DOM

1. The virtual DOM is a concept corresponding to the real DOM

What is the virtual DOM, an object that represents a DOM tree, usually with tag names, tag attributes, event listeners, child elements, and other attributes

2. Virtual DOM is faster than DOM:

  • DOM operations are slow compared to JS native apis, such as group operations
  • No DOM-based library (like Vue and React) can manipulate the DOM faster than the DOM

3. Why virtual DOM is faster than DOM (or the advantages of virtual DOM)

A. DOM operations can be reduced

  • The virtual DOM can combine multiple operations into one operation, such as adding 1,000 div nodes, literally one after the other
  • The virtual DOM uses DOM diff to eliminate unnecessary operations, such as adding 1,000 div nodes when only 10 of them are new

B. cross-platform

  • The virtual DOM can become not only a DOM, but also applets, IOS apps, Android apps, because the virtual DOM is essentially just a JS object

4. Code Examples:

  • Virtual DOM (React)

This object represents a virtual DOM that is labeled div, has two span child elements, a red className, and calls a function on the click event

const vNode = { key:null, props:{ children:[ {type:'span',...}, {type:'span',...}, ], The className: "red" / / label attribute onClick () = > {}} / / events, ref: null, type: "div", / / tag name or component name... }Copy the code
  • Virtual DOM (VUE) code:

This object represents a virtual DOM labeled div, with child elements of two spans, data class of red, and click event on to invoke a click function

Const vNode = {tag:"div", // tag or component name data:{class:"red", () = > {}}} / / event, children: [/ / the child elements are {type: "span",...}, {type: "span",...},],... }Copy the code

5. How to create a virtual DOM

(1) React

React.createElement

createElement('div',{className:'red',onclick:()=> {}},[
        createElement('span',{},'span1'),
        createElement('span',{},'span2')
    ]
)
Copy the code

React simplifies the code to createElement form via Babel:

    <div className = "red" onClick={fn}>
        <span>span1</span>
        <span>span2</span>
    </div>
Copy the code

Vue can only get h in the render function

h('div',{
    class:'red',
    on:{
        click:()=>{}
    },
  },[h('span',{},'span1'),h('span',{},'span2'])
)
Copy the code

Simplified code, Vue Template, converted to H form by VUe-loader

    <div class="red" @click = "fn">
        <span>span1</span>
        <span>span2</span>
    </div>
Copy the code

5. Disadvantages of virtual DOM:

Additional creation functions, such as createElement or h, are required, but can be simplified to XML using JSX

The disadvantage of the simplified method is that it relies heavily on packaging tools, otherwise JS will not recognize it

Who is slower, real DOM or virtual DOM

1. The virtual DOM is fast when the scale is small, while the virtual DOM is slow when the scale is large. The native DOM, or real DOM, can ensure stability

2. When the size is only thousands or less, the virtual DOM can optimize some operations well

DOM Diff (Comparison Algorithm of Virtual DOM)

What is DOM Diff

Patch patches = patch(oldVNode,newVNode) patches = Patch (oldVNode,newVNode) patches

[{type: 'INSERT' vNode:...}, {type: 'TEXT' vNode:...}, {type: 'PROPS' propsPatch: [...]},]Copy the code

The probable logic of DOM Diff

If the node is a Component, look at the Component diff. If the node is a tag, look at the Element diff. - Component diff. If it's the same type, just update the attributes. Then go into the component and do Tree Diff. -Element diff. Same, just update the attributes and then go into the tag descendant and do Tree diffCopy the code