虚拟DOM和Diff算法通过JavaScript对象描述UI结构，利用同层比较与key优化实现最小化真实DOM操作，提升复杂应用的渲染性能。
虚拟DOM（Virtual DOM）和Diff算法是现代JavaScript框架（如React、Vue等）实现高效UI更新的核心机制。理解其原理有助于掌握框架的渲染优化逻辑，并提升开发中的性能意识。
什么是Virtual DOM？
Virtual DOM 是对真实DOM的轻量级抽象，本质上是一个用JavaScript对象描述的DOM结构。
比如一个真实DOM节点：
const realNode = <div class="box"><p>Hello</p></div>;对应的Virtual DOM可能是这样的JS对象：
立即学习“Java免费学习笔记（深入）”；
const vnode = { tag: 'div', props: { className: 'box' }, children: [ { tag: 'p', props: {}, children: ['Hello'] } ] };通过这种方式，框架可以在内存中构建UI的“影子”，避免频繁操作真实DOM带来的性能损耗。
为什么需要Virtual DOM？
直接操作真实DOM成本高，尤其是在频繁更新的场景下。浏览器的重排（reflow）和重绘（repaint）会严重影响性能。
Virtual DOM 的优势在于：
- 批量更新：将多次变更收集后统一应用到真实DOM
- 减少操作次数：通过Diff算法找出最小变更集
- 跨平台能力：Virtual DOM可渲染到Web、移动端或服务端（SSR）
Diff算法的基本实现思路
当组件状态变化时，框架会生成新的Virtual DOM树，然后与旧树进行对比，找出需要更新的部分。这个过程就是Diff算法。
主流框架采用同层比较策略来降低复杂度，即只在同一层级的节点之间进行比较，时间复杂度从O(n³)降至O(n)。
一个简化的Diff实现步骤如下：
- 节点类型不同：直接替换整个子树
- 标签相同但属性不同：更新属性
- 文本节点：比较文本内容
- 子节点对比：遍历新旧子节点列表，根据key进行匹配复用
示例代码片段：
function diff(oldVNode, newVNode, container) { if (oldVNode.tag !== newVNode.tag) { // 标签不同，替换 container.replaceChild(createElement(newVNode), oldVNode.el); } else { // 相同标签，更新属性和子节点 const el = newVNode.el = oldVNode.el; patchProps(el, oldVNode.props, newVNode.props); diffChildren(el, oldVNode.children, newVNode.children); } }Key的作用与优化
在列表渲染中，添加key属性能帮助框架识别节点的唯一性，避免不必要的重新创建。
例如：
[ { key: 'a', tag: 'li', children: ['A'] }, { key: 'b', tag: 'li', children: ['B'] } ]如果顺序调换，有key的情况下只会移动DOM节点；无key则可能错误复用，导致状态错乱或性能下降。
基本上就这些。Virtual DOM和Diff算法不是为了“更快地操作DOM”，而是提供一种声明式、可预测且可优化的UI更新模型。虽然现代浏览器性能提升让直接操作DOM的差距缩小，但在复杂应用中，这套机制依然能有效控制渲染成本。
