面试官：说说 Real DOM和 Virtual DOM 的区别？优缺点？

￡神魔★判官ぃ 2022-10-09 04:57 185阅读 0赞

![a6c67d93a65b2927d781c2859807b445.png][]

## 一、是什么 ##

Real DOM，真实`DOM`， 意思为文档对象模型，是一个结构化文本的抽象，在页面渲染出的每一个结点都是一个真实`DOM`结构，如下：

![8e57a203744b591e606af3bd186009fb.png][]

`Virtual Dom`，本质上是以 `JavaScript` 对象形式存在的对 `DOM` 的描述

创建虚拟`DOM`目的就是为了更好将虚拟的节点渲染到页面视图中，虚拟`DOM`对象的节点与真实`DOM`的属性一一照应

在`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`节点插入到某个真实节点上，并渲染到页面上

`JSX`实际是一种语法糖，在使用过程中会被`babel`进行编译转化成`JS`代码，上述`VDOM`转化为如下：

const vDom = React.createElement(
      'h1'， 
      { className: 'hClass', id: 'hId' },
      'hello world'
    )

可以看到，`JSX`就是为了简化直接调用`React.createElement()` 方法：

*  第一个参数是标签名，例如h1、span、table...
 *  第二个参数是个对象，里面存着标签的一些属性，例如id、class等
    
    第三个参数是节点中的文本

通过`console.log(VDOM)`，则能够得到虚拟`VDOM`消息

![046ab13425a27d03040d3e5624f9a2b6.png][]

所以可以得到，`JSX`通过`babel`的方式转化成`React.createElement`执行，返回值是一个对象，也就是虚拟`DOM`

## 二、区别 ##

两者的区别如下：

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

拿[之前文章][Link 1]举过的例子：

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

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

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

## 三、优缺点 ##

真实`DOM`的优势：

*  易用

缺点：

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

使用虚拟`DOM`的优势如下：

*  简单方便：如果使用手动操作真实`DOM`来完成页面，繁琐又容易出错，在大规模应用下维护起来也很困难
 *  性能方面：使用Virtual DOM，能够有效避免真实DOM数频繁更新，减少多次引起重绘与回流，提高性能
 *  跨平台：React借助虚拟DOM， 带来了跨平台的能力，一套代码多端运行

缺点：

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

## 参考文献 ##

*  https://juejin.cn/post/6844904052971536391
 *  https://www.html.cn/qa/other/22832.html

\--The End--

系列正在更新：2/33

点击下方卡片解锁更多

![adaec77ef13cf585c7dca01f1b386451.png][]

创作不易，星标、点赞、在看 三连支持

[a6c67d93a65b2927d781c2859807b445.png]: /images/20221005/11e7feceba3b491994012cc742f0d82b.png
[8e57a203744b591e606af3bd186009fb.png]: /images/20221005/1c84e229c2da478f99fe5c9b100d946e.png
[046ab13425a27d03040d3e5624f9a2b6.png]: /images/20221005/047f44113bc2410f8a3717c4d25e6a85.png
[Link 1]: https://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c632cb674f2484fdf914d76fba55afcefca3b5adcbe6cf4b0c7fd36e29d0292e8cefceb5&cur_album_id=1711105826272116736&idx=1&mid=2247484516&scene=21&sn=965a4ce32bf93adb9ed112922c5cb8f5#wechat_redirect
[adaec77ef13cf585c7dca01f1b386451.png]: /images/20221005/4a09e515282f4589a638880f0ef88e6c.png