What is Virtual Dom

introduction

You may have heard that Vue.js 2.0 has been released and some new features have been added to it. One such feature is the "Virtual DOM".

First, review the DOM (Document Object Model), which renders an HTML document as a tree structure (node tree) with elements, attributes, and text.

So here comes the question!

1. Updating the DOM is a very expensive operation (changing node text is very resource-intensive and very expensive)

When we use Javascript to modify our page, the browser already does some work to find the DOM node to change, for example:

document.getElementById('myId').appendChild(myNewNode);

In an application, there will be thousands of DOM nodes. So the computation generated when updating is very expensive. Trivial and frequent updates make pages slow, and it's unavoidable.

2. We can replace DOM nodes with JavaScript objects

A DOM node usually looks like this in an HTML document:

<ul id='myId'> <li>Item 1</li> <li>Item 2</li> <ul>

A DOM node can also be represented as a JavaScript object, like this:

//用Javascript代码表示DOM节点的伪代码
Let domNode = {
 tag: 'ul'  attributes: { id: 'myId' }  children: [ //这里是 li ] };

This is the virtual DOM node.

Understanding: Virtual DOM is to construct an object similar to DOM in JS memory; (operation is very fast in memory)

3. Updating virtual nodes is not expensive

//更新虚拟DOM的代码
domNode.children.push('<ul>Item 3</ul>');

If we use a virtual DOM, instead of calling methods like .getElementById directly, which only manipulates JavaScript objects, it's pretty cheap.

Then, update the changed part to the real DOM as follows:

//这个方法是调用DOM API来更改真正DOM的
//它会分批执行从而获取更高的效率 sync(originalDomNode, domNode);

Is Vue.js the right choice to introduce virtual DOM in version 2.0?

Introducing a virtual DOM actually has advantages and disadvantages.

More features in size
means more code. Fortunately Vue.js 2.0 is still fairly small (21.4kb current version).
An in- memory
virtual DOM requires maintaining a copy of the DOM in memory. Balance between DOM update speed and use of memory space.
Not suitable for all situations
This is suitable if the virtual DOM changes a lot. But with a single, frequent update, the virtual DOM will spend more time processing the calculations.
So, if you have a page with relatively few DOM nodes, with virtual DOM, it might actually be slower.
But for most single page applications this should be faster.

What's more than a performance boost

Introducing the virtual DOM is not just a performance enhancement, it also means more functionality.

For example, you can create new nodes directly in the render() method in the virtual DOM:

new Vue({
 el: '#app',  data: {  message: 'hello world' }, render() { var node = this.$createElement; return node( 'div', { attrs: { id: 'myId' } }, this.message ); } });

output:

<div id='app'> <div id='myId'>hello world</div> </div>

Why did you do this? You can program in the full programming language JavaScript, and you can create factory-like functions to build virtual nodes.

Original link: https://www.cnblogs.com/lvyongbo/p/5931636.html