你不知道的virtual DOM（一）：Virtual Dom介绍_文化 & 方法_大白

AI实践哪家强？来 AICon，解锁技术前沿，探寻产业新机！了解详情 



 写点什么

一、前言

目前最流行的两大前端框架，React 和 Vue，都不约而同的借助 Virtual DOM 技术提高页面的渲染效率。那么，什么是 Virtual DOM？它是通过什么方式去提升页面渲染效率的呢？本系列文章会详细讲解 Virtual DOM 的创建过程，并实现一个简单的 Diff 算法来更新页面。本文的内容脱离于任何的前端框架，只讲最纯粹的 Virtual DOM。敲单词太累了，下文 Virtual DOM 一律用 VD 表示。

这是 VD 系列文章的开篇，后续还会有更多的文章带你深入了解 VD 的奥秘。

二、VD 是什么

本质上来说，VD 只是一个简单的 JS 对象，并且最少包含 tag、 props和 children三个属性。不同的框架对这三个属性的命名会有点差别，但表达的意思是一致的。它们分别是标签名（tag）、属性（props）和子元素对象（children）。下面是一个典型的 VD 对象例子：

{  tag: "div",  props: {},  children: [    "Hello World",     {      tag: "ul",      props: {},      children: [{        tag: "li",        props: {          id: 1,          class: "li-1"        },        children: ["第", 1]      }]    }  ]}

复制代码

VD 跟 dom 对象有一一对应的关系，上面的 VD 是由以下的 HTML 生成的：

<div>  Hello World  <ul>    <li id="1" class="li-1">      第1    </li>  </ul></div>

复制代码

一个 dom 对象，比如 li，由 tag(li), props({id:1,class:"li-1"})和 children(["第",1])三个属性来描述。

三、为什么需要 VD

借助 VD，可以达到有效减少页面渲染次数的目的，从而提高渲染效率。我们先来看下页面的更新一般会经过几个阶段：

从上面的例子中，可以看出页面的呈现会分以下 3 个阶段：

JS 计算
生成渲染树
绘制页面

这个例子里面，JS 计算用了 691毫秒，生成渲染树 578毫秒，绘制 73毫秒。如果能有效的减少生成渲染树和绘制所花的时间，更新页面的效率也会随之提高。

通过 VD 的比较，我们可以将多个操作合并成一个批量的操作，从而减少 dom 重排的次数，进而缩短了生成渲染树和绘制所花的时间。至于如何基于 VD 更有效率的更新 dom，是一个很有趣的话题，日后有机会将另写一篇文章介绍。

四、如何实现 VD 与真实 DOM 的映射

我们先从如何生成 VD 说起。借助 JSX 编译器，可以将文件中的 HTML 转化成函数的形式，然后再利用这个函数生成 VD。看下面这个例子：

function render() {  return (    <div>      Hello World      <ul>        <li id="1" class="li-1">          第1        </li>      </ul>    </div>  );}

复制代码

这个函数经过 JSX 编译后，会输出下面的内容：

function render() {  return h(    'div',    null,    'Hello World',    h(      'ul',      null,      h(        'li',        { id: '1', 'class': 'li-1' },        '\u7B2C1'      )    )  );}

复制代码

这里的 h 是一个函数，可以起任意的名字。这个名字通过 babel 进行配置：

// .babelrc文件{ "plugins": [  ["transform-react-jsx", {   "pragma": "h"  // 这里可配置任意的名称  }] ]}

复制代码

接下来，我们只需要定义 h 函数，就能构造出 VD：

function flatten(arr) {  return [].concat.apply([], arr);}
function h(tag, props, ...children) {  return {    tag,     props: props || {},     children: flatten(children) || []  };}

复制代码

h 函数会传入三个或以上的参数，前两个参数一个是标签名，一个是属性对象，从第三个参数开始的其它参数都是 children。children 元素有可能是数组的形式，需要将数组解构一层。比如：

function render() {  return (    <ul>      <li>0</li>      {        [1, 2, 3].map( i => (          <li>{i}</li>        ))      }    </ul>  );}
// JSX编译后function render() {  return h(    'ul',    null,    h(      'li',      null,      '0'    ),    /*     * 需要将下面这个数组解构出来再放到children数组中     */    [1, 2, 3].map(i => h(      'li',      null,      i    ))  );}

复制代码

继续之前的例子。执行 h 函数后，最终会得到如下的 VD 对象：

