揭秘Vue中的VirtualDom

前言

Vue.js 2.0引入Virtual DOM,比Vue.js 1.0的初始渲染速度提升了2-4倍&＃xff0c;并大大降低了内存消耗。那什么是Virtual DOM&＃xff1f;为什么需要Virtual DOM&＃xff1f;它是通过什么方式去提升页面渲染效率的呢&＃xff1f;这是本文所要探讨的问题。

模板转换成视图的过程

在正式介绍 Virtual Dom之前&＃xff0c;我们有必要先了解下模板转换成视图的过程整个过程&＃xff08;如下图参考《深入浅出vue》&＃xff09;&＃xff1a;

• Vue.js通过编译将template 模板转换成渲染函数(render ) &＃xff0c;执行渲染函数就可以得到一个虚拟节点树

• 在对 Model 进行操作的时候&＃xff0c;会触发对应 Dep 中的 Watcher 对象。Watcher 对象会调用对应的 update 来修改视图。这个过程主要是将新旧虚拟节点进行差异对比&＃xff0c;然后根据对比结果进行DOM操作来更新视图。

简单点讲&＃xff0c;在Vue的底层实现上&＃xff0c;Vue将模板编译成虚拟DOM渲染函数。结合Vue自带的响应系统&＃xff0c;在状态改变时&＃xff0c;Vue能够智能地计算出重新渲染组件的最小代价并应到DOM操作上。

对上图几个概念加以解释:

• 渲染函数&＃xff1a;渲染函数是用来生成Virtual DOM的。Vue推荐使用模板来构建我们的应用界面&＃xff0c;在底层实现中Vue会将模板编译成渲染函数&＃xff0c;当然我们也可以不写模板&＃xff0c;直接写渲染函数&＃xff0c;以获得更好的控制。

• VNode 虚拟节点&＃xff1a;它可以代表一个真实的 dom 节点。通过 createElement 方法能将 VNode 渲染成 dom 节点。简单地说&＃xff0c;vnode可以理解成节点描述对象&＃xff0c;它描述了应该怎样去创建真实的DOM节点。

• patch(也叫做patching算法)&＃xff1a;虚拟DOM最核心的部分&＃xff0c;它可以将vnode渲染成真实的DOM&＃xff0c;这个过程是对比新旧虚拟节点之间有哪些不同&＃xff0c;然后根据对比结果找出需要更新的的节点进行更新。这点我们从单词含义就可以看出&＃xff0c; patch本身就有补丁、修补的意思&＃xff0c;其实际作用是在现有DOM上进行修改来实现更新视图的目的。Vue的Virtual DOM Patching算法是基于Snabbdom的实现&＃xff0c;并在些基础上作了很多的调整和改进。

•  

Virtual DOM 是什么&＃xff1f;

Virtual DOM 其实就是一棵以 Javascript 对象( VNode 节点)作为基础的树&＃xff0c;用对象属性来描述节点&＃xff0c;实际上它只是一层对真实 DOM 的抽象。最终可以通过一系列操作使这棵树映射到真实环境上。

简单来说&＃xff0c;可以把Virtual DOM 理解为一个简单的JS对象&＃xff0c;并且最少包含标签名( tag)、属性(attrs)和子元素对象( children)三个属性。不同的框架对这三个属性的命名会有点差别。

对于虚拟DOM&＃xff0c;咱们来看一个简单的实例&＃xff0c;就是下图所示的这个&＃xff0c;详细的阐述了 模板→渲染函数→虚拟DOM树→真实DOM的一个过程

Virtual DOM 作用是什么&＃xff1f;

虚拟DOM的最终目标是将虚拟节点渲染到视图上。但是如果直接使用虚拟节点覆盖旧节点的话&＃xff0c;会有很多不必要的DOM操作。例如&＃xff0c;一个ul标签下很多个li标签&＃xff0c;其中只有一个li有变化&＃xff0c;这种情况下如果使用新的ul去替代旧的ul,因为这些不必要的DOM操作而造成了性能上的浪费。

为了避免不必要的DOM操作&＃xff0c;虚拟DOM在虚拟节点映射到视图的过程中&＃xff0c;将虚拟节点与上一次渲染视图所使用的旧虚拟节点&＃xff08;oldVnode&＃xff09;做对比&＃xff0c;找出真正需要更新的节点来进行DOM操作&＃xff0c;从而避免操作其他无需改动的DOM。

其实虚拟DOM在Vue.js主要做了两件事&＃xff1a;

• 提供与真实DOM节点所对应的虚拟节点vnode

• 将虚拟节点vnode和旧虚拟节点oldVnode进行对比&＃xff0c;然后更新视图

•  

为何需要Virtual DOM&＃xff1f;

• 具备跨平台的优势

