Real DOM和 Virtual DOM 的区别？优缺点？

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

    <div id="app">
	    <div id="loader-wrapper">
        </div>
	</div>

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

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

在React中，JSX是其一大特性，可以让你在JS中通过使用XML的方式去直接声明界面的DOM结构

const vDom = <h1>Hello World</h1>
const root = document.getElementById('root')
ReactDOM.render(vDom, 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等

  第三个参数是节点中的文本

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

二、区别

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

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

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

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

Real DOM（真实DOM）

区别：

1. Real DOM 是浏览器中的实际的 DOM 结构，它是由浏览器根据 HTML 文档解析而来的。
2. 操作 Real DOM 会触发页面的重新渲染和重排，因为它直接操作的是浏览器中的实际 DOM 结构。

优点：

1. 可以直接操作真实的 DOM 结构，对于一些需要直接获取节点属性、操作样式等情况比较方便。
2. 在小型应用中，Real DOM 可能会更加快速，因为它不需要额外的虚拟 DOM 比较和更新的开销。

缺点：

1. 操作 Real DOM 会引起页面重绘和重排，性能较差，特别是在大型应用中。
2. 频繁的 DOM 操作会导致页面性能下降，因为每次 DOM 更新都会触发重新渲染。

Virtual DOM（虚拟DOM）

区别：

1. Virtual DOM 是一个虚拟的 DOM 树，它是框架或库中的一个 JavaScript 对象，用来表示真实 DOM 的状态。
2. 操作 Virtual DOM 不会直接触发页面的重新渲染，而是将对比和更新操作集中在 Virtual DOM 上。

优点：

1. 通过对比 Virtual DOM 的差异，可以最小化对真实 DOM 的操作，提高性能。
2. 可以实现批量更新，减少页面重绘的次数，提高用户体验。
3. 跨平台，因为 Virtual DOM 是在 JavaScript 层面实现的，可以在不同的环境中运行。

缺点：

1. 需要额外的开销来维护 Virtual DOM，包括创建、比较和更新。
2. 对于一些简单的页面，使用 Virtual DOM 可能会显得过于复杂。
3. 有一定的学习成本，需要理解 Virtual DOM 的工作原理和使用方法。