当前位置： 首页 > news >正文

虚拟DOMdiff算法

news 2026/3/31 11:49:52

一.什么是虚拟DOM？

虚拟DOM是 VUE 一个比较核心的概念，为什么会有虚拟DOM呢？首先可以与传统的网页开发做个对比，在没有 VUE 和 REACT 框架之前，我们都是使用原生 JavaScript 或者 jQuery，那时候是直接对 DOM 元素进行操作来达到视图更新的一个效果。

操作DOM   =》  视图更新

在使用 VUE 框架以后，我们就变成了通过改变数据去推动视图更新。

数据改变    =》  视图更新

虽然看着很神奇，但是其实还是要去操作 DOM 来达到试图更新的效果。

数据改变    =》  操作DOM   =》  视图更新

而这一步  数据改变  =》 操作DOM  就是VUE 框架内部来完成的。但是项目中会有很多数据发生改变，那么是否每一次数据改变都要去操作DOM呢，当然不是，所以就推出了虚拟DOM这个概念。

VUE 中的 template 模板或者 render 函数都会去形成虚拟 DOM。

因为 JS 的执行速度是很快的，比操作 DOM 要快很多，所以说在数据改变的时候不去操作 DOM，而是先去把这个进行的改变做个计算，计算出所有的变更然后再去操作真实 DOM，所以实际流程是：

数据改变   =》  虚拟DOM（计算变更）  =》  操作真实的DOM    =》   视图更新

什么是虚拟 DOM 呢？ 

就是用 JS 去模拟我们的 DOM 结构。

举个例子：下文是一个 DOM 结构。

  <div id="app" class="container"><h1>虚拟DOM</h1><ul style="color: red"><li>第一项</li><li>第二项</li><li>第三项</li></ul></div>

我们会通过 JS 去表达一下这个结构。

这个做法会写成一个对象，对象里面有三个比较重要的属性分别是：tag（标签）、props（属性）、children（子元素）。

比如最外层的 DOM 节点为 div 标签，所以 tag 就是 div，props 属性就为 id 和 className，children 子元素可能不止一个，所以是个数组，然后里面的每一项都是个对象，也有tag，props和 children属性。

let VNode = {tag: "div",props: {id: "app",className: "container",},children: [{tag: "h1",children: "虚拟DOM",},{tag: "ul",props: {style: "color: red",},children: [{tag: "li",children: "第一项",},{tag: "li",children: "第二项",},{tag: "li",children: "第三项",},],},],
};

这样就完成了用 JS 表达 DOM结构，然后就是用这个虚拟 DOM 结构去计算变更并且去操作真实 DOM。

二.怎么去使用虚拟DOM

Vue当中虚拟 DOM 的实现是参考了 Snabbdom 库。

Snabbdom库是准备一个空容器，然后用 vnode 表示一个节点，然后再通过 patch 函数把这个 vnode（虚拟节点）插入到容器里。

这里 h 函数就是创建虚拟节点的函数，接受三个参数 h(tag，props，children)，就相当于用 JS 表达 DOM 结构。

我们现在模拟一下这个场景：

  <body><div id="container"></div><button id="btn">改变</button></body><script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/h.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/snabbdom-class.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/snabbdom-eventlisteners.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/snabbdom-props.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/snabbdom-style.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/snabbdom.js"></script><script>// 引入 snabbdom 库const snabbdom = window.snabbdom;// 定义 patch 函数,将虚拟 DOM 插入到空容器const patch = snabbdom.init([snabbdom_class,snabbdom_props,snabbdom_style,snabbdom_eventlisteners,]);// 引入 h 函数,用于创建虚拟节点const h = snabbdom.h;// 创建空的容器const container = document.getElementById("container");// 创建vnode  h('ul#list',{},[]) 是说创建一个 ul 标签,id 是 list,没有属性,所以第二个参数为空对象{},然后子节点有多个 li 所以是个数组[]let vnode = h("ul#list", {}, [h("li.item", {}, "第一项"),  // 子节点 [] 的每一项又是一个 h 函数去创建节点h("li.item", {}, "第二项"),  // 这里表示创建 li 标签,类名为 item,没有属性,子节点是文本,所以是字符串]);// 把 vnode 塞入到容器patch(container, vnode);</script>

结果展示为：

