神策数据王磊：如何用 JS 实现页面录制与回放

本文根据神策数据资深前端研发工程师王磊《如何用 JS 实现页面录制与回放》的直播整理而成。以下为正文：

一、业务背景

对于研发来说，总是需要处理一些线上问题。To B 和 To C 企业在应对线上问题的流程上有很多相似之处，同时也存在一定差异点。

对于 To C 企业，我们通常会通过用户反馈或线上实时监控系统获取到系统异常状态，同时我们整合获取到的用户环境、系统、配置、版本等信息在本地进行调试复现，成功复现后进行 bugfix 和发布操作。

而对于 To B 企业，总体流程和前者很相似，但是 To B 的性质决定了我们很难获取到问题的上下文和监控内容，往往需要客户、售后、技术支持或相应的值班人员进行信息传递来协助研发定位问题。同时，不同企业类型的客户环境也是对研发的一种挑战，研发无法像普适的 To C 环境一样去模拟 To B 客户的上下文，这对问题定位起到一定的阻碍作用。

为了提高定位线上问题的效率，我们着手调研并落地了内部异常诊断平台。在无需进入客户真实环境的情况下，通过客户提供的诊断文件快速定位问题。对于前端研发工程师而言，除了环境、版本等信息外，操作路径往往非常重要，为了清晰、快速的复现客户操作路径，我们引入了页面录制功能。

二、异常诊断与调研

前端研发在诊断异常时往往会依赖客户的操作流程，为了降低与客户的沟通成本，我们希望能够直接录制用户的操作流程。为此，我们在调研时发现业界对于 Web 录制主要有两种方式。其一是以 WebRTC 浏览器原生录制的方式为代表进行录屏，另一种是录制页面的 DOM 结构。

针对神策数据的业务场景，我们需要考虑客户的数据敏感性（针对指定数据进行脱敏）、产物大小等因素，最终我们选择更灵活、传播性更低的 DOM 录制来实现功能。而通过调研我们发现 rrweb 开源仓库对于 DOM 录制的支持性非常好，能够将页面 DOM 结构通过相应算法高效转换为 JSON 数据，对于可操作性较强的 JSON 格式数据而言，我们可以自行实现压缩、加密、敏感数据处理等操作，同时压缩后的文件大小也非常可观，总体可以控制在 5M 以下。

三、页面录制与回放

1. 录制原理

rrweb 对于录制与回放的实现主要由 rrweb、rrweb-snapshot、rrweb-player 三部分组成，其对页面录制和回放有很好的支持性，下图演示了录制和回放的大致操作流程。

rrweb 在录制时会首先进行首屏 DOM 快照，遍历整个页面的 DOM Tree 并通过 nodeType 映射转换为 JSON 结构数据，同时针对增量改变的数据同步转换为 JSON 数据进行存储。整个录制的过程会生成 unique id 来确定增量数据所对应的 DOM 节点，通过 timestamp 保证回放顺序，下图分别对应首屏快照和录制原理图。

对于首屏快照后的增量数据更新，则是通过 mutationObserver 获取 DOM 增量变化，通过全局事件监听、事件（属性）代理的方式进行方法（属性）劫持，并将劫持到的增量变化数据存入 JSON 数据中。

2. 回放原理

回放功能的原理和录制有些类似，首先针对首屏 DOM 快照进行重建，在遍历 JSON 产物的同时通过自定义 type 映射到不同的节点构建方法，重建首屏的 DOM 结构。

而对于录制产生的增量数据，rrweb 内部则根据不同的增量类型调用不同的函数，在页面进行展现。同时，播放时通过录制产生的时间戳来保证回放顺序，通过 Node id 作用至指定的 DOM 节点，通过 requestAnimationFrame 保证页面播放流畅度。

四、小结

相对于视频的形式来说，通过录制页面结构和行为来实现录屏，不仅数据可操作性更强（例如可以对 JSON 产物进行加密、压缩、分段、剔除等操作），还可以进行多方式传输（例如分段传输、指定业务场景传输）。同时，页面录制的使用场景也较为丰富，可以用来定位问题、产品使用分析、自动化测试记录、重要信息（操作）备份以及多人协作等场景。

点击链接查看直播回放：https://sensorswww.datasink.sensorsdata.cn/t/Qer

✎✎✎

【更多内容】

神策数据陈宁：前端国际化技术需求及模型实现
A/B 测试实战解析，搞定超 60% 会员增长
在线教育大数据营销平台实战（搭建篇）