Skip to main content

真实 DOM 与虚拟 DOM

一、真实 DOM（Real DOM）​

DOM / 真实 DOM 即为文档对象模型，是一个结构化文本的抽象，在页面渲染出的每一个结点都是一个真实 DOM 结构，例如：

<div id="root">
  <h1>Hello World</h1>
</div>

1、Real DOM 优势​

  • 易用。

2、Real DOM 缺点​

  • 效率低，解析速度慢，内存占用量过高；
  • 性能差，频繁操作真实 DOM，导致频繁的重绘与回流。

二、虚拟 DOM（Virtual DOM）​

虚拟 DOM 是 JS 模拟的 DOM 结构，是真实 DOM 的抽象。

创建虚拟 DOM 目的是为了更好的将虚拟节点渲染到页面中，避免 DOM 树的频繁更新。

虚拟 DOM 通过 JS 的对象模拟 DOM 中的节点，然后通过特定的 render 方法将它渲染成真实的节点，数据更新时，渲染得到新的 虚拟 DOM，与上一次得到的虚拟 DOM 进行 diff，得到所有需要在 DOM 上进行的变更，然后在 patch 过程中应用到 DOM 上实现 UI 的同步更新。

React 的 JSX 可以在 JS 中通过使用 XML 的方式去直接声明界面的 DOM 结构：

const vDom = <h1>Hello World</h1>             // 创建 h1 标签，等号右边不能加引号
const root = document.getElementById('root')  // 找到 <div id="root"></div> 节点
ReactDOM.render(vDom, root)                   // 把创建的 h1 标签渲染到 root 节点上

上面的 ReactDOM.render() 用于将创建好的虚拟 DOM 节点插入到某个真实节点上，并渲染到页面中。

1、Virtual DOM 优势​

  • 简单易用：手动操作真实 DOM 来完成页面繁琐且容易出错，在大规模项目下维护成本高；
  • 性能高：使用虚拟 DOM 能有效避免真实 DOM 树的频繁更新，减少重绘与回流，提高性能；
  • 跨平台：React 借助虚拟 DOM 带来了跨平台的能力，一套代码多端运行。

2、Virtual DOM 缺点​

  • 在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化；
  • 首次渲染大量 DOM 时，由于多了一层虚拟 DOM 的计算，速度稍慢。

三、真实 DOM 与虚拟 DOM 的区别​

  • 虚拟 DOM 不会进行排版与重绘操作，而真实 DOM 会频繁重排与重绘；
  • 虚拟 DOM 的总损耗是【 虚拟 DOM 增删改 + 真实 DOM 差异增删改 + 排版与重绘 】，真实 DOM 的总损耗是【 真实 DOM 完全增删改 + 排版与重绘 】

举个例子：

传统的原生 api 或 jQuery 操作 DOM 时，浏览器会从构建 DOM 树开始从头到尾执行一遍流程。

当操作一次时，需要更新 10 个 DOM 节点，浏览器收到第一个更新 DOM 请求后并不知道后续还有 9 次更新操作，因此会马上执行流程，最终执行 10 次全流程；

而通过虚拟 DOM，同样更新 10 个 DOM 节点，虚拟 DOM 不会立即操作 DOM，而是将这 10 次更新的 diff 内容保存到本地的一个 JS 对象中，最终将这个 JS 对象一次性 attach 到 DOM 树上，避免大量的无谓计算。