Virtual DOM 的工作原理
2021-03-31 17:44:40 0 举报AI智能生成
登录查看完整内容
Virtual DOM
作者其他创作
大纲/内容
Virtual DOM 的工作原理
概览
通过 JS 对象模拟 DOM 的节点
用途
提升代码抽象能力
简化前端开发，快速交付页面
避免人为的 DOM 操作
降低代码整体风险等
避免跨站点脚本攻击，也就是常说的 XSS
核心原理
虚拟 DOM 在实现上通常是 Plain Object，以 React 为例，在 render 函数中写的 JSX 会在 Babel 插件的作用下，编译为 React.createElement
React.createElement 执行后会返回一个 Plain Object，它会描述自己的 tag 类型、props 属性以及 children 情况等
这些 Plain Object 通过树形结构组成一棵虚拟 DOM 树
当状态发生变更时，将变更前后的虚拟 DOM 树进行差异比较，这个过程称为 diff，生成的结果称为 patch
计算之后，会渲染 Patch 完成对真实 DOM 的操作
优缺点
优点
改善大规模 DOM 操作的性能
规避 XSS 风险
能以较低的成本实现跨平台开发
缺点
内存占用较高，因为需要模拟整个网页的真实 DOM
无法进行极致优化。 虽然虚拟 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 变更，它甚至可以应用于埋点统计与数据记录等，record and replay the web
record and replay the web
收藏
收藏
职业：暂无
0 条评论
回复 删除
下一页
