Virtual Dom

Posted on Edited on In Waline:

What is DOM?

DOM is Document Object Model, what is Document Object Model? This needs to be discussed carefully.

HTML doc ** document pages are the foundation of everything, without which dom would be impossible. **

When a page is created and loaded into the browser, the DOM is quietly born. It will convert the web page doc into a doc object, and its main function is to process web page content.

In this doc object, all elements present a hierarchical structure, which means that ** except for the top-level element html, all other elements are contained in other elements. **

If there is such a piece of HTML code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>

<head>

< title > doc title </title >

</head>

<body>

< a href = "" > My link</a>

< h1 > My title </h1 >

</body>

</html>

Then its tree should be an inverted tree like the one below.

A family tree, which itself is a model, is typically used to represent the human family lineage.

It is easy to show the relationship between family members and to express complex relationships concisely, so this model is very suitable for representing an HTML doc.

imgimg

Document Object Model is a model based on such a doc view structure. All html pages cannot escape this model. It is more accurate to call it a node tree.

What is Virtual DOM?

Let’s review again, what is a virtual DOM.

** The definition of a virtual DOM is to use a javascript object to describe a dom node through object properties. **

For example:

We now have a label that looks like this in normal writing:

1
<a href="http://xxx">链接</a>

Describing a tag through a js object looks like this:

1
{  tag: "a",  attrs: {    href: "http://xxx"  },  text: "链接",  children: []}

A real dom node is thus described by the js object.

Why do you need a virtual DOM?

We can look at the output of the a tag in the browser. Just an empty a tag has 300 + attributes. The real DOM on the browser, in addition to some basic attributes, has many attributes and methods that exist to support the characteristics of the tag itself. These attributes and methods are used at the bottom of the browser, and the real useful attributes for js may be less than 10.

Therefore, the front-end often avoids dom operations, and if it is really necessary, it hopes to minimize the number of operations. This creates a virtual DOM, using js to describe a dom node, retaining only some necessary and sufficient properties to express the node. ** Updating js objects saves a lot of time than updating dom nodes directly. **

We can use js to simulate the update of the dom node. After each dom update, we first compare the virtual dom to find out what needs to be updated, and then finally update the real dom uniformly.

Why is DOM update slow?

Updating DOM is not slow, just like updating any JavaScript object.

So what exactly makes updating the real’DOM 'slow?

Is to draw.

Drawing takes up most of the time during the layout process.

Combined with the following figure, and this文章You will understand that the real problem with updating DOM is the drawing of the screen.

img

The rendering engine responsible for displaying or rendering web pages on the browser screen parses the’HTML ‘page to create the’DOM’. It also parses’CSS ‘and applies’CSS’ to’HTML 'to create a rendering tree, a process called ’ attachment '.

So, when we do this

1
document.getElementById('elementId').innerHTML="New Value"

The following happens:

  1. The browser must parse’HTML '.
  2. It removes the child element of’elementId ’
  3. Update DOM with “New Value”
  4. Recalculate parent and child CSS
  5. Update the layout, i.e. the exact coordinates of each element on the screen
  6. Traverse the render tree and draw it on the browser display

Recalculating CSS and changing layouts use complex algorithms, which can affect performance.

Therefore, updating the real DOM does not just involve updating the DOM, but involves many other processes.

In addition, each of the above steps runs for each update of the real DOM, i.e. if we update the real DOM 10 times, each of the above steps will be repeated 10 times. This is why updating the DOM is slow.

Virtual in Vue

Definition

We open the VNode class of the vue source code file, which is used by Vue to describe the real dom node.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
export default class VNode {
  constructor (
    tag?: string,
    data?: VNodeData,
    children?: ?Array<VNode>,
    text?: string,
    elm?: Node,
    context?: Component,
    componentOptions?: VNodeComponentOptions,
    asyncFactory?: Function
  ) {
    this.tag = tag
    this.data = data
    this.children = children
    this.text = text
    this.elm = elm
    this.ns = undefined
    this.context = context
    this.fnContext = undefined
    this.fnOptions = undefined
    this.fnScopeId = undefined
    this.key = data && data.key
    this.componentOptions = componentOptions
    this.componentInstance = undefined
    this.parent = undefined
    this.raw = false
    this.isStatic = false
    this.isRootInsert = true
    this.isComment = false
    this.isCloned = false
    this.isOnce = false
    this.asyncFactory = asyncFactory
    this.asyncMeta = undefined
    this.isAsyncPlaceholder = false
  }

  get child (): Component | void {
    return this.componentInstance
  }
}

You can see that there are some commonly used attributes above: tag represents the label name, text represents the text content of the node, elm represents the real dom node corresponding to the virtual node, and so on.

Classification

Vue can describe 6 types of nodes through VNode.

  • Annotation Node
  • Text Node
  • Clone nodes
  • Element nodes
  • Component nodes
  • function component node

Diff algorithm

Those who are interested can refer to this article: https://mp.weixin.qq.com/s/V2PLADamTyE4krSNuG6leQ

Reference article:

什么是DOM

从Vue角度理解虚拟DOM

重新认识虚拟DOM