rrweb snapshot 核心机制解析
rrweb snapshot 是 rrweb 项目的核心模块，专门负责 DOM 的序列化与重建。它能够将网页当前的 DOM 状态转换为可序列化的数据结构，并支持从快照中完整重建 DOM。这项技术是网页录制和回放的关键基础，广泛应用于用户行为分析、BUG 重现、用户会话录制等场景。
核心功能概览
rrweb snapshot 模块主要提供两大能力：
- DOM 快照：遍历 DOM 树并将其转换为状态化、可序列化的数据结构。
- DOM 重建：根据快照数据重新构建出与原始一致的 DOM 结构。
该模块逻辑主要集中在 packages/rrweb-snapshot/ 目录下，其中 snapshot.ts 负责序列化逻辑，rebuild.ts 处理重建逻辑。
技术实现原理
DOM 序列化过程
在生成快照时，rrweb snapshot 会执行一系列关键操作来确保数据的完整性与安全性：
- 属性内联处理：将 DOM 状态内联到 HTML 属性中。例如，HTMLInputElement 的 value 值会被直接存储，确保表单状态能够被准确记录。
- 脚本安全处理：将 script 标签转换为 noscript 标签，防止脚本在重建时意外执行，保障回放环境的安全性。
- 样式表内联：尝试内联外部样式表，确保本地样式表能够在回放时正常使用，这对保持页面外观一致性至关重要。
- 路径转换：将 href、src 和 CSS 中的相对路径转换为绝对路径，避免资源加载失败的问题。
- 节点标识：为每个节点分配唯一 ID，并在快照完成后返回 ID 节点映射表，便于后续的增量更新和操作追踪。
DOM 重建机制
重建过程同样包含多项关键技术点：
- 数据属性标记：为 Element 节点添加 data-rrid 属性，用于标识和匹配原始节点。
- 额外 DOM 节点创建：创建文本节点等额外 DOM 节点来放置内联 CSS 和某些状态信息。
- 子节点索引标记：为具有额外子 DOM 的节点添加 data-extra-child-index 属性，确保 DOM 结构的准确性。
核心 API 详解
snapshot 方法
snapshot 方法是核心的序列化接口，接收 DOM 节点并返回包含完整 DOM 信息的序列化数据结构。该方法支持多种配置选项，包括屏蔽规则、样式表处理策略等，开发者可根据实际需求调整行为。
rebuild 方法
rebuild 方法负责从序列化数据重建 DOM，确保重建的 DOM 与原始状态完全一致，包括样式、布局和交互状态。这是实现'回放'效果的关键步骤。
工具函数
serializeNodeWithId：将单个节点序列化为带 ID 的快照格式。buildNodeWithSN：从序列化节点构建 DOM，并在 mirror.getMeta(node) 中存储序列化信息。
安全与性能考量
rrweb snapshot 在设计时充分考虑了安全性和性能表现：
- 安全隔离：通过转换 script 标签和谨慎处理动态内容，确保回放环境的安全性，避免恶意代码执行。
- 性能优化：采用高效的遍历算法和缓存机制，减少 DOM 操作的开销，提升快照生成速度。
- 内存管理：合理的序列化策略避免内存泄漏，确保大规模 DOM 树的处理效率。
实际应用场景
这项技术在实际项目中有着广泛的应用价值：