此时点击按钮改变，将第二项内容改变，然后再加一个第三项：

    // 获取按钮节点const btn = document.getElementById("btn");btn.addEventListener("click", () => {// 创建新的 vnodelet newVnode = h("ul#list", {}, [h("li.item", {}, "第一项"),h("li.item", {}, "第二项123"),h("li.item", {}, "第三项"),]);// 将新的 vnode 替换原来的 vnodepatch(vnode, newVnode);// 将 vnode 赋值成最新的 newVnode，方便下次比较vnode = newVnode;});

展示结果：

会发现点击按钮以后，第二项和第三项闪动了一下，但是第一项没有，是因为第一项数据和结构都没有发生变化，所以不会去重新渲染第一项，只会去渲染第二项和第三项。 这就是使用虚拟DOM的好处，他会去比较变化，去计算出来一个最小的需要更新的视图。

为什么会这样呢？

这是旧的 DOM 结构对应的虚拟 DOM。

let oldVnode = h("ul#list", {}, [h("li.item", {}, "第一项"),h("li.item", {}, "第二项"),
]);

这是新的 DOM 结构对应的虚拟 DOM。 

let newVnode = h("ul#list", {}, [h("li.item", {}, "第一项"),h("li.item", {}, "第二项123"),h("li.item", {}, "第三项"),
]);

 Vue 并不会直接拿这个新的虚拟 DOM 去渲染成真实 DOM，因为这样效率不高。

由此图看，肯定是第二种方式比较快，因为第一种方式中间还夹杂着生成虚拟 DOM 的过程，所以此时还少了一部算法操作，就是 diff 算法，通过 diff 算法去计算出新旧两个虚拟 DOM 之间最小的变化，然后再去渲染真实 DOM，这一步也就是前文所说的计算变更，也是为什么第一项不闪动没有重新渲染的原因。

三.什么是 diff 算法

diff 算法就是对比两个虚拟节点，找出它们的差异，对应到真实 DOM 上面去打补丁的过程。目的是找到这些差异，以最小的代价去操作DOM。

上文中，只有第二个 li 标签修改了文本，新增了第三个 li 标签，其他都是不变的，所以没必要所有的节点都要更新，只更新这两个 li 标签就行，diff 算法就是查出这两个 li 标签的算法。

总结：diff 算法是一种对比算法。对比两者是旧虚拟 DOM 和新虚拟 DOM，对比出哪个虚拟节点更改了，找出这个虚拟机点，并且只更新这个虚拟节点所对应的真实节点，而不用更新其他数据没发生改变的节点，实现精准地更新真实 DOM，进而提高效率。

四.diff 算法特点

1.同层节点比较

新旧虚拟 DOM 对比的时候，diff 算法比较只会在同层级进行，不会跨级比较。

2.节点比较规则

生成虚拟 DOM 的时候每一个节点都是有索引的，类似于 v-for 循环生成时候的 key 值。对比新旧虚拟 DOM 的时候只有 key 相同的节点才会去进行对比。

这一点在以前将 v-if 的时候提到过一点。

这里就是利用 key 值不同，使新旧虚拟 DOM 的 input 标签不去进行对比，而是重新渲染。 

3. 最小更新子节点

在同一节点下，diff 算法会递归地比较和更新子节点，如果有相同的子节点，只是顺序不一样，diff 算法会复用旧节点，去替换而不是重新渲染。

 就比如这个 p 标签和 span 标签，在同一个 li 标签下，且新旧 p 节点和 span 节点完全一样，就不会重新渲染，只是替换一下它们的位置。

4.深度优先

diff 算法是深度优先算法。会优先往深度去比较，下图是顺序。

相关文章：

虚拟DOMdiff算法

一.什么是虚拟DOM&#xff1f; 虚拟DOM是 VUE 一个比较核心的概念&#xff0c;为什么会有虚拟DOM呢&#xff1f;首先可以与传统的网页开发做个对比&#xff0c;在没有 VUE 和 REACT 框架之前&#xff0c;我们都是使用原生 JavaScript 或者 jQuery&#xff0c;那时候是直接对 D…...

编程日记 2024/12/4 7:09:07

IDEA实现javaweb用户登录（增删改查）

IDEA实现javaweb用户登录&#xff08;增删改查&#xff09; 文章目录 IDEA实现javaweb用户登录&#xff08;增删改查&#xff09;前言一、IDEA 软件的简单使用1 创建一个普通 java 项目2 新增 web 配置将项目由普通的Java项目变为 javaweb项目2.1 新增 web 配置2.2 新增项目文件…...

