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

虚拟DOMdiff算法

news 2025/11/6 6:15:34

一.什么是虚拟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

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2025/10/29 22:15:20

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

编程新知 2025/9/14 7:59:52

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2025/11/2 2:49:54

MVC 数据库

MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/10/30 4:58:11

css的定位（position）详解：相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

编程新知 2025/10/22 12:48:44

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2025/11/2 0:34:58

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

编程新知 2025/9/30 12:05:28

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

编程新知 2025/10/29 10:38:57

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

编程新知 2025/10/29 15:54:46

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来&#xff0c;一直在光谱成像领域深度钻研和发展&#xff0c;始终致力于研发高性能、高可靠性的光谱成像相机&#xff0c;为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...

编程新知 2025/11/1 12:32:15