Vue之虚拟DOM

港控/mmm° 2024-04-18 12:32 51阅读 0赞

虚拟DOM的概念是随着react的出现，以其卓越的性能被人所接受。到vue2.0也引入了虚拟DOM

## 真实DOM ##

了解虚拟dom之前，先回顾一下真实dom和它的解析流程

先看下webkit渲染引擎流程图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0NTEwNDU1_size_16_color_FFFFFF_t_70][]

所有的浏览器渲染引擎工作流程大致分为5步：创建 `DOM` 树 —> 创建 `Style Rules` -> 构建 `Render` 树 —> 布局 `Layout` -—> 绘制 `Painting`。

第一步，构建 DOM 树：用 HTML 分析器，分析 HTML 元素，构建一棵 DOM 树；

第二步，生成样式表：用 CSS 分析器，分析 CSS 文件和元素上的 inline 样式，生成页面的样式表；

第三步，构建 Render 树：将 DOM 树和样式表关联起来，构建一棵 Render 树（Attachment）。每个 DOM 节点都有 attach 方法，接受样式信息，返回一个 render 对象（又名 renderer），这些 render 对象最终会被构建成一棵 Render 树；

第四步，确定节点坐标：根据 Render 树结构，为每个 Render 树上的节点确定一个在显示屏上出现的精确坐标；

第五步，绘制页面：根据 Render 树和节点显示坐标，然后调用每个节点的 paint 方法，将它们绘制出来。

**注意点：**

**1、`DOM` 树的构建是文档加载完成开始的？** 构建 `DOM` 树是一个渐进过程，为达到更好的用户体验，渲染引擎会尽快将内容显示在屏幕上，它不必等到整个 `HTML` 文档解析完成之后才开始构建 `render` 树和布局。

**2、`Render` 树是 `DOM` 树和 `CSS` 样式表构建完毕后才开始构建的？** 这三个过程在实际进行的时候并不是完全独立的，而是会有交叉，会一边加载，一边解析，以及一边渲染。

**3、`CSS` 的解析注意点？** `CSS` 的解析是从右往左逆向解析的，嵌套标签越多，解析越慢。

**4、`JS` 操作真实 `DOM` 的代价？** 用我们传统的开发模式，原生 JS 或 `JQ` 操作 `DOM` 时，浏览器会从构建 DOM 树开始从头到尾执行一遍流程。在一次操作中，我需要更新 10 个 `DOM` 节点，浏览器收到第一个 `DOM` 请求后并不知道还有 9 次更新操作，因此会马上执行流程，最终执行10 次。例如，第一次计算完，紧接着下一个 `DOM` 更新请求，这个节点的坐标值就变了，前一次计算为无用功。计算 `DOM` 节点坐标值等都是白白浪费的性能。即使计算机硬件一直在迭代更新，操作 `DOM` 的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户体验

## 为什么需要虚拟DOM ##

对于前面的页面来说，大部分性能问题都是和dom操作有关，维护状态、更新视图等等，而直接操作dom的话，复杂、性能差、兼容性差，所以出现了各种各样的MVVM框架，数据双向绑定，不再需要主动去更新，但是要绑定大量事件。那有没有一种兼顾开发和执行效率的方案呢。这当然难不倒机智的开发人员，虚拟DOM应运而生

## 虚拟DOM ##

虚拟 `DOM` 就是为了解决浏览器性能问题而被设计出来的。

1.为开发效率提供方便

2.进行最小的dom操作，提高执行效率

**优势**：**抽象了原本的渲染过程，实现了跨平台的能力，不仅局限于浏览器的 DOM，可以是安卓和 IOS 的原生组件，小程序等等**

比如，一次操作中有 10 次更新 `DOM` 的动作，虚拟 `DOM` 不会立即操作 `DOM`，而是将这 10 次更新的 `diff` 内容保存到本地一个 `JS` 对象中，最终将这个 `JS` 对象一次性 `attch` 到 `DOM` 树上，再进行后续操作，避免大量无谓的计算量。所以，用 `JS` 对象模拟 `DOM` 节点的好处是，页面的更新可以先全部反映在 `JS` 对象(虚拟 `DOM` )上，操作内存中的 `JS` 对象的速度显然要更快，等更新完成后，再将最终的 `JS` 对象映射成真实的 `DOM`，交由浏览器去绘制

**本质就是一个JS对象，包含了 `tag`、`props`、`children` 三个属性。**

