谈谈对虚拟DOM的理解

一、前言

　　一般谈论某个东西的时候，我们都想知道它是怎么来的，那我们现在就来说说：虚拟DOM的出现，是跟随着前端框架React的诞生而诞生的，是由facebook提出来的，主要为了兼顾开发效率与性能，后来其卓越的开发性能也赢得了越来越多的开发者的认可。继react之后，Vue2.0也在其核心上面引入了虚拟DOM的概念，那接下来我们就来谈论一下虚拟DOM的原理：

二、虚拟DOM

　　虚拟DOM：virtual dom（下面我们简称为vdom，它是vue和react的核心）

　　1、什么是vdom？

　　　　vdom：可以看作是一个使用javascript模拟DOM结构的树形结构。对于我们开发者而言呢，操作DOM结构是非常昂贵的，它改动后，整个容器中的内容中的内容都要重新渲染一遍，就相当于“推倒重来”，如果项目相对来说比较复杂的话，是非常影响性能的。vdom就可以很好地解决这个问题。

　　　　主流的框架均支持使用 JSX 的写法， JSX 最终会被 babel 编译为JavaScript 对象，用于来表示vdom，思考下列的 JSX：

　　　　<div> 　　　　<span className="item">item</span> 　　　　 <input disabled={true} /> 　　　　</div>

　　　　最终会被babel编译为如下的 JavaScript对象：

　　　　{ 　　　　type: 'div', 　　　　 props: null, 　　　　　　children: [{ 　　　　　　type: 'span', 　　　　　　 props: { 　　　　class: 'item', 　　　　 }, 　　　　children: ['item'], 　　　　　　 },
　　　　　　　　　 { 　　　　　　type: 'input', 　　　　　　props: { 　　 　　disabled: true, 　　　　 　　}, 　　　　children: [], 　　　　　　 }], 　　　　　　}
　　　　　可以注意到以下两点：
　　　　　　　所有的 DOM 节点都是一个类似于这样的对象：{ type: '...', props: { ... }, children: { ... }, on: { ... } }

　　2、为什么要使用vdom?

　　　　我们简单的来讲vdom和原生的DOM做一个对比（简单比较一下vdom和原生DOM的重绘过程）：

　　　　　　原生DOM：render html string + 重新创建所有的DOM元素

　　　　　　vdom：render virtual dom + diff + 必要的dom更新

　　　　　　　和 DOM 操作比起来，js 计算是非常便宜的。vdom render + diff 显然比原生DOM渲染 html 字符串要慢，但是，它依然是纯 js 层面的计算，比起后面的 DOM 操作来说，依然便宜了太多。依次来看，就可以看出vdom很好的提高了渲染效率。

　　3、vdom的使用

　　上面提到了，我们可以使用vdom来对比出需要对 DOM 进行的特定更改，并单独进行这些特定更新。让我们回到我们的示例中，并使用 DOM API 进行相同的更改。

　　首先，我们需要制作vdom 的副本，其中包含我们想要进行的更改。由于我们不需要使用 DOM API，因此我们实际上只需创建一个新对象。

const copy = { tagName: "ul", attributes: { "class": "list" }, children: [ { tagName: "li", attributes: { "class": "list__item" }, textContent: "List item one" }, { tagName: "li", attributes: { "class": "list__item" }, textContent: "List item two" } ] }; 

copy 对象可以是用于在当前 vdom（上文的 list 对象）和更新的 vdom 之间对比出一个差异（Diff），Diff 结果如下：

const diffs = [ { newNode: { /* new version of list item one */ }, oldNode: { /* original version of list item one */ }, index: /* index of element in parent's list of child nodes */ }, { newNode: { /* list item two */ }, index: { /* */ } } ] 

　　这个 Diff 提供了有关如何更新真实 DOM 的说明。一旦确定了所有差异，我们就可以批量更新 DOM 。

　　例如，我们可以循环遍历每个差异，并根据 Diff 指定的内容添加新的子元素或更新旧的子元素。

const domElement = document.getElementsByClassName("list")[0]; diffs.forEach((diff) => { const newElement = document.createElement(diff.newNode.tagName); /* Add attributes ... */ if (diff.oldNode) { // If there is an old version, replace it with the new version  domElement.replaceChild(diff.newNode, diff.index); } else { // If no old version exists, create a new node  domElement.appendChild(diff.newNode); } })

与框架结合

诸如 React 和 Vue 之类的框架内部使用 Virtual DOM 来对 DOM 进行更高效的更新。例如，我们的 list 组件可以用以下方式用 React 编写。

import React from 'react'; import ReactDOM from 'react-dom'; const list = React.createElement("ul", { className: "list" }, React.createElement("li", { className: "list__item" }, "List item") ); ReactDOM.render(list, document.body); 

如果我们想要更新列表，我们可以重写整个列表模板，然后再次调用 ReactDOM.render() ，传入新列表。

const newList = React.createElement("ul", { className: "list" }, React.createElement("li", { className: "list__item" }, "List item one"), React.createElement("li", { className: "list__item" }, "List item two"); ); setTimeout(() => ReactDOM.render(newList, document.body), 5000); 

因为 React 使用 Virtual DOM，即使我们重新渲染整个模板，也只更新实际更改的部分。如果我们在发生变化时查看我们的开发人员工具，我们将看到特定元素和更改元素的特定部分。

　　4、Virtual DOM的优缺点

　　　　优点：

　　　　　　1、最终表现在DOM上的修改只是变更的部分，可以保证非常高效的渲染。

　　　　　　2、提升了性能（JavaScript对象比DOM对象性能高），抽象了DOM的具体实现（对DOM进行了一层抽象）

 　　　　缺点：

　　　　　　首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHTML插入慢。