Fully understand virtual DOM and implement virtual DOM

The most popular technology in the last two years is Reactjs, even if you have not used it, reactjs by the industry's top Internet company Facebook, which has many advanced design ideas, such as page UI components, virtual DOM, and so on. This article will take you through the mystery of the virtual DOM, not only to understand its rationale, but also to implement a basic virtual DOM that is available. 1. Why virtual DOM is required

Dom is very slow, its elements are very large, page performance problems are rarely caused by JS, most of which are caused by Dom operation. If the front-end work is abstracted, the main thing is to maintain the state and update the view, while the update view and maintenance state require DOM operations. In fact, the main development direction of the front-end framework in recent years is the complexity of liberating DOM operation.

Before the advent of jquery, we operated directly on the DOM structure, which was highly complex and poorly compatible; with jquery's powerful selector and highly encapsulated API, we can operate dom,jquery to help us deal with compatibility issues while also making DOM operations simple But smart programmers cannot be satisfied with this, and various MVVM frameworks come into being, with Angularjs, Avalon, Vue.js, MVVM uses data two-way binding, so that we do not need to manipulate the DOM, update the state view will automatically update, update the view data state will automatically update, it can be said that MMVM makes the front-end development efficiency greatly improved, but its large number of event binding makes its execution performance in complex scenarios worrying; Development efficiency and execution efficiency of the program. Reactjs is a good solution, although it is controversial to mix the JS code with the HTML code, but the virtual DOM introduced by us is unanimously agreed. 2. Understanding Virtual Dom

The core idea of the virtual DOM is that it provides a handy tool for the complex document DOM structure and minimizes DOM manipulation. This sentence, perhaps too abstract, but basic overview of the virtual DOM design ideas

(1) Provide a convenient tool, so that the development efficiency is guaranteed
(2) To ensure minimal DOM operation, so that execution efficiency is guaranteed

(1). Use JS to represent the DOM structure

The DOM is slow, and JavaScript is fast, and JavaScript objects make it easy to represent DOM nodes. DOM nodes include tags, attributes, and child nodes, which are represented by velement.

Virtual DOM, parameters are signature, attribute object, sub-dom list
var velement = function (tagName, props, children) {
    //guaranteed to be called only by the following means: New velement
    if (! ( This instanceof velement) {
        return new velement (tagName, props, children);
    }

    You can pass only the tagname and children parameters
    if (Util.isarray (props)) {
        children = props;
        props = {};
    }

    Set the related properties of the virtual dom
    this.tagname = tagName;
    This.props = Props | | {};
    This.children = Children | | [];
    This.key = props? Props.key:void 666;
    var count = 0;
    Util.each (This.children, function (child, i) {
        if (child instanceof velement) {
            count + = Child.count;
        } else {
            Children[i] = "+ Child;
        }
        count++;
    });
    This.count = count;
}

With Velement, we can simply use JavaScript to represent the DOM structure. Like what

var vdom = velement (' div ', {' id ': ' Container '}, [
    velement (' H1 ', {style: ' color:red '}, [' Simple virtual dom ']), 
  velement (' P ', [' Hello World ']),
    velement (' ul ', [velement (' Li ', [' Item #1 ']), velement (' Li ', [' Item #2 ']),
]);

The above JavaScript code can represent the following DOM structure:

<div id= "Container" >
    
 
Similarly, we can easily build a real DOM tree based on a virtual DOM tree. Specific idea: The real DOM tree is constructed recursively based on the attributes and child nodes of the virtual DOM node. See the following code:

VElement.prototype.render = function () {
    //create tag
    var el = document.createelement (this.tagname);
    Set the properties of the label
    var props = this.props;
    for (var propname in props) {
        var propvalue = props[propname]
        util.setattr (el, propname, PropValue);
    }

    Create a child node in turn label
    Util.each (This.children, function (children) {
        //) If the child node is still velement, the child node is created recursively, or the text type node
        is created directly var Childel = (Child instanceof velement)? Child.render (): document.createTextNode (child);
        El.appendchild (Childel);
    });

    Return el;
}
 
Velement a virtual DOM object, invoking its prototype's Render method, can produce a real dom tree.

Vdom.render ();
 
Since we can use the JS object to represent the DOM structure, then when the data state changes and the DOM structure needs to be changed, we first calculate the minimum change of the actual DOM by the virtual DOM represented by the JS object, and then manipulate the actual DOM, thus avoiding the performance problems caused by extensive DOM operation. (2). Compare the differences between two virtual dom trees

After using the JS object to represent the DOM structure, when the page state changes and the DOM needs to be manipulated, we can first calculate the minimum amount of modification to the real DOM through the virtual DOM, and then modify the real DOM structure (because the real DOM is too expensive to operate).

As shown in the following figure, the difference between the two virtual Dom has been marked red: