“我正在参加「掘金·启航计划」”
前言
前面的文章说完了rrweb录制部分的实现，那在拿到录制的快照之后rrweb又是如何把它们还原的呢？
在看rrweb的实现之前不妨思考下，我们已经获取了页面的节点以及每次的变化，那我们是不是只需要重新绘制一下节点，然后在对应的时间绘制变化内容就可以了。
rrweb实现回放时先会创建一个沙箱环境，接着重建document全量快照，然后用requestAnimationFrame模拟定时器来播放增量快照。
用大白话来说，回放的过程就是按时间顺序对上节我们获取处理过的页面快照进行还原，这个还原其实就是节点操作，下面看一下具体实现。
回放
初始化rrweb.Replayer
-
调用setupDom方法，该方法会创建一个iframe作为容器
-
创建自定义定时器，由于setTimeout和setInterval都有可能被阻塞从而导致回放错乱，所以rrweb利用requestAnimationFrame实现了一个高精度计时器
-
创建playerService,用来处理回放逻辑
- 创建speedService,用来控制回放的速度
- 创建全量快照
初始化就完成了，接下来就是等待播放，计算时间偏移量、添加增量事件就可以达到播放的效果了。
我们回顾这几节内容，对rrweb的记录和回放都有了一定的了解，但其实到现在还缺失收集的一个过程，这部分的设计其实比较类似于埋点收集，我们需要设计 上报、记录、查询 用户会话过程中产生的一系列快照文件的一套系统，这其实就是我们实现需求过程中自主发挥的主要部分，后续有缘再跟大家介绍咯～
相关材料：
写在最后
写作不易，点个赞好不好～
关于我（资深划水，顶级潜水员，不定期更新，写啥随意）
