- 当前位置：首页 >IT科技类资讯 >「源码剖析」如何实现一个虚拟DOM算法
「源码剖析」如何实现一个虚拟DOM算法
发布时间：2025-11-05 13:05:58 来源：创站工坊 作者：数据库
上篇文章《虚拟DOM如何进化为真实DOM》中讲到了如何通过虚拟DOM树转化为真实DOM渲染到页面中。源码但是剖析在渲染的过程中，我们直接将新的何实虚拟DOM树转化成真实DOM替换掉旧的DOM结构。当真实的现个虚拟DOM中的状态或者内容发生变化的时候，重新渲染新的源码虚拟DOM树再替换掉旧的，这样的剖析话会显得很无力。设想一种情景，何实当我们对整个DOM结构中只是现个虚拟修改了一个小的数据甚至是一个标点符号的时候或者数据量很大的时候，我们要把原来旧的源码DOM结构全部替换掉，这样的剖析话对计算机而言太浪费性能了。
故我们希望是何实在更新的时候通过新渲染的虚拟DOM树和旧的虚拟DOM树进行对比,记录这两颗树的差异。记录下来的亿华云计算现个虚拟不同就是我们需要对页面真正的DOM操作，然后把它们渲染在真正的源码DOM结构上，页面就对应的剖析变化了。这样就实现了：看似视图全部结构得到了最新的何实渲染,但是最后操作DOM结构的时候只是改变了与原结构不同的地方。
即虚拟DOM的diff算法的主体思路是：
1.将虚拟DOM结构转化为真实的DOM结构替换到旧的DOM(第一次旧的为undefined)，渲染到页面中。
2.当状态变化的时候，新渲染一颗虚拟DOM树和原来旧的虚拟DOM树对比，对比之后记录下差异。
3.将最终由差异的部分转化成真实DOM结构渲染到页面上。
实现
在旧的虚拟节点和新的虚拟节点的对比过程中会出现以下几种情况,下面我们以Vue为例看Vue2.0是Diff算法是网站模板怎么实现的:
比较两个元素的标签
如果标签不一样的话直接替换掉,例如:div变成p
div->p <<<<<<<HEAD <p>前端简报</p> ========= <div>前端简报</div> >>>>>>>>判断虚拟节点的tag属性是否相等，如果不相等将新的虚拟DOM树转化为真实DOM结构把原来节点替换掉
if (oldVnode.tag != vnode.tag) { return oldVnode.el.parentNode.replaceChild(createElm(vnode), oldVnode.el); }效果图:
比较两个元素的文本
当标签一样的时候比较文本是否一样。如果文本不一样的话那么直接替换掉文本内容。
<<<<<<<HEAD <div>前端</div> ========= <div>简报</div> >>>>>>>>两个节点的tag都是div，故比较孩子虚拟DOM树的是否一样,孩子的tag为undefined说明是文本节点，此时比较本文内容text是否一致即可
if (!oldVnode.tag) { //文本的对比 if (oldVnode.text != vnode.text) { return (oldVnode.el.textContent = vnode.text); } }效果图：
比较标签属性
如果两个标签一样那么比较标签的属性，当属性更新的时候通过新旧属性的对比会出现下面几种情况：
1、属性对比
如果旧的虚拟节点有，新的虚拟节点没有那么需要删除旧的虚拟节点上的服务器托管属性。
let newProps = vnode.data || {}; //新的属性 let el = vnode.el; //老的有 新的没有 需要删除属性 for (let key in oldProps) { if (!newProps[key]) { el.removeAttribute(key); //移除真实dom的属性 } }反过来，如果旧的虚拟节点没有，新的虚拟节点有那么直接设置新的属性即可
//新的有 那就直接用新的去更新即可 for (let key in newProps) { el.setAttribute(key, newProps[key]); } 对应的源码地址:src\platforms\web\runtime\modules\attrs.js2、样式处理
如果老的样式中存在新的样式没有那么删除老的样式。
- style={color:red} + style={background:red}
let newStyle = newProps.style || {}; let oldStyle = oldProps.style || {}; //老的样式中有的 新的没有 删除老的样式 for (let key in oldStyle) { if (!newStyle[key]) { el.style[key] = ""; } }相反如果老的样式没有，新的样式存在那么直接更新新的样式即可
for (let key in newProps) { if (key == "style") { for (let styleName in newProps.style) { el.style[styleName] = newProps.style[styleName]; } } } 对应的源码地址:src\platforms\web\runtime\modules\style.js3、类名处理
对于类名处理我们使用新节点的类名
- class="title ant-title" + class="title ant-mian-title"
for (let key in newProps) { if (key == "class") { el.className = newProps.class; } 对应的源码地址src\platforms\web\runtime\modules\class.js比较儿子
在比较儿子的过程中可以分为以下几种情况:
1、老节点有儿子，新节点没有儿子删除老节点的儿子即可
if (isDef(oldCh)) { removeVnodes(oldCh, 0, oldCh.length - 1) } ========================================= if (oldChildren.length > 0) { el.innerHTML = ""; }2、老节点没有儿子，新节点有儿子遍历children转化为真实的DOM结构添加到页面中
if (isDef(ch)) { if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, ) addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue) } =============================================================== if (newChildren.length > 0) { for (let i = 0; i < newChildren.length; i++) { let child = newChildren[i]; el.appendChild(createElm(child)); } }3、老节点有儿子，新节点有儿子
当老节点的儿子和新节点的儿子都存在并且不相等的时候，这种情况比较复杂也是diff算法的核心。
在vue2.0中比较老节点和新节点区别的时候采用了双指针的方式，通过同时向同一个方向循环老节点和新节点，只要有一个节点循环完成就结束循环。如果是老节点先结束，那么将新节点剩余的元素添加到渲染列表;如果是新节点先结束，那么将旧节点剩余的元素删除即可。
定义开头指针其中包括老节点的开始位置和结束位置，新节点的开始位置和结束位置。
let oldStartIndex = 0; //老的索引 let oldStartVnode = oldChildren[0]; //老的索引指向的节点 let oldEndIndex = oldChildren.length - 1; let oldEndVnode = oldChildren[oldEndIndex]; let newStartIndex = 0; //新的索引 let newStartVnode = newChildren[0]; //新的索引指向的节点 let newEndIndex = newChildren.length - 1; let newEndVnode = newChildren[newEndIndex];通过判断两个节点的key和tag是否相等来确定同一元素
function sameVnode (a, b) { return ( a.key === b.key && ( ( a.tag === b.tag && ... ) || ( ... ) ) ) }正序排列
如果多余的节点的右边的话，那么从左往右依次判断老的开始节点和新的开始节点是否是同一节点,如果是同一节点调用patchVode方法去递归子节点，将老节点和新节点的下标加1向右移动，直到下标大于children的长度。
if (sameVnode(oldStartVnode, newStartVnode)) { patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx) oldStartVnode = oldCh[++oldStartIdx] newStartVnode = newCh[++newStartIdx] } 效果图:
如果是新节点多余添加到渲染视图，如上图从左到右对比时，g节点的下一个el是null，insertBefore相当于appendChild方法向后插入;如果是从右向左，g节点的下一个el是a，那么采用insertBefore相当于向a前面插入节点。
if (oldStartIndex > oldEndIndex) { for (let i = newStartIndex; i <= newEndIndex; i++) { let ele = newChildren[newEndIndex + 1] == null ? null : newChildren[newEndIndex + 1].el; parent.insertBefore(createElm(newChildren[i]), ele); } }如果是老节点多余，那么说明这些节点是不需要的，删除掉即可，如果在删除的过程中出现null，说明这个节点已经处理过了跳过即可。
if(newStartIdx > newEndIdx){ for (let i = oldStartIndex; i <= oldEndIndex; i++) { let child = oldChildren[i]; if(child!= undefined){ parent.removeChild(child.el); } } }如果多余的节点在左边，从新老节点的结束节点开始下标依次减1
if (sameVnode(oldEndVnode, newEndVnode)) { patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx) oldEndVnode = oldCh[--oldEndIdx] newEndVnode = newCh[--newEndIdx] }反转排列
如果遇到新老节点反转的情况，通过老节点的开始节点和新节点的结束节点作对比或者老节点和结束节点和新节点的开始节点作对比。
如果老节点的开始节点和新节点的结束节点是同一节点，那么将老的开始节点插入到老的结束节点的下一个节点之前，然后依次分别向右向左移动节点对应的下标，获取对应的值继续遍历。
if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx) canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm)) oldStartVnode = oldCh[++oldStartIdx] newEndVnode = newCh[--newEndIdx] }如果老节点的结束节点和新节点的开始节点是同一节点吗,那么将老节点的结束节点插入到老节点的开始节点前面，然后依次分别向左向右移动节点对应的下标，获取对应的值继续遍历。
if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx) canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm) oldEndVnode = oldCh[--oldEndIdx] newStartVnode = newCh[++newStartIdx] }毫无关系排列
如果在对比的过程中儿子之间没有任何的关系，通过从新节点的开始节点开始依次和老节点的所有节点作对比，如果没有相同的就创建新的节点插入的老节点的开始节点之前，如果在循环的过程中找到了相同的元素，那么直接复用老元素，将和新节点相同的老节点插入到老节点的开始节点之前，为了防止数组的塌陷问题，将移走的老节点的位置设为undefined，最后将多余的老节点全部删除即可。
设置缓存组使用老节点的key和下标做一个映射表，新节点的key去老的映射表里筛选，如果没有筛选到，那么就不复用直接创建新节点插入到老节点的开始节点之前。
function createKeyToOldIdx (children) { let i, key const map = {} children.forEach((item, index) => { if (isDef（item.key）) { map[item.key] = index; //{a:0,b:1,c:2,d:3,e:4,f:5,g:6} } return map }如果在老节点中找到，那么移动老节点到老节点开始节点之前
let map = createKeyToOldIdx(oldChildren); //儿子之间没有关系 let moveIndex = map[newStartVnode.key]; //拿到开头的虚拟节点的key去老的里面找 if(moveIndex == undefined){ parent.insertBefore(createElm(newStartVnode),oldStartVnode.el); }else{ let moveVNode = oldChildren[moveIndex]; //这个老的虚拟节点需要移动 oldChildren[moveIndex] = null; parent.insertBefore(moveVNode.el,oldStartVnode.el); patch(moveVNode,newStartVnode) //比较属性和儿子 } newStartVnode = newChildren[++newStartIndex] //用新的不停的去老的里面找在移动的过程中开始指针和结束指针可能存在指向null的情况，如果指向null的话那么无法在进行比较，可以直接跳过，指向下一个元素即可。
if (isUndef(oldStartVnode)) { oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left } else if (isUndef(oldEndVnode)) { oldEndVnode = oldCh[--oldEndIdx] }源码地址：src/core/vdom/patch.js
为什么要使用key?
人丑话不多先看图
有key
没有key
如上图所示，第一个图为有key的情况，第二个图为没有key的情况，可以很明显的看到所展示内容如果有key的话，复用了key为A，B，C，D的4个节点，结果只是将新创建的E节点插入到C节点的前面完成渲染。如果没有key的话，那么创建了E，C，D三个节点，降低了复用率，性能方面肯定没有有key 的情况高。
为什么不能用index作为key呢?
平时开发过程中,如果只是通过页面静态渲染是可以使用index作为key的，如果在页面上有复杂的逻辑变化，那么使用index作为key相当于没有key。
<li index=0>A</li> <li index=0>C</li> <li index=1>B</li> <li index=1>B</li> <li index=2>C</li> <li index=2>A</li>如上代码所示，将下标为0和2的A和C变换位置之后需要重新创建节点A和C,此时C的下标为0，A的下标为2。而以id或者唯一标识作为key的话，相当于是将A和C元素的位置进行平移。平移的性能比创建节点的性能高。
在使用index作为key的时候还会产生意想不到的问题，假如我们把B节点删除，我们最开始取值为B，现在取值变成了C。
总结
Vue2.0的diff算法pathVode方法的基本思路可以总结为以下几点：
1.判断oldVode和newVode是否是同一对象，如果是的话直接return。2.是定义真实DOM为el。
3.如果oldVode和newVode都有文本节点并且不相等，那么将old的文本节点设置为newVode的文本节点。
4.如果oldVode有子节点newVode没有，那么删掉子节点。
5.如果oldVode没有子节点newVode有。那么将子节点转化为真实DOM添加到el中。6.如果都有子节点，那么执行updateChildren函数比较子节点
以上就是Diff算法的整个过程，它对整个Vue渲染过程的性能有着至关重要的作用。
- 上一篇：apt-get和apt-cache是Ubuntu Linux中的命令行下的包管理工具。 apt-get的GUI版本是Synaptic包管理器。该文中我们会展示apt-get和apt-cache命令的15个不同例子。示例：1 列出所有可用包复制代码代码如下:linuxtechi@localhost:~$ apt-cache pkgnames account-plugin-yahoojp ceph-fuse dvd+rw-tools e3 gnome-commander-data grub-gfxpayload-lists gweled .......................................示例：2 用关键字搜索包这个命令在你不确定包名时很有用，只要在apt-cache（LCTT 译注：这里原文是apt-get，应为笔误）后面输入与包相关的关键字即可。复制代码代码如下:linuxtechi@localhost:~$ apt-cache search web server apache2 - Apache HTTP Server apache2-bin - Apache HTTP Server (binary files and modules) apache2-data - Apache HTTP Server (common files) apache2-dbg - Apache debugging symbols apache2-dev - Apache HTTP Server (development headers) apache2-doc - Apache HTTP Server (on-site documentation) apache2-utils - Apache HTTP Server (utility programs for web servers) ......................................................................注意： 假如你安装了“apt-file”包，我们就可以像下面那样用配置文件搜索包。复制代码代码如下:linuxtechi@localhost:~$ apt-file search nagios.cfg ganglia-nagios-bridge: /usr/share/doc/ganglia-nagios-bridge/nagios.cfg nagios3-common: /etc/nagios3/nagios.cfg nagios3-common: /usr/share/doc/nagios3-common/examples/nagios.cfg.gz pnp4nagios-bin: /etc/pnp4nagios/nagios.cfg pnp4nagios-bin: /usr/share/doc/pnp4nagios/examples/nagios.cfg示例：3 显示特定包的基本信息复制代码代码如下:linuxtechi@localhost:~$ apt-cache show postfix Package: postfix Priority: optional Section: mail Installed-Size: 3524 Maintainer: LaMont Jones Architecture: amd64 Version: 2.11.1-1 Replaces: mail-transport-agent Provides: default-mta, mail-transport-agent .....................................................示例：4 列出包的依赖复制代码代码如下:linuxtechi@localhost:~$ apt-cache depends postfix postfix Depends: libc6 Depends: libdb5.3 Depends: libsasl2-2 Depends: libsqlite3-0 Depends: libssl1.0.0 |Depends: debconf Depends: cdebconf debconf Depends: netbase Depends: adduser Depends: dpkg ............................................示例：5 使用apt-cache显示缓存统计复制代码代码如下:linuxtechi@localhost:~$ apt-cache stats Total package names: 60877 (1,218 k) Total package structures: 102824 (5,758 k) Normal packages: 71285 Pure virtual packages: 1102 Single virtual packages: 9151 Mixed virtual packages: 1827 Missing: 19459 Total distinct versions: 74913 (5,394 k) Total distinct descriptions: 93792 (2,251 k) Total dependencies: 573443 (16.1 M) Total ver/file relations: 78007 (1,872 k) Total Desc/File relations: 93792 (2,251 k) Total Provides mappings: 16583 (332 k) Total globbed strings: 171 (2,263 ) Total dependency version space: 2,665 k Total slack space: 37.3 k Total space accounted for: 29.5 M示例：6 使用 “apt-get update” 更新仓库使用命令“apt-get update”, 我们可以重新从源仓库中同步文件索引。包的索引从“/etc/apt/sources.list”中检索。复制代码代码如下:linuxtechi@localhost:~$ sudo apt-get update Ign http://extras.ubuntu.com utopic InRelease Hit http://extras.ubuntu.com utopic Release.gpg Hit http://extras.ubuntu.com utopic Release Hit http://extras.ubuntu.com utopic/main Sources Hit http://extras.ubuntu.com utopic/main amd64 Packages Hit http://extras.ubuntu.com utopic/main i386 Packages Ign http://in.archive.ubuntu.com utopic InRelease Ign http://in.archive.ubuntu.com utopic-updates InRelease Ign http://in.archive.ubuntu.com utopic-backports InRelease ................................................................示例：7 使用apt-get安装包复制代码代码如下:linuxtechi@localhost:~$ sudo apt-get install icinga上面的命令会安装叫“icinga”的包。示例：8 升级所有已安装的包复制代码代码如下:linuxtechi@localhost:~$ sudo apt-get upgrade示例：9 更新特定的包在apt-get命令中的“install”选项后面接上“-only-upgrade”用来更新一个特定的包，如下所示：复制代码代码如下:linuxtechi@localhost:~$ sudo apt-get install filezilla --only-upgrade示例：10 使用apt-get卸载包复制代码代码如下:linuxtechi@localhost:~$ sudo apt-get remove skype上面的命令只会删除skype包，假如你想要删除它的配置文件，在apt-get命令中使用“purge”选项。如下所示：复制代码代码如下:linuxtechi@localhost:~$ sudo apt-get purge skype我们可以结合使用上面的两个命令：复制代码代码如下:linuxtechi@localhost:~$ sudo apt-get remove --purge skype示例：11 在当前的目录中下载包复制代码代码如下:linuxtechi@localhost:~$ sudo apt-get download icinga Get:1 http://in.archive.ubuntu.com/ubuntu/ utopic/universe icinga amd64 1.11.6-1build1 [1,474 B] Fetched 1,474 B in 1s (1,363 B/s)上面的目录会把icinga包下载到你的当前工作目录。示例：12 清理本地包占用的磁盘空间复制代码代码如下:linuxtechi@localhost:~$ sudo apt-get clean上面的命令会清空apt-get所下载的包占用的磁盘空间。我们也可以使用“autoclean”选项来代替“clean”，两者之间主要的区别是autoclean清理不再使用且没用的下载。复制代码代码如下:linuxtechi@localhost:~$ sudo apt-get autoclean Reading package lists... Done Building dependency tree Reading state information... Done示例：13 使用“autoremove”删除包当在apt-get命令中使用“autoremove”时，它会删除为了满足依赖而安装且现在没用的包。复制代码代码如下: linuxtechi@localhost:~$ sudo apt-get autoremove icinga示例：14 显示包的更新日志复制代码代码如下: linuxtechi@localhost:~$ sudo apt-get changelog apache2 Get:1 Changelog for apache2 (http://changelogs.ubuntu.com/changelogs/pool/main/a/apache2/apache2_2.4.10-1ubuntu1/changelog) [195 kB] Fetched 195 kB in 3s (60.9 kB/s)上面的命令会下载apache2的更新日志，并在你屏幕上分页显示。示例：15 使用 “check” 选项显示损坏的依赖关系复制代码代码如下:linuxtechi@localhost:~$ sudo apt-get check Reading package lists... Done Building dependency tree Reading state information... Done
- 下一篇：电脑SMB关闭的影响及解决方案（SMB服务停用后可能带来的问题和解决方法）
- HTCU11（探索HTCU11的创新功能与卓越性能）
- 基于P2P的互联网内容加速
- 聊聊Semaphore 信号量源码分析
- 软件开发探索之道：让自己成为知识的所有者
- 某宝上的三星平板如何？（性能、价格、用户评价一网打尽）
- C#基础：理解装箱与拆箱
- 盘点JavaScript中Getter()和Setter()函数的使用
- Python太好用了！AI初学者快速体验人脸检测
- 不是我不明白，这世界变化快！微软面向 Linux 平台推出了 Visual Studio 2015！昔日的对头，如今正走向融合。这么喜大普奔的事，我准备挑战一下微软重量级软件在 Linux 平台上的安装。然没想到哇。根本没有我想象中的挑战性。看完你就知道了。软件名称：Visual Studio 2015 旗舰版 官方最新版软件大小：1.69MB更新时间：2014-11-171、百度 “Visual Studio Downloads”这一溜关键词，在搜索结果中打开 Visual Studio 的主页。2、可以看到页面上有三个磁贴状方块，最右边的是 Visual Studio Code，我们点击它里面的“下载”。3、进入下载页面，页面上地址栏下方的黄色条带里提示有更新的版本，当然，大家要更新的。先点那个黄条里的 New features，看看有啥新鲜东西。4、各种改进，包括文件管理、编辑器选项、JavaScript 支持升级、Git 增强等等。那还等什么，点击上方黄条上的 Update，去下载升级版吧。5、在接下来的页面，我们点击 Updating on Linux 一节里的链接，开始下载。有两个链接，分别是 64 位的和 32 位的，根据自己的情况选择。6、下载完成之后，点击下载管理器里的“在文件夹中显示”，导航到刚才下载的软件包所在的文件夹。7、在软件包上右键——>提取到此处，开始解压软件包。8、解压完成，进入与软件压缩包同名的文件夹，在一个名为 Code 的可执行文件上双击。9、DUANG！Linux 平台上的微软重量级软件一下出现在眼前。原来，Visual Studio Code 是不开源的，我刚开始想象的软件编译呀，软件包依赖呀等挑战，从开始就不存在好嘛。现在，各位年轻的码农，一切就看你们的了。10、假如和我一样觉得无从下手，好吧，附送免费视频培训，我的名字叫雷锋。
- 盘点Golang中非常好用的几个包
随便看看
- Copyright © 2025 Powered by 「源码剖析」如何实现一个虚拟DOM算法,创站工坊 滇ICP备2023006006号-44sitemap