桑榆的个人博客

Appearance

📝 虚拟dom面试笔记 ​

✍️ 作者：桑榆
🕓 更新时间：2025-11-08 🧠 关键词：虚拟dom、diff算法、性能优化

🧩 一、什么是虚拟 DOM（Virtual DOM） ​

简洁定义：

虚拟 DOM 是 真实 DOM 的 JavaScript 对象映射， 用 JS 对象来描述页面结构，当数据变化时， 先在内存中对虚拟 DOM 进行计算，再更新需要变化的部分到真实 DOM。

🧠 二、一句话理解 ​

真实 DOM 操作很慢，而操作 JS 对象很快。

所以 React / Vue 先用 JS 模拟一棵“虚拟 DOM 树”，

当数据变化时，对比前后两棵树（Diff），

只更新必要的部分 —— 提升性能。

⚙️ 三、简单例子 ​

假设你有以下真实 DOM：

html
<div id="app">
  <p>Hello</p>
</div>

它的虚拟 DOM 表示大概是：

js
const vdom = {
  tag: 'div',
  props: { id: 'app' },
  children: [
    { tag: 'p', children: ['Hello'] }
  ]
};

当数据变为 “Hello World” 时，框架会：

  1. 重新生成一个新的虚拟 DOM；
  2. 用 Diff 算法 比较新旧树；
  3. 只修改 <p> 里的文本节点，而不是整个 DOM。

🧮 四、为什么要有虚拟 DOM？ ​

传统方式问题虚拟dom的改进
直接操作真实dom频繁重绘、性能差先在内存判断，再批量更新
手动管理dom代码复杂、易出错框架统一管理DOM更新
跨平台困难只能操作浏览器DOM虚拟DOM可跨平台（如SSR、原生、小程序）

🧩 五、虚拟 DOM 的核心过程 ​

    1. 渲染阶段：数据生成虚拟 DOM；
    1. Diff 阶段：比较新旧虚拟 DOM；
    1. Patch 阶段：更新真实 DOM。

💬 六、常见面试题汇总 ​

✅ 1. 什么是虚拟 DOM？为什么要用它？ ​

虚拟 DOM 是对真实 DOM 的轻量级抽象，用 JS 对象表示。 它减少了直接操作真实 DOM 的次数，从而提升性能。

✅ 2. 虚拟 DOM 一定比真实 DOM 快吗？ ​

❌ 不一定！ 小规模更新时，直接操作真实 DOM 可能更快。 但在复杂 UI、大量节点更新时，虚拟 DOM 的 批量更新 + Diff 算法 优势明显。

✅ 3. 虚拟 DOM 的 Diff 算法是怎么工作的？ ​

React/Vue 采用 同层比较 + key 对比 的优化策略：

  • 比较同层节点（忽略跨层移动）；
  • 通过 key 快速定位变化的节点；
  • 只更新发生变化的部分。

✅ 4. Vue2 / React 的虚拟 DOM 更新流程？ ​

  1. 数据变化 → 触发组件重新渲染；
  2. 生成新虚拟 DOM；
  3. 对比新旧虚拟 DOM；
  4. 执行最小化的真实 DOM 更新。

✅ 5. Vue3 为什么性能更好？ ​

Vue3 使用 编译时优化 + 静态节点提升， 减少虚拟 DOM 的创建与对比次数。