What is the Virtual DOM?

Virtual DOM, is a common Js object to describe the DOM object.

There are so many real DOM members that creating a DOM can be expensive.

The virtual DOM has fewer members, which is a common JS object. It describes the selector through sel attribute, text describes the text in the tag, and children describes the child nodes in the tag. So the cost of creating a virtual DOM is less than the cost of creating a real DOM.

Why use the Virtual DOM?

Early front-end development required manual DOM manipulation and browser compatibility issues. The JQ library simplified DOM manipulation, but as front-end projects became more complex, DOM manipulation became more complex. You manipulate both data and DOM elements.

Later, in order to solve the PROBLEM of DOM manipulation, the MVVM framework emerged to solve the problem of view and state synchronization. Automatically updates the view when the data changes, automatically updates the data when the view changes.

The advent of template engines can simplify view operations, but they can’t track state, so you just delete all DOM elements each time and then recreate the DOM.

The virtual DOM will create a virtual DOM tree. Diff algorithm will be used to compare the old and new virtual DOM trees to obtain the differences between the new and old virtual DOM trees. Only the part that needs to be updated will be updated.

The role of Virtual DOM

Maintaining the view-state relationship, or preserving the state of the view, does not improve performance when the view is simple or rendered for the first time, but only when the view is complex. Because you don’t render immutable elements.

One of the biggest benefits is cross-platform rendering of the DOM in the browser, server-side rendering (virtual DOM converted into normal HTML strings), native applications, applets, and so on.

Snabbdom source

How do you learn the source code? The first step is to have a macro understanding of the source code, understand the core process of the library, look at the source code with the goal in mind, set the goal small, look at the source code process around the core goal, do not be distracted by other branches. First, the main line of logic is passed through, and the branches involved are temporarily skipped.

The core of snabbdom

  1. Init () sets the module and creates the patch() function. Init is a higher-order function that returns a function by passing in different arguments.
  2. Use the h() function to create a JS object that describes the real DOM
  3. The patch function compares the old and new VNodes
  4. Update the changed content to the real DOM tree.

If the first parameter of patch function is a real DOM, the real DOM will be converted into a virtual DOM for comparison.

H function

Function: Create a VNode object

The h function is overloaded, but it just does different things by determining the number of arguments and the type of arguments.

Overloading is handled first inside the h function.

If children is a string or a number, the vNode object containing only text will be returned. Finally, the result of vNode function execution will be returned.

Vnode function

Function: called by h, returns the vnode object ****

return{ sel, data, children, text, elm, key };

The patch function

  • Parameters: old vnode, new vnode

  • Render the changed content of the new node into the real DOM, and finally return the new node as the old node for the next processing

  • To check whether the old and new VNodes are the same, ensure that the key and SEL are the same

  • If it is not the same node, delete the previous content and re-render

  • If the node is the same, check whether the new vnode has text. If the text is different from the text of the old vnode, update the text content directly

  • If the new vnode has children, check whether the children of the old and new vnodes have changed

CreateElm function

Function: Convert vNodes into real DOM

1. Execute the init hook function set by the user

2. Convert vNode to a real DOM object, but do not render it to the page, just mount it to the ELM property of vNode

3. Return to the vnode. Elm