理解虚拟DOM和Diff算法 - 小白入门第一课
开篇故事：装修房子的启发
想象一下，你要重新装修你的房间。有两种方式：
方式一：推倒重来
- 把房间里的所有东西都扔掉
- 重新买新家具
- 重新装修布置
方式二：精准更新
- 列一个清单，记录现在有什么
- 再列一个清单，记录想要什么
- 对比两个清单，只更换需要改变的部分
显然，第二种方式更省时省力省钱。这就是Diff算法的核心思想！
一、为什么需要虚拟DOM？
1.1 直接操作DOM的痛点
先看一个简单的例子：
<!-- 一个简单的用户列表 -->
<ul id="userList">
<li>张三 - 在线</li>
<li>李四 - 离线</li>
<li>王五 - 在线</li>
</ul>
现在李四上线了，我们需要更新状态：
// 方法1：暴力更新（就像推倒重建）
document.getElementById('userList').innerHTML = `
<li>张三 - 在线</li>
<li>李四 - 在线</li>
<li>王五 - 在线</li>
`;
// 方法2：精准更新（就像只换需要换的）
document.querySelectorAll('li')[1].textContent = '李四 - 在线';
看起来方法2更好对吧？但是当页面变复杂时，追踪哪里需要更新会变得非常困难。
1.2 虚拟DOM横空出世
虚拟DOM就像是我们装修房间时列的清单：
// 真实DOM（实际的房间）
<div id="app">
<h1>标题</h1>
<p>内容</p>
</div>
// 虚拟DOM（房间清单）
{
type: 'div',
props: { id: 'app' },
children: [
{ type: 'h1', children: '标题' },
{ type: 'p', children: '内容' }
]
}
二、虚拟DOM是什么？
2.1 本质：就是JavaScript对象
虚拟DOM并不神秘，它就是用JS对象来描述DOM结构：
// 这是一个按钮的虚拟DOM表示
const virtualButton = {
type: 'button', // 标签类型
props: { // 属性
className: 'btn-primary',
onClick: handleClick
},
children: '点击我' // 子内容
};
// 对应的真实DOM
<button class="btn-primary" onclick="handleClick">点击我</button>
2.2 为什么用对象描述DOM？
用乐高积木来理解：
- 真实DOM = 已经拼好的乐高模型（很重，改动成本高）
- 虚拟DOM = 乐高说明书（很轻，改动成本低）
修改说明书（虚拟DOM）比拆装乐高模型（真实DOM）容易多了！
三、什么是Diff算法？
3.1 Diff = Different（找不同）
还记得小时候玩的"找不同"游戏吗？
图片A：🏠 🌳 🚗 🐕 ☀️
图片B：🏠 🌳 🚗 🐈 ☀️
不同之处：狗变成了猫
Diff算法做的就是这个工作——找出两个虚拟DOM树的不同之处。
3.2 Diff算法的工作流程
// 步骤1：创建虚拟DOM（拍第一张照片）
const oldVDOM = {
type: 'ul',
children: [
{ type: 'li', children: '苹果' },
{ type: 'li', children: '香蕉' },
{ type: 'li', children: '橙子' }
]
};
// 步骤2：状态改变，生成新虚拟DOM（拍第二张照片）
const newVDOM = {
type: 'ul',
children: [
{ type: 'li', children: '苹果' },
{ type: 'li', children: '香蕉' },
{ type: 'li', children: '芒果' } // 橙子变成了芒果
]
};
// 步骤3：Diff算法找不同
// 发现：第3个li的内容从"橙子"变成了"芒果"
// 步骤4：只更新变化的部分
document.querySelectorAll('li')[2].textContent = '芒果';
四、用代码实现一个简单的Diff
让我们实现一个超级简单的Diff算法，加深理解：
// 简单的虚拟DOM节点
class VNode {
constructor(type, props, children) {
this.type = type; // 标签类型：'div', 'span'等
this.props = props; // 属性：class, id等
this.children = children; // 子节点
}
}
// 创建真实DOM
function createElement(vnode) {
// 如果是文本节点
if (typeof vnode === 'string') {
return document.createTextNode(vnode);
}
// 创建元素
const element = document.createElement(vnode.type);
// 设置属性
if (vnode.props) {
Object.keys(vnode.props).forEach(key => {
element.setAttribute(key, vnode.props[key]);
});
}
// 递归创建子节点
if (vnode.children) {
vnode.children.forEach(child => {
element.appendChild(createElement(child));
});
}
return element;
}
// 简单的Diff算法
function simpleDiff(oldVNode, newVNode, container) {
// 场景1：旧节点不存在，直接创建新节点
if (!oldVNode) {
container.appendChild(createElement(newVNode));
return;
}
// 场景2：新节点不存在，删除旧节点
if (!newVNode) {
container.removeChild(container.firstChild);
return;
}
// 场景3：节点类型不同，替换节点
if (oldVNode.type !== newVNode.type) {
container.replaceChild(
createElement(newVNode),
container.firstChild
);
return;
}
// 场景4：文本节点，直接更新内容
if (typeof oldVNode === 'string' && typeof newVNode === 'string') {
if (oldVNode !== newVNode) {
container.firstChild.textContent = newVNode;
}
return;
}
// 场景5：同类型节点，递归比较子节点
const oldChildren = oldVNode.children || [];
const newChildren = newVNode.children || [];
const commonLength = Math.min(oldChildren.length, newChildren.length);
// 比较公共部分
for (let i = 0; i < commonLength; i++) {
simpleDiff(
oldChildren[i],
newChildren[i],
container.firstChild.childNodes[i]
);
}
// 处理新增节点
if (newChildren.length > oldChildren.length) {
newChildren.slice(commonLength).forEach(child => {
container.firstChild.appendChild(createElement(child));
});
}
// 处理删除节点
if (oldChildren.length > newChildren.length) {
for (let i = oldChildren.length - 1; i >= commonLength; i--) {
container.firstChild.removeChild(
container.firstChild.lastChild
);
}
}
}
五、Diff算法的核心原则
5.1 同层比较
Diff算法只比较同一层级的节点，不会跨层级比较：
旧树： 新树：
A A
/ \ / \
B C D C
/
B
Diff不会发现B从A的子节点移动到了D的子节点
它只会认为：
- A的第一个子节点从B变成了D
- D多了一个子节点B
为什么这样设计？因为跨层级移动在实际开发中很少见，这样可以大大降低算法复杂度。
5.2 利用key优化
key就像是节点的身份证：
// 没有key的情况
旧：[<li>苹果</li>, <li>香蕉</li>, <li>橙子</li>]
新：[<li>香蕉</li>, <li>苹果</li>, <li>橙子</li>]
// Diff会认为：
// 1. 第一个li从"苹果"变成"香蕉"
// 2. 第二个li从"香蕉"变成"苹果"
// 结果：更新两个节点的内容
// 有key的情况
旧：[<li key="a">苹果</li>, <li key="b">香蕉</li>, <li key="c">橙子</li>]
新：[<li key="b">香蕉</li>, <li key="a">苹果</li>, <li key="c">橙子</li>]
// Diff会认为：
// 1. key为"b"的节点移动到了第一位
// 2. key为"a"的节点移动到了第二位
// 结果：只需要移动节点位置，不用更新内容
六、性能对比实验
让我们做个实验，直观感受Diff算法的威力：
<!DOCTYPE html>
<html>
<head>
<title>Diff算法性能测试</title>
</head>
<body>
<button onclick="testWithoutDiff()">不用Diff更新1000个节点</button>
<button onclick="testWithDiff()">使用Diff更新1000个节点</button>
<div id="container"></div>
<script>
// 不使用Diff：每次全部重新渲染
function testWithoutDiff() {
const start = performance.now();
const container = document.getElementById('container');
let html = '<ul>';
for (let i = 0; i < 1000; i++) {
// 只有第500个节点的内容变化了
const content = i === 500 ? '我变了！' : `项目${i}`;
html += `<li>${content}</li>`;
}
html += '</ul>';
container.innerHTML = html;
const end = performance.now();
console.log(`不使用Diff耗时：${end - start}ms`);
}
// 使用Diff思想：只更新变化的部分
function testWithDiff() {
const start = performance.now();
const container = document.getElementById('container');
// 如果已经有列表，只更新第500个
const existingList = container.querySelector('ul');
if (existingList) {
existingList.children[500].textContent = '我又变了！';
} else {
// 首次创建
let html = '<ul>';
for (let i = 0; i < 1000; i++) {
html += `<li>项目${i}</li>`;
}
html += '</ul>';
container.innerHTML = html;
}
const end = performance.now();
console.log(`使用Diff思想耗时：${end - start}ms`);
}
</script>
</body>
</html>
运行这个实验，你会发现使用Diff思想的更新速度快得多！
七、总结
通过这篇文章，我们学习了：
- 虚拟DOM是什么：用JavaScript对象描述DOM结构
- 为什么需要虚拟DOM：操作JS对象比操作真实DOM快得多
- Diff算法是什么：找出两个虚拟DOM树的差异
- Diff算法的原则：同层比较、利用key优化
- 性能提升的原理：只更新真正变化的部分
下期预告
下一篇我们将深入Vue2的Diff算法实现细节，看看Vue2是如何通过"双端比较"算法来高效地找出变化的。我会用更多图解和实例，确保你能完全理解！
记住：理解原理不是为了炫耀，而是为了在遇到性能问题时，知道如何优化你的代码。
