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

Real DOM是浏览器中实际存在的文档对象模型，而Virtual DOM是React等库用来优化性能的一个抽象概念。虚拟DOM其实只是一个包含了标签类型type，属性props以及它包含子元素children的对象。

Real DOM（真实 DOM） 和 Virtual DOM（虚拟 DOM） 是前端开发中与页面渲染相关的核心概念，它们的区别和优缺点

Real DOM 的优缺点

优点：

直接控制：直接操作浏览器原生 API，适合简单场景或需要精准控制 DOM 的场合。

实时性：修改后立即生效，无需中间处理流程。

缺点：

性能瓶颈：频繁操作 DOM 会导致多次重绘（Repaint）和回流（Reflow），性能急剧下降。

开发复杂度高：需手动优化更新逻辑（如合并操作），代码易冗余。

跨平台限制：依赖浏览器环境，难以直接用于移动端或服务端渲染。

Virtual DOM 的优缺点

优点：

性能优化：通过 Diff 算法批量更新 DOM，减少直接操作次数。

//React 的 Diff 算法优先比对同层节点，避免全树遍历
const oldVDOM = { type: 'div', children: ['A'] };
const newVDOM = { type: 'div', children: ['B'] };
// 仅更新变化的节点，而非重建整个 DOM

 跨平台能力：虚拟 DOM 是纯 JS 对象，可适配服务端渲染（SSR）、移动端（如 React Native）等场景。

开发友好：开发者只需关注状态变化，无需手动优化 DOM 操作。

缺点：

内存占用：需额外维护虚拟 DOM 树，内存开销略增。

首次渲染较慢：初次生成虚拟 DOM 和 Diff 计算可能比直接操作 DOM 慢。

不适用简单场景：对于极少交互的静态页面，引入 Virtual DOM 反而增加复杂度。

虚拟DOM的优势是什么？

销毁重建与局部更新
渲染优化、异步渲染
跨平台能力 react，react Native

虚拟DOM比原生快吗？

虚拟dom性能真的比操作原生dom要更快吗？并不是，或者说不应该这样粗暴的去对比。
事实上我们并不会对原生dom属性进行递归对比，而是直接操作dom。而站在react角度，即便经历了diff算法以及一系列的优化，react到头来还是要操作原生dom，虚拟dom的核心目的是模拟了原生dom大部分特性，让研发高效无痛写html的同时，还达到了单点刷新而不是整个替换，最重要的，它也将研发从繁琐的dom操作中解放了出来。

Real DOM，真实 DOM，意思为文档对象模型，是一个结构化文本的抽象，在页面渲染出的每一个结点都是一个真实 DOM 结构
Virtual Dom，本质上是以 JavaScript 对象形式存在的对 DOM 的描述
创建虚拟 DOM 目的就是为了更好将虚拟的节点渲染到页面视图中，虚拟 DOM 对象的节点与真实 DOM 的属性一一照应
在 React 中，JSX 是其一大特性，可以让你在 JS 中通过使用 XML 的方式去直接声明界面的 DOM 结构

// 创建 h1 标签，右边千万不能加引号
const vDom = <h1>Hello World</h1>; 
// 找到 <div id="root"></div> 节点
const root = document.getElementById("root"); 
// 把创建的 h1 标签渲染到 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

VDOM 和真实DOM 的区别和优化：

虚拟DOM不会立马进行排版与重绘操作
虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分，最后在真实 DOM 中进行排版与重绘，减少过多DOM节点排版与重绘损耗
虚拟DOM有效降低大面积真实DOM的重绘与排版，因为最终与真实DOM比较差异，可以只渲染局部