password
Created
Feb 19, 2023 04:52 PM
type
Post
status
Published
date
May 15, 2021
slug
summary
rrweb原理
tags
rrweb
category
工程化
icon
rrweb是什么
支持web端录制和回放的库
能够基于页面的操作进行录制, 保存操作行为记录之后可以进行回溯和回放
录制和回放的基本原理
快照 + oplog(操作记录)
rrweb为了减少页面状态保存的内存占用, 使用的是”增量记录”的方式来记录界面的变化
在初始状态时, 记录的是整个初始界面的DOM状态, 后续则记录的是某个DOM变化的增量快照, 一次减少大量的数据存储和传输
rweb组成部分
- rrweb-snapshot
- snapshot 遍历页面dom节点，返回当前页面DOM视图的一个序列化的数据结构
- resbuid 解析特定结构的数据，还原DOM，并插入到页面
- rrweb
- record 用于记录 DOM 中的所有变更
- replay 记录的变更按照对应的时间一一重放
- rrweb-replayer 为 rrweb 提供一套 UI 控件，提供基于 GUI 的暂停、快进、拖拽至任意时间点播放等功能。
rrweb-snapshot包
主要提供了snapshot和rebuild两个方法
snapshot
- 遍历DOM节点
为节点提供一个节点id, 并在快照完成的时候返回id的节点映射
id主要是为了方便后续的增量快照工作
- 处理路径
将相对路径处理为绝对路径, 方便记录和回放
- 将引用样式变为内联样式
主要是为了确保样式的正常使用, 避免回放的时候样式因为各种问题导致丢失
主要是通过CssStyleSheet.sheet.inserRule来插入页面样式
- 将DOM状态内联到HTML属性中
比如 input有value,. 那么会将value设置到imput节点上
- 将script标记为noscript
回放的时候并不需要脚本参与其中
rebuild
将节点数在转换成DOM
rrweb包
主要提供了record和replay方法
record
开始录制之后，会针对当前页面生成一个DOM 快照，然后开始监听用户操作和页面DOM的变化
监听DOM的变化: MutationObserver
监听鼠标的交互: mouseup mousemove mousedown click doubleclick focus blur touchstart touchmove rouchend等等时间
replay
解析收集到的events集合, 进行还原 回放
- 在沙盒中奖快照重建为对应的DOM树
- 将oplog按照时间戳排列, 将到时间的操作取出重现
性能优化
- 数据量大的问题
DOM变化时记录
数据分片记录
鼠标移动, 页面滚动等进行节流
数据压缩