虚拟dom是通过js计算生成的一种对dom元素的描述主要有type类型 element元素和children属性为什么快1.因为它不直接操作真实dom元素只通过diff对比来找出新旧VNode树的最小化差异然后一次性批量操作dom2.虚拟dom是通过js计算得出的可以渲染不同目标3. 不用手动优化dom框架直接构建DIff算法diff算法是对新建VNode树进行差异性对比找出最少更改dom的策略react的diff采用同级对比的策略tree diff 只对同级节点进行比较跨层级移动会被视为删除新建不会复用。优化手段尽量避免跨层级移动必要时可用 CSS 显隐替代component diff :同类型组件继续 diff 其子树并保留组件实例shouldComponentUpdate可做优化。不同类型组件直接删除旧组件及其 DOM 节点创建新组件。element diff 同层元素列表比较默认通过key标识节点没有key或索引key会导致低效的原地更新。流程新旧列表从头比较找到差异移动、插入、删除利用key可以最小化 DOM 操作注意并不是说虚拟dom就一定比操作真实dom快需要注意区分场景虚拟DOM从来不是为了“比操作真实DOM更快”而诞生的它的核心价值在于“让复杂的UI开发更可控、更可维护1. 单次操作直接操作真实DOM更好如果你只更新一个文本节点或修改一个元素的样式直接使用document.getElementById(id).innerText 新内容比虚拟DOM快得多。真实DOM操作浏览器直接调用底层引擎C修改渲染树路径极短。虚拟DOM操作JS必须先生成新的JS对象虚拟DOM然后与旧对象进行Diff比对再算出差异最后才把这个差异映射到真实DOM上。这多出了“创建对象”和“递归比对”两个极其消耗CPU的步骤JS层计算远比浏览器原生渲染慢。2. 频繁的批量操作虚拟DOM有优势但并非“最快”当你在一个循环中连续修改1000个数据时虚拟DOM的优势才显现出来。它不会每修改一次就刷新一次屏幕而是将1000次修改汇总进行一次性的Diff计算最后只更新变化的部分最小化回流和重绘。但请注意即使在这个场景下虚拟DOM也不是最快的。如果手写优化代码使用DocumentFragment文档片段批量添加节点或者直接操作innerHTML替换整个片段速度依然会快于虚拟DOM。虚拟DOM的快是相对于“无脑频繁操作真实DOM导致页面疯狂重绘”而言的“相对快”。3. 虚拟DOM真正被创造出来是为了什么既然不是速度为什么React、Vue还要用它核心原因是“跨越平台”和“开发效率”。跨平台虚拟DOM本质是JS对象。在浏览器里它映射成DOM在手机上React Native它映射成原生UI组件在服务端它映射成HTML字符串。真实DOM操作在Node.js环境里根本跑不起来但虚拟DOM可以。声明式开发你只需要声明“UI长什么样”框架自动帮你处理“如何更新”。开发者不再需要手动管理创建、删除、修改节点的繁琐过程这极大减少了人为Bug提升了开发速度。这是一种“用性能换体验”的经典权衡。