<div id="app">
      <p class="text">hello world!!!</p>
    </div>
    
    
    {
      tag: 'div',
      props: {
        id: 'app'
      },
      chidren: [
        {
          tag: 'p',
          props: {
            className: 'text'
          },
          chidren: [
            'hello world!!!'
          ]
        }
      ]
    }

可以看到DOM 是树形结构，原生 DOM 因为浏览器厂商需要实现众多的规范（各种 HTML5 属性、DOM事件），即使创建一个空的 div 也要付出昂贵的代价。虚拟 DOM 提升性能的点在于 DOM 发生变化的时候，通过 diff 算法比对 JavaScript 原生对象，计算出需要变更的 DOM，然后只对变化的 DOM 进行操作，而不是更新整个视图。

## 算法实现 ##

### 1.JS模拟dom树 ###

### 2.diff算法比较两个虚拟dom差异 ###

### 3.将对比差异应用到真实dom上 ###

## `Vue` 源码 `Virtual-DOM` 简析 ##

### 1.`VNode` 模拟 `DOM` 树 ###

在 `Vue.js` 中，`Virtual DOM` 是用 `VNode` 这个 `Class` 去描述，它定义在 `src/core/vdom/vnode.js` 中 ，从以下代码块中可以看到 `Vue.js` 中的 `Virtual DOM` 的定义较为复杂一些，因为它这里包含了很多 `Vue.js` 的特性。实际上 `Vue.js` 中 `Virtual DOM` 是借鉴了一个开源库  [snabbdom][] 的实现，然后加入了一些 `Vue.js` 的一些特性。

export default class VNode {
      tag: string | void;
      data: VNodeData | void;
      children: ?Array<VNode>;
      text: string | void;
      elm: Node | void;
      ns: string | void;
      context: Component | void; // rendered in this component's scope
      key: string | number | void;
      componentOptions: VNodeComponentOptions | void;
      componentInstance: Component | void; // component instance
      parent: VNode | void; // component placeholder node
    
      // strictly internal
      raw: boolean; // contains raw HTML? (server only)
      isStatic: boolean; // hoisted static node
      isRootInsert: boolean; // necessary for enter transition check
      isComment: boolean; // empty comment placeholder?
      isCloned: boolean; // is a cloned node?
      isOnce: boolean; // is a v-once node?
      asyncFactory: Function | void; // async component factory function
      asyncMeta: Object | void;
      isAsyncPlaceholder: boolean;
      ssrContext: Object | void;
      fnContext: Component | void; // real context vm for functional nodes
      fnOptions: ?ComponentOptions; // for SSR caching
      devtoolsMeta: ?Object; // used to store functional render context for devtools
      fnScopeId: ?string; // functional scope id support
    
      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
      }
    }

这里千万不要因为 `VNode` 的这么属性而被吓到，或者咬紧牙去摸清楚每个属性的意义，其实，我们主要了解其几个核心的关键属性就差不多了，例如：

*  `tag` 属性即这个`vnode`的标签属性
 *  `data` 属性包含了最后渲染成真实`dom`节点后，节点上的`class`，`attribute`，`style`以及绑定的事件
 *  `children` 属性是`vnode`的子节点
 *  `text` 属性是文本属性
 *  `elm` 属性为这个`vnode`对应的真实`dom`节点
 *  `key` 属性是`vnode`的标记，在`diff`过程中可以提高`diff`的效率

### **2.源码创建 `VNode` 过程** ###

1.  初始化vue
    
    我们在实例化一个 `vue` 实例，也即 `new Vue( )` 时，实际上是执行 `src/core/instance/index.js`中定义的 `Function` 函数。
    
        function Vue (options) {
          if (process.env.NODE_ENV !== 'production' &&
            !(this instanceof Vue)
          ) {
            warn('Vue is a constructor and should be called with the `new` keyword')
          }
          this._init(options)
        }
    
     
    
    通过查看 `Vue` 的 `function`，我们知道 `Vue` 只能通过 `new` 关键字初始化，然后调用 `this._init` 方法，该方法在 `src/core/instance/init.js` 中定义。
    
        Vue.prototype._init = function (options?: Object) {
            const vm: Component = this
              
            // 省略一系列其它初始化的代码
              
            if (vm.$options.el) {
              console.log('vm.$options.el:',vm.$options.el);
              vm.$mount(vm.$options.el)
            }
          }
    
     
2.  Vue实例挂载
3.  创建虚拟node

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0NTEwNDU1_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/6274098f24fc45aeb143cc320c977628.png
[snabbdom]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fsnabbdom%2Fsnabbdom