编程日记 2024/12/4 7:07:05

JS进阶01-异步编程、跨域、懒加载

目录 一、异步编程 1.1.异步编程的基本概念与重要性 1.2.事件循环&#xff08;Event Loop&#xff09;机制 1.3.JavaScript异步编程的常见方式及详解 示例 1.4.异步编程的最佳实践 二、跨域 2.1.什么是跨域 2.2.怎么解决跨域 1. JSONP&#xff08;JSON with Padding&…...

编程日记 2024/12/4 7:05:02

2012年 数模美赛 C题 犯罪克星

一、问题重述 银河犯罪建模中心&#xff08;ICM&#xff09;正在调查一个犯罪阴谋。调查人员已经识别出一些阴谋成员&#xff0c;但希望在逮捕之前确定其他成员和领导人。所有嫌疑人和可能的同谋者都受雇于同一家公司&#xff0c;并在一个大的综合办公室里工作。该公司正在开发…...

编程日记 2024/12/4 7:04:01

社区团购中 2+1 链动模式商城小程序的创新融合与发展策略研究

摘要&#xff1a;本文聚焦于社区团购这一新兴零售模式的发展态势&#xff0c;深入探讨 21 链动模式商城小程序与之融合的创新机制与应用策略。通过剖析社区团购的运营模式、优势特点以及发展现状&#xff0c;结合 21 链动模式商城小程序的功能特性&#xff0c;研究二者协同作用…...

编程日记 2024/12/4 7:01:59

【Go底层】time包Ticker定时器原理

目录 1、背景2、go版本3、源码解释【1】Ticker结构【2】NewTicker函数解释 4、代码示例5、总结 1、背景 说到定时器我们一般想到的库是cron&#xff0c;但是对于一些简单的定时任务场景&#xff0c;标准库time包下提供的定时器就足够我们使用&#xff0c;本篇文章我们就来研究…...

编程日记 2024/12/4 7:00:58

RoBERTa- 稳健优化的 BERT 预训练模型详解

一、引言 自 BERT&#xff08;Bidirectional Encoder Representations from Transformers&#xff09;问世&#xff0c;预训练语言模型在自然语言处理&#xff08;NLP&#xff09;领域掀起革命浪潮&#xff0c;凭卓越表现大幅刷新诸多任务成绩。RoBERTa 承继 BERT 架构&#x…...

编程日记 2024/12/4 6:59:57

【C++】continue语句、goto语句

1、continue 语句 作用&#xff1a;在循环语句中&#xff0c;跳过本次循环中余下尚未执行的语句。继续下一次循环。 注意&#xff1a;continue只能用于循环中。 示例&#xff1a; 代码&#xff1a; //continue的用法 #include<iostream> using namespace std; int ma…...

编程日记 2024/12/4 6:54:53

postgresql与pgvector安装与使用

环境变量修改 打开 .bashrc 文件进行编辑&#xff1a; vim ~/.bashrc在文件的末尾添加上面的环境变量配置 # 添加 PostgreSQL 可执行文件路径到系统 PATH export PATH/home/....../pg/postgresql-12.4/bin:$PATH# 设置 PostgreSQL 数据目录 export PGDATA/home/....../pg/pos…...

编程日记 2024/12/4 6:53:52

开箱即用，阿里开源！专业AI 聊天界面工具包：Ant Design X

Ant Design X是一个基于Ant Design体系的创新解决方案&#xff0c;为构建高效的AI交互界面提供了便利和支持。从精细的原子组件到快速集成的模型服务&#xff0c;Ant Design X让开发者能轻松应对各种需求。本文将结合实际场景&#xff0c;展示Ant Design X的功能与使用方法。 为…...

编程日记 2024/12/4 6:51:50

详解版本控制工作原理及优势，常见的版本控制系统对比（HelixCore、Git、SVN等）

什么是版本控制软件&#xff1f;从基础层面来说&#xff0c;版本控制&#xff08;也可称版本管理&#xff09;就是随时间跟踪和管理文件变更的过程&#xff0c;而版本控制软件有助于实现这一过程的自动化。但这仅仅是其功能及其重要性的开端。 什么是版本控制&#xff1f; 版本…...

编程日记 2024/12/4 6:49:48

Vue2 vs Vue3：核心原理与性能优化详解

