2024-02-27发表4 分钟读完 (大约575个字)

为什么需要虚拟DOM

先说结论：

操作真实 DOM 的代价是巨大的
虚拟 DOM 为框架自动优化 DOM 操作提供了可能

什么是虚拟 DOM

以 JS 的形式描述真实的 DOM 结构。

操作真实 DOM 存在什么问题

从浏览器内核结构来说，在内存中，DOM 模块独占一块内存，这和 JS 引擎所管理的内存并无直接关系，也就是说 JS 引擎不能直接操作真实 DOM 树。
为了给 JS 提供操作 DOM 树的能力，浏览器在全局对象上为 JS 封装了一个document对象，该对象上封装了大量操作 DOM 的接口，这些接口都是 c++实现的。

1	window.document.getElementById();

当我们调用这个函数时，JS 引擎没有直接和 DOM 操作交互，而是由浏览器来操作 DOM，再由浏览器把操作结果返回给 JS 引擎。所以我们说操作真实 DOM 的代价是比较大的（还涉及到 c++和 javascript 数据结构转换的问题）。

早期模板引擎(EJS)存在的问题

模板引擎的思想，让我们只需要关注数据层的变化。但是还存在以下问题：

每次数据变化都是重新渲染整个列表视图
当数据量巨大时，性能不尽人意

虚拟 DOM 解决了什么问题

为了解决模板引擎的问题，虚拟 DOM 出生了。
既然模板解决方案每次数据变化都是重新渲染整个列表视图，那只操作变化部分的 DOM 不就好了。既然操作真实 DOM 性能损耗巨大，那操作假的不就好了。
对比下：

模板引擎的渲染：数据 + 模板 –> 直接渲染为真实 DOM –> 挂载至页面
虚拟 DOM 的渲染：数据 + 模板 –> 虚拟 DOM –> 真实 DOM –> 挂载至页面

虚拟 DOM 带来的好处

页面性能的提升：只处理变化的 DOM，减少操作真实 DOM 的次数
开发效率的提升：react 中的 jsx、vue 模板语法
跨平台得以实现：一份代码，多端使用

#react