核心原理
虚拟 DOM 在实现上通常是 Plain Object，以 React 为例，在 render 函数中写的 JSX 会在 Babel 插件的作用下，编译为 React.createElement
React.createElement 执行后会返回一个 Plain Object，它会描述自己的 tag 类型、props 属性以及 children 情况等
这些 Plain Object 通过树形结构组成一棵虚拟 DOM 树
当状态发生变更时，将变更前后的虚拟 DOM 树进行差异比较，这个过程称为 diff，生成的结果称为 patch
计算之后，会渲染 Patch 完成对真实 DOM 的操作
优缺点
优点
<b><font face="宋体">改善大规模 DOM 操作的性能</font></b>
<b><font face="宋体">规避 XSS 风险</font></b>
<b><font face="宋体">能以较低的成本实现跨平台开发</font></b>
缺点
<b><font face="宋体">内存占用较高</font></b>，因为需要模拟整个网页的真实 DOM
<b><font face="宋体">无法进行极致优化</font></b>。 虽然虚拟 DOM 足以应对绝大部分应用的性能需求，但在一些性能要求极高的应用中，虚拟 DOM 无法进行针对性的极致优化，比如实现类似 Google Earth 的场景
虚拟 DOM 一定比真实的 DOM 操作性能更高吗？
谈论优势时一定要讨论它的边界
如果大量的直接操作 DOM 则容易引起网页性能的下降，这时 React 基于虚拟 DOM 的 diff 处理与批处理操作，可以降低 DOM 的操作范围与频次，提升页面性能
首次渲染或微量操作，虚拟 DOM 的渲染速度就会比真实 DOM 更慢
虚拟 DOM 一定可以规避 XSS吗？
虚拟 DOM 内部确保了字符转义，所以确实可以做到这点，但 React 存在风险，因为 React 留有 dangerouslySetInnerHTML API 绕过转义
没有虚拟 DOM 不能实现跨平台吗？
比如 NativeScript 没有虚拟 DOM 层 ，它是通过提供兼容原生 API 的 JS API 实现跨平台开发
虚拟 DOM 的优势在哪里？
实际上它的优势在于跨平台的成本更低
在 React Native 之后，前端社区从虚拟 DOM 中体会到了跨平台的无限前景，所以在后续的发展中，都借鉴了虚拟 DOM
比如：社区流行的小程序同构方案，在构建过程中会提供类似虚拟 DOM 的结构描述对象，来支撑多端转换
除了渲染页面，虚拟 DOM 还有哪些应用场景？
通常而言，我们只是将虚拟 DOM 与渲染绑定在一起，但实际上虚拟 DOM 的应用更为广阔
比如，只要你记录了真实 DOM 变更，它甚至可以应用于埋点统计与数据记录等，<font color="#0076b3" style="">record and replay the web</font>