{  tag: "div",  props: {},  children: [    "Hello World",     {      tag: "ul",      props: {},      children: [{        tag: "li",        props: {          id: 1,          class: "li-1"        },        children: ["第", 1]      }]    }  ]}

复制代码

下一步，通过遍历 VD 对象，生成真实的 dom

// 创建dom元素function createElement(vdom) {  // 如果vdom是字符串或者数字类型，则创建文本节点，比如“Hello World”  if (typeof vdom === 'string' || typeof vdom === 'number') {    return doc.createTextNode(vdom);  }
  const {tag, props, children} = vdom;
  // 1. 创建元素  const element = doc.createElement(tag);
  // 2. 属性赋值  setProps(element, props);
  // 3. 创建子元素  // appendChild在执行的时候，会检查当前的this是不是dom对象，因此要bind一下  children.map(createElement)      .forEach(element.appendChild.bind(element));
  return element;}
// 属性赋值function setProps(element, props) {  for (let key in props) {    element.setAttribute(key, props[key]);  }}

复制代码

createElement函数执行完后，dom 元素就创建完并展示到页面上了（页面比较丑，不要介意…）。

五、总结

本文介绍了 VD 的基本概念，并讲解了如何利用 JSX 编译 HTML 标签，然后生成 VD，进而创建真实 dom 的过程。下一篇文章将会实现一个简单的 VD Diff 算法，找出 2 个 VD 的差异并将更新的元素映射到 dom 中去。

PS: 想看完整代码见这里：

代码(https://gist.github.com/dickenslian/86c4e266ae5f2134373376133bec9e3d)

参考链接：

The Inner Workings Of Virtual DOM
(https://medium.com/@rajaraodv/the-inner-workings-of-virtual-dom-666ee7ad47cf)
preact 源码学习系列之一：JSX 解析与 DOM 渲染
(https://github.com/youngwind/blog/issues/103)

评论 2 条评论

发布

魅影

这里不应该是 setProps 吧，应该是 setAttributes

2020-07-29 12:45

 0 回复

魅影

哎，没看全，不好意思，忽视。这个方法命名好有歧义 setProps 的内部实现是 setAttributes 😂

2020-07-29 13:06

 0 回复

没有更多了

创作场景

你不知道的 virtual DOM（一）：Virtual Dom 介绍

一、前言

二、VD 是什么

三、为什么需要 VD

四、如何实现 VD 与真实 DOM 的映射

五、总结

参考链接：

评论 2 条评论

低代码引擎 TinyEngine 正式发布！！！

游戏研发与产业的变革之路

首购2元起！CDN与加速特惠专场来啦~

DaaS到底是什么为什么越来越多人在用云桌面办公

同一份数据全域共享，HashData UnionStore实时性背后的故事

企业应用的挑战与机遇

用友BIP开发者生态亮相华为全联接大会

如何提升Java项目质量，代码是关键

软件开发中，如何为你的代码构建三层防护体系

入门指南：GPU云服务器用途一览

数据库OpenTenBase和操作系统OpenCloudOS获信通院Oscar开源尖峰奖

华秋应邀精彩亮相IOTE物联网展

【华秋干货铺】双面混装PCBA过波峰焊时，如何选用治具？

物联网、工业大数据平台 TDengine 与苍穹地理信息平台完成兼容互认证

度小满发布“轩辕70B”金融大模型 C-Eval、CMMLU双榜排名第一

INFINI Labs 产品更新 | Gateway 支持基于 Kafka 的复制能力，发布 Helm Charts 部署方式

云GPU如何加速AI训练

智能时代的“发动机升级”：数据中心十年之变

入门有监督学习：数据、模型、度量

用友第五届开发者大赛初赛晋级公示，复赛火热进行中！

腾讯云ES：一站式接入，数据链路可视化重磅来袭！

赋能游戏产业的新引擎

一图回顾华为云开发者联盟扫地僧见面会

警惕U盘、FTP等传统文件摆渡方式的7大弊端

网络隔离下实现的文件传输，现有的方式真的安全吗？

观测云产品更新 | 优化日志数据转发、索引绑定、基础设施自定义等

创作场景

你不知道的 virtual DOM（一）：Virtual Dom 介绍

一、前言

二、VD 是什么

三、为什么需要 VD

四、如何实现 VD 与真实 DOM 的映射

五、总结

参考链接：

评论 2 条评论

更多内容推荐

推荐阅读

电子书

大厂实战PPT下载