On the virtual DOM

A. True DOM and its resolution process

Browser rendering engine work processes are similar, divided into five steps, create a DOM tree - Create StyleRules-- create Render tree - Drawing Painting layout Layout--

    The first step, with HTML parser, parses the HTML elements, to build a DOM tree (tree construction and labeled).

    The second step, using CSS analyzer to analyze the inline style on the element and CSS files to generate the page style sheet.

    The third step will DOM tree and the style sheet, associate Render build a tree (a process also known as Attachment). Each node has a DOM attach method, receiving style information , returns a render target (aka renderer). These render objects will eventually be built into a Render tree.

    The fourth step, with the Render Tree, browsers began to layout, to determine the precise coordinates of one appears on the display as each node Render tree.

    The fifth step, Render tree node and has a display coordinates, call each node paint method to draw them out.

II. Browser DOM What operating real drawbacks

 

     That is when the virgin js jq or true DOM to manipulate time, the browser will start the process from start to finish execution again build a DOM tree. When the update if there are 10, it will execute from start to finish 10 times.

For example , the first complete calculation, followed by a DOM next update request, the node coordinate values had changed, the previous evaluation time is wasted effort. Calculating coordinate values are all DOM node performance wasted. Even if the computer hardware has been an iterative update, manipulate the DOM price is still expensive, frequent operation or page will appear Caton, affecting the user experience.

Third, why you need a virtual DOM, what good is it?

        Web interface provided by the DOM tree (a tree data structure means) is constructed, when the part changes, in fact, correspond to a DOM node changes,

        Virtual DOM is to solve the problem browser performance is designed. As before , if there is one operation to update the DOM action 10 times, will not immediately operate virtual DOM DOM, but these 10 diff content update saved to a local JS object, the object will eventually be a one-time attch to the JS DOM tree, and then subsequent operations, thus avoiding the unnecessary computation. Therefore, the benefits of simulation objects with JS DOM node that can update the page to reflect on all JS objects (virtual DOM), the operation speed of JS objects in memory obviously faster, and so the update is complete, and then the final JS object mapping to real DOM, handed over to the browser to draw.

IV. Virtual DOM in the end is what?

 

        In fact, plainly, it is the real structure of mapped virtual DOM DOM, is a collection of data

// For this Html files
<div>
    <p>
        <span>
            Hello, the world!
        </span>
        <span>
            Hello, the code!
        </span>
    </p>
</div>

// its corresponding virtual DOM is 
the let nodesData = {
    tag: 'div' ,
    children: [
      {
        tag: 'p' ,
        children: [
          {
            tag: 'span',
            children: [
              {
                tag: '#text' ,
                text: 'Hello, the world!'
              }
            ]
          }
        ]
      },
      {
        tag: 'span',
          children: [
            {
              tag: '#text' ,
              text: 'Hello, the code!'
            }
          ]
      }
    ]
  }
 //   or such an approach 
 the let vnodes = V ( 'div' , [
      v('p', [
        v('span', [ v('#text', 'Hello, the world!') ] )
        ]
      ),
      v('span', [
        v('#text',  'Hello, the code!')
        ])
    ]
  )

  By this conversion, we will be able to operate in real DOM into operation on the js data set (virtual DOM), and then map it to the real DOM, rendering partial modification of the browser.

Five .diff algorithm

         We have completed the creation of virtual DOM and map it into a real DOM, so that all updates can be reacted first to a virtual DOM, how to react? We need to use Diff algorithm .

        If the comparison of two trees full time complexity is O (n ^ 3), but described with reference to a book "in layman's language and React Redux", the time complexity of the algorithm React Diff is O (n). To achieve such a low time complexity, it means that the node can only compare two trees to leveling, to give up the depth of traversal. In doing so, seem to sacrifice some accuracy for speed, but taking into account the reality of the front page usually does not move cross-layer DOM element, this is the best.

        Depth-first traversal, record the differences

        。。。。

        Diff operation

        In the actual code, the old and new trees will be a deep traversal, each node will have a marker. Traversing each node to put a new tree and the node comparison, if the difference is recorded into an object.

They have two virtual DOM (js objects, new / old compare diff), user interaction data changes we operate new virtual DOM, old virtual DOM is mapped to the actual DOM ( JS objects generated DOM document) by DOM fragment operation to browser rendering. When the new virtual modify the DOM, and will newDOM oldDOM diff comparison algorithm, the results obtained diff data table (represented by four kinds of conversion conditions). Then diff the results table by DOM  the fragment update to the browser DOM in.

Virtual DOM of the meaning of existence? The true meaning of vdom is to achieve cross-platform, server-side rendering, as well as providing a fairly good performance Dom update policy. vdom flexible framework for the whole mvvm up

Diff comparison algorithm only to a virtual DOM higher replacement efficiency by diff Diff algorithm Algorithm Results Table (operation record table which is required). DOM is supposed to operate in vue still here to operate, but uses js the DOM  the fragment to operate dom (after all the changes Unified Computing Unified updated DOM) carried out the browser DOM-time update. In fact, DOM  fragment we do not usually open hair can also be used, but this business programmers to write code using the DOM fragment into operation, the value of which is the framework, programmers can focus on writing business code .