Vue2 vs Vue3&#xff1a;核心原理与性能优化详解 ​Vue.js 是目前主流的前端框架之一&#xff0c;随着 Vue3 的发布&#xff0c;框架内部的实现和使用方式都发生了显著变化。本文将从 Vue2 和 Vue3 的核心实现原理出发&#xff0c;详细解析两者的区别&#xff0c;并分析 Vue3…...

编程日记 2024/12/4 6:44:44

Qt+GDAL属性计算软件开发记录

一.GDAL添加字段 void MainWindow::addField(QString fieldName){OGRFieldDefn * fieldDefn new OGRFieldDefn(fieldName.toStdString().c_str(), OFTInteger);ly->CreateField(fieldDefn);srand((int)time(NULL));while (true){OGRFeature * feature ly->GetNextFeat…...

编程日记 2024/12/4 6:42:42

在超表面中琼斯矩阵的使用

琼斯矩阵&#xff08;Jones Matrix&#xff09; 是一种线性代数方法&#xff0c;用于描述光的偏振状态和偏振变化&#xff0c;是偏振光学中重要的数学工具。它在 超表面理论设计 中广泛应用&#xff0c;尤其是在设计和调控光与物质相互作用时&#xff0c;例如偏振控制、相位调制…...

编程日记 2024/12/4 6:41:41

在macOS上从源码部署RAGFlow-0.14.1

一、macOS配置 1. macOS配置 我使用MacBook Pro&#xff0c;chip 是 Apple M3 Pro&#xff0c;Memory是18GB&#xff0c;macOS是 Sonoma 14.6.1。 2.安装Docker和Docker compose 官方要求 Docker ≥ 24.0.0 & Docker Compose ≥ v2.26.1&#xff0c;我的版本如下&#x…...

编程日记 2024/12/4 6:39:39

2-2-18-9 QNX系统架构之文件系统（二）

阅读前言 本文以QNX系统官方的文档英文原版资料为参考&#xff0c;翻译和逐句校对后&#xff0c;对QNX操作系统的相关概念进行了深度整理&#xff0c;旨在帮助想要了解QNX的读者及开发者可以快速阅读&#xff0c;而不必查看晦涩难懂的英文原文&#xff0c;这些文章将会作为一个…...

编程日记 2024/12/4 6:38:36

【经管数据】上市公司企业审计报告时滞数据、 年报披露时滞数据（2001-2022年）

测算方式&#xff1a;参考C刊《审计研究》窦笑晨&#xff08;2022&#xff09;老师的研究&#xff0c;从审计报告约定披露日期到审计报告实际披露日期之间的时间间隔。有关审计报告时滞的度量&#xff0c;现有研究大多采用资产负债表日与审计报告实际披露日期之间的间隔天数进行…...

编程日记 2024/12/4 6:37:34

debian ubuntu armbian部署asp.net core 项目 开机自启动

我本地的环境是 rk3399机器&#xff0c;安装armbian系统。 1.安装.net core 组件 sudo apt-get update && \sudo apt-get install -y dotnet-sdk-8.0或者安装运行库&#xff0c;但无法生成编译项目 sudo apt-get update && \sudo apt-get install -y aspnet…...

编程日记 2024/12/4 6:36:33

无人机地面遥控遥测技术与算法概述！

一、地面系统遥控检测核心技术 卫星遥测技术&#xff1a; 定义&#xff1a;卫星遥测技术是实现卫星与地面之间遥测数据传输的关键环节。 功能&#xff1a;传输卫星的状态信息、传感器采集的环境参数等。 关键技术&#xff1a; 调制解调技术&#xff1a;用于将数字遥测数据…...

编程日记 2024/12/4 6:35:32

游戏引擎学习第30天

仓库: https://gitee.com/mrxiao_com/2d_game 回顾 在这段讨论中&#xff0c;重点是对开发过程中出现的游戏代码进行梳理和进一步优化的过程。 工作回顾&#xff1a;在第30天&#xff0c;回顾了前一天的工作&#xff0c;并提到今天的任务是继续从第29天的代码开始&#xff0c…...

编程日记 2024/12/4 6:34:31

终极无损视频剪辑神器：LosslessCut完整指南与5大实用技巧

终极无损视频剪辑神器&#xff1a;LosslessCut完整指南与5大实用技巧 【免费下载链接】lossless-cut The swiss army knife of lossless video/audio editing 项目地址: https://gitcode.com/gh_mirrors/lo/lossless-cut 你是否曾因视频剪辑导致画质下降而烦恼&#xff…...

编程新知 2026/3/31 10:00:21

突破内容壁垒：5大核心优势解锁知识自由

突破内容壁垒&#xff1a;5大核心优势解锁知识自由 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 在信息爆炸的数字时代&#xff0c;付费墙已成为获取优质内容的主要障碍。无论是学术…...

编程新知 2026/3/31 8:57:52

手把手教你用Flotherm做热管仿真

&#x1f393;作者简介&#xff1a;科技自媒体优质创作者 &#x1f310;个人主页&#xff1a;莱歌数字-CSDN博客 &#x1f48c;公众号&#xff1a;莱歌数字&#xff08;B站同名&#xff09; &#x1f4f1;个人微信&#xff1a;yanshanYH 211、985硕士&#xff0c;从业16年 从…...

编程新知 2026/3/31 7:19:08

vue基于springboot的高校二手书交易系统

目录同行可拿货,招校园代理 ,本人源头供货商功能模块分析交易流程模块后台管理模块技术实现要点扩展功能建议项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作同行可拿货,招校园代理 ,本人源头供货商 功能模块分析 用户管理模块…...

编程新知 2026/3/31 6:48:53

3分钟搞定跨平台：Whisky让你的Mac运行Windows应用零障碍

3分钟搞定跨平台&#xff1a;Whisky让你的Mac运行Windows应用零障碍 【免费下载链接】Whisky A modern Wine wrapper for macOS built with SwiftUI 项目地址: https://gitcode.com/gh_mirrors/wh/Whisky 你是否曾经在Mac上需要运行某个Windows专属软件而感到束手无策&a…...

编程新知 2026/3/31 6:46:53

Lingbot-Depth-Pretrain-ViTL-14 在AIGC领域的应用：为AI生成图像添加深度信息

Lingbot-Depth-Pretrain-ViTL-14 在AIGC领域的应用&#xff1a;为AI生成图像添加深度信息 最近在玩AI生成图片&#xff0c;大家是不是也遇到过这样的困惑&#xff1a;用Stable Diffusion、Midjourney这些工具生成了特别棒的二维画面&#xff0c;但总觉得少了点什么&#xff1f…...

编程新知 2026/3/31 5:54:30

避坑指南：GF-3 SAR数据预处理中常见的5个错误及解决方法

GF-3 SAR数据预处理实战&#xff1a;5个关键错误分析与Python解决方案 在遥感数据处理领域&#xff0c;GF-3卫星的合成孔径雷达(SAR)数据因其全天候、全天时的观测能力而备受青睐。然而&#xff0c;从原始数据到可用成果的预处理过程中&#xff0c;即便是经验丰富的工程师也常会…...

编程新知 2026/3/31 5:08:04

MATLAB图像处理实战：5分钟搞定腐蚀膨胀操作（附完整代码）

MATLAB图像形态学处理实战&#xff1a;从原理到代码实现 在数字图像处理领域&#xff0c;形态学操作就像一把精密的"手术刀"&#xff0c;能够对图像进行精细的"雕刻"和"修饰"。无论是去除噪点、填补空洞&#xff0c;还是分离粘连物体&#xff0c…...

编程新知 2026/3/31 4:39:16

嵌入式NTP客户端库：高精度时间同步与自动时区管理

1. NTP客户端库深度解析&#xff1a;嵌入式系统中的高精度时间同步与时区管理1.1 库定位与工程价值NTP&#xff08;Network Time Protocol&#xff09;客户端库是嵌入式系统中实现网络时间同步的关键组件。该库并非简单封装UDP通信&#xff0c;而是构建了一套完整的“时间服务栈…...

编程新知 2026/3/31 3:40:41

别只盯着Web日志！一次Windows服务器被黑，我是这样用系统日志和FTP记录挖出攻击链的

从Windows系统日志到FTP记录&#xff1a;一次完整的服务器入侵溯源实战 深夜的应急响应中心&#xff0c;刺眼的告警提示打破了宁静。大多数安全工程师的第一反应是打开Web访问日志开始排查——这几乎成了行业条件反射。但真实攻击往往发生在你最意想不到的角落。上周处理的一起…...

编程新知 2026/3/31 3:16:16