虚拟dom通过javaScript对象模拟DOM结构，结合diff算法高效比对变化并批量更新真实DOM。1. 虚拟DOM是轻量的js对象，描述真实DOM结构；2. diff算法采用分层对比、类型不同则替换整树、列表依赖key识别节点复用等策略；3. 有key时能精准识别节点移动而非重建；4. 简易实现包括创建vnode、render生成真实DOM、patch对比更新；5. 实际框架在此基础上加入调度与批处理机制；6. 理解原理有助于优化组件性能，如合理使用key避免不必要渲染。
DOM diff算法和虚拟DOM是前端框架高效更新页面的核心机制。直接操作真实DOM成本高，频繁修改会导致性能问题。虚拟DOM通过在javascript中模拟DOM结构，结合diff算法比对变化，最终批量更新真实DOM，提升渲染效率。
虚拟DOM的基本概念
虚拟DOM（Virtual DOM）是一个轻量的、用JavaScript对象表示的DOM树。它不直接绘制到页面，而是作为真实DOM的“影子”存在。
例如，一个简单的DOM节点：
{
tag: ‘div’,
props: { className: ‘container’ },
children: [
{ tag: ‘p’, props: {}, children: [‘Hello’] }
]
}
这个对象描述了一个div元素，包含一个p标签子节点。通过递归遍历该对象，可以生成或更新真实DOM。
立即学习“Java免费学习笔记（深入）”；
DOM diff算法的核心策略
diff算法的目标是高效找出新旧虚拟DOM之间的差异。主流实现采用分层对比与关键优化策略：
- 只比较同一层级：不跨层级移动元素，减少复杂度到O(n)
- 类型不同则替换整棵子树：如果tag或组件类型改变，直接重建对应DOM
- 列表对比依赖key：通过唯一key识别节点是否可复用，避免不必要的重新渲染
比如两个列表：
// 旧
[<li key=”a”>A</li>, <li key=”b”>B</li>]
// 新
[<li key=”b”>B</li>, <li key=”a”>A</li>]
有key的情况下，算法知道只是顺序调换，无需重新创建li元素。
简易虚拟DOM实现示例
以下是一个极简版虚拟DOM与diff流程的实现：
// 创建虚拟节点
function h(tag, props, children) {
return { tag, props, children };
}
// 渲染为真实DOM
function render(vnode) {
if (typeof vnode === ‘String’) {
return document.createTextNode(vnode);
}
const el = document.createElement(vnode.tag);
// 设置属性
if (vnode.props) {
Object.keys(vnode.props).foreach(k => {
el.setAttribute(k, vnode.props[k]);
});
}
// 递归渲染子节点
if (vnode.children) {
vnode.children.forEach(child => {
el.appendChild(render(child));
});
}
return el;
}
// 对比并更新（简化版）
function patch(oldNode, newNode) {
if (typeof oldNode === ‘string’ || typeof newNode === ‘string’) {
if (oldNode !== newNode) {
oldNode.parentNode.replaceChild(render(newNode), oldNode);
}
return;
}
if (oldNode.tag !== newNode.tag) {
oldNode.parentNode.replaceChild(render(newNode), oldNode);
return;
}
// 更新属性
const el = oldNode;
// ……省略属性diff逻辑
// 子节点diff（简化为全量替换）
if (newNode.children) {
let childIndex = 0;
newNode.children.forEach(newChild => {
const oldChild = oldNode.childNodes[childIndex];
if (oldChild) {
patch(oldChild, newChild);
} else {
el.appendChild(render(newChild));
}
childIndex++;
});
}
}
实际框架如react、vue会在此基础上加入调度、批处理、副作用管理等机制，但核心思想一致。
基本上就这些。理解虚拟DOM和diff算法，有助于写出更高效的组件，比如合理使用key、避免不必要的渲染。虽然现代框架封装了细节，底层原理依然影响着应用性能表现。