由于 Virtual DOM 是以 Javascript 对象为基础而不依赖真实平台环境&＃xff0c;所以使它具有了跨平台的能力&＃xff0c;比如说浏览器平台、Weex、Node 等。

• 操作 DOM 慢&＃xff0c;js运行效率高。我们可以将DOM对比操作放在JS层&＃xff0c;提高效率。

因为DOM操作的执行速度远不如Javascript的运算速度快&＃xff0c;因此&＃xff0c;把大量的DOM操作搬运到Javascript中&＃xff0c;运用patching算法来计算出真正需要更新的节点&＃xff0c;最大限度地减少DOM操作&＃xff0c;从而显著提高性能。

Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。可以类比 CPU 和硬盘&＃xff0c;既然硬盘这么慢&＃xff0c;我们就在它们之间加个缓存&＃xff1a;既然 DOM 这么慢&＃xff0c;我们就在它们 JS 和 DOM 之间加个缓存。CPU&＃xff08;JS&＃xff09;只操作内存&＃xff08;Virtual DOM&＃xff09;&＃xff0c;最后的时候再把变更写入硬盘&＃xff08;DOM&＃xff09;

• 提升渲染性能

Virtual DOM的优势不在于单次的操作&＃xff0c;而是在大量、频繁的数据更新下&＃xff0c;能够对视图进行合理、高效的更新。

为了实现高效的DOM操作&＃xff0c;一套高效的虚拟DOM diff算法显得很有必要。我们通过patch 的核心----diff 算法&＃xff0c;找出本次DOM需要更新的节点来更新&＃xff0c;其他的不更新。比如修改某个model 100次&＃xff0c;从1加到100&＃xff0c;那么有了Virtual DOM的缓存之后&＃xff0c;只会把最后一次修改patch到view上。那diff 算法的实现过程是怎样的&＃xff1f;

diff 算法

Vue的diff算法是基于snabbdom改造过来的&＃xff0c;仅在同级的vnode间做diff&＃xff0c;递归地进行同级vnode的diff&＃xff0c;最终实现整个DOM树的更新。因为跨层级的操作是非常少的&＃xff0c;忽略不计&＃xff0c;这样时间复杂度就从O(n3)变成O(n)。

diff 算法包括几个步骤&＃xff1a;

• 用 Javascript 对象结构表示 DOM 树的结构&＃xff1b;然后用这个树构建一个真正的 DOM 树&＃xff0c;插到文档当中

• 当状态变更的时候&＃xff0c;重新构造一棵新的对象树。然后用新的树和旧的树进行比较&＃xff0c;记录两棵树差异

• 把所记录的差异应用到所构建的真正的DOM树上&＃xff0c;视图就更新了

diff 算法的实现过程

diff 算法本身非常复杂&＃xff0c;实现难度很大。本文去繁就简&＃xff0c;粗略介绍以下两个核心函数实现流程&＃xff1a;

• patch(container,vnode) :初次渲染的时候&＃xff0c;将VDOM渲染成真正的DOM然后插入到容器里面。

• patch(vnode,newVnode):再次渲染的时候&＃xff0c;将新的vnode和旧的vnode相对比&＃xff0c;然后之间差异应用到所构建的真正的DOM树上。

1.patch(container,vnode)

通过这个函数可以让VNode渲染成真正的DOM&＃xff0c;我们通过以下模拟代码&＃xff0c;可以了解大致过程&＃xff1a;

function createElement(vnode) {var tag &＃61; vnode.tag;var attrs &＃61; vnode.attrs || {};var children &＃61; vnode.children || [];if (!tag) {return null;}// 创建真实的 DOM 元素var elem &＃61; document.createElement(tag);// 属性var attrName;for (attrName in attrs) {if (attrs.hasOwnProperty(attrName)) {// 给 elem 添加属性elem.setAttribute(attrName, attrs[attrName]);}}// 子元素children.forEach(function(childVnode) {// 给 elem 添加子元素&＃xff0c;如果还有子节点&＃xff0c;则递归的生成子节点。elem.appendChild(createElement(childVnode)); // 递归}); // 返回真实的 DOM 元素return elem;
}

2.patch(vnode,newVnode)

这里我们只考虑vnode与newVnode如何对比的情况&＃xff1a;

function updateChildren(vnode, newVnode) {var children &＃61; vnode.children || []var newChildren &＃61; newVnode.children || []// 遍历现有的childrenchildren.forEach(function (childVnode, index) {var newChildVnode &＃61; newChildren[index]// 两者tag一样if (childVnode.tag &＃61;&＃61;&＃61; newChildVnode.tag) {// 深层次对比&＃xff0c;递归updateChildren(childVnode, newChildVnode)} else {// 两者tag不一样replaceNode(childVnode, newChildVnode)}}) }