Shulou(Shulou.com)06/03 Report--

This article mainly explains "vue.js is not a virtual DOM". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn whether "vue.js is a virtual DOM".

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Vue.js 2.0 introduces Virtual DOM, which is 2-4 times faster than the initial rendering speed of Vue.js 1.0 and greatly reduces memory consumption. So, what is Virtual DOM? Why do I need Virtual DOM? In what way does it improve the efficiency of page rendering? This is the problem to be discussed in this article.

The process of converting a template to a view

Before we formally introduce Virtual Dom, it is necessary to understand the whole process of converting a template to a view (as shown in the following figure):

Vue.js translates the template template into a rendering function (render) through compilation, and executes the rendering function to get a virtual node tree.

When you operate on a Model, the Watcher object in the corresponding Dep is triggered. The Watcher object calls the corresponding update to modify the view. The main purpose of this process is to compare the differences between the new and old virtual nodes, and then update the view by DOM operation according to the comparison results.

To put it simply, on the underlying implementation of Vue, Vue compiles the template into a virtual DOM rendering function. Combined with the response system of Vue, when the state changes, Vue can intelligently calculate the minimum cost of re-rendering components and apply it to the DOM operation.

Let's first explain some of the concepts in the figure above:

Render function: the render function is used to generate Virtual DOM. Vue recommends using templates to build our application interface. In the underlying implementation, Vue will compile templates into rendering functions. Of course, we can also write rendering functions without writing templates to gain better control.

VNode virtual node: it can represent a real dom node. VNode can be rendered as a dom node through the createElement method. Simply put, vnode can be understood as a node description object, which describes how to create a real DOM node.

Patch (also known as patching algorithm): the core part of a virtual DOM that renders the vnode into a real DOM. The process is to compare the differences between the new and old virtual nodes, and then find out which nodes need to be updated according to the comparison results. This we can see from the meaning of the word, patch itself has the meaning of patch, patch, its actual function is to make changes on the existing DOM to achieve the purpose of updating the view. Vue's Virtual DOM Patching algorithm is based on the implementation of Snabbdom, and has made a lot of adjustments and improvements.

What is Virtual DOM?

Virtual DOM is actually a tree based on JavaScript objects (VNode nodes). Nodes are described by object attributes, but in fact it is just an abstraction of the real DOM. Finally, the tree can be mapped to the real environment through a series of operations.

In a nutshell, Virtual DOM can be understood as a simple JS object with at least three attributes: tag, attrs, and children. The naming of these three attributes will be somewhat different in different frameworks.

For virtual DOM, let's look at a simple example, which is shown in the following figure, which describes in detail a process of the template → rendering function → virtual DOM tree → real DOM.

What is the function of Virtual DOM?

The ultimate goal of the virtual DOM is to render the virtual node to the view. But if you directly use the virtual node to overwrite the old node, there will be a lot of unnecessary DOM operations. For example, there are many li tags under a ul tag, of which only one li has changed. In this case, if you use the new ul to replace the old ul, it will result in a waste of performance because of these unnecessary DOM operations.

In order to avoid unnecessary DOM operations, the virtual DOM compares the virtual node with the old virtual node (oldVnode) used in the last rendering view in the process of mapping the virtual node to the view, and finds out the node that really needs to be updated for DOM operation, so as to avoid other DOM operations that do not need to be changed.

In fact, virtual DOM does two main things in Vue.js:

Provide the virtual node vnode corresponding to the real DOM node

Compare the virtual node vnode with the old virtual node oldVnode, and then update the view

Why do I need Virtual DOM?

Cross-platform advantage

Because Virtual DOM is based on JavaScript objects and does not depend on the real platform environment, it has cross-platform capabilities, such as browser platform, Weex, Node and so on.

The operation of DOM is slow, and the efficiency of js is high. We can put the DOM comparison operation on the JS layer to improve efficiency.

Because the execution speed of DOM operation is not as fast as that of Javascript operation, therefore, a large number of DOM operations are transported to Javascript, and patching algorithm is used to calculate the nodes that really need to be updated, so as to minimize DOM operations and significantly improve performance.

Virtual DOM is essentially a cache between JS and DOM. We can compare CPU to hard drive, since the hard drive is so slow, let's add a cache between them: since DOM is so slow, let's add a cache between their JS and DOM. CPU (JS) only operates on memory (Virtual DOM), and finally writes changes to the hard disk (DOM).

Improve rendering performance

The advantage of Virtual DOM does not lie in a single operation, but in a large number of frequent data updates, the view can be updated reasonably and efficiently.

In order to achieve efficient DOM operation, an efficient virtual DOM diff algorithm is necessary. We use the diff algorithm, the core of patch, to find out the nodes that need to be updated in this DOM, and the rest are not updated. For example, if you modify a model 100 times, from 1 to 100, then once you have Virtual DOM's cache, you will only patch the last modification to view. What is the implementation process of diff algorithm?

Diff algorithm

Vue's diff algorithm is based on the transformation of snabbdom, which only does diff among the same-level vnode, recursively carries out the diff of the same-level vnode, and finally updates the whole DOM tree. Because cross-level operations are very few and ignored, the time complexity changes from O (n3) to O (n).

The diff algorithm includes several steps:

Use the JavaScript object structure to represent the structure of the DOM tree; then use this tree to build a real DOM tree and insert it into the document

When the state changes, reconstruct a new object tree. Then compare the new tree with the old one and record the difference between the two trees.

Apply the recorded differences to the real DOM tree you built, and the view is updated

The implementation process of diff algorithm

The diff algorithm itself is very complex and difficult to implement. This paper briefly introduces the implementation process of the following two core functions:

Patch (container,vnode): when rendering for the first time, render the VDOM into a real DOM and insert it into the container.

Patch (vnode,newVnode): when rendering again, compare the new vnode with the old vnode, and then apply the differences to the real DOM tree you build.

1. Patch (container,vnode)

Through this function, VNode can be rendered into a real DOM. We can get a general idea of the process through the following simulation code:

Function createElement (vnode) {var tag = vnode.tag var attrs = vnode.attrs | | {} var children = vnode.children | | [] if (! tag) {return null} / / create a real DOM element var elem = document.createElement (tag) / / attribute var attrName for (attrName in attrs) {if (attrs.hasOwnProperty (attrName)) {/ / Add the attribute elem.setAttribute (attrName) to elem Attrs [attrName])}} / / Child element children.forEach (function (childVnode) {/ / add child elements to elem If there are any child nodes, the child nodes are generated recursively. Elem.appendChild (createElement (childVnode)) / / Recursive}) / / returns the real DOM element return elem}

2. Patch (vnode,newVnode)

Here we only consider how vnode compares to newVnode:

Function updateChildren (vnode, newVnode) {var children = vnode.children | | [] var newChildren = newVnode.children | | [] / / traversing the existing children children.forEach (function (childVnode, index) {var newChildVnode = newChildren [index] / / the same if as tag (childVnode.tag = = newChildVnode.tag) {/ / Deep comparison Recursive updateChildren (childVnode, newChildVnode)} else {/ / the two tag are different replaceNode (childVnode, newChildVnode)})} Thank you for your reading. The above is the content of "is vue.js a virtual DOM". After the study of this article, I believe you have a deeper understanding of whether vue.js is a virtual DOM. The specific use situation still needs to be verified by practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.