本文根据神策数据资深前端研发工程师王磊《如何用JS实现页面录制与回放》的直播整理而成。以下为正文：
一、业务背景
对于研发来说，总是需要处理一些线上问题。ToB和ToC企业在应对线上问题的流程上有很多相似之处，同时也存在一定差异点。
对于ToC企业，我们通常会通过用户反馈或线上实时监控系统获取到系统异常状态，同时我们整合获取到的用户环境、系统、配置、版本等信息在本地进行调试复现，成功复现后进行bugfix和发布操作。
而对于ToB企业，总体流程和前者很相似，但是ToB的性质决定了我们很难获取到问题的上下文和监控内容，往往需要客户、售后、技术支持或相应的值班人员进行信息传递来协助研发定位问题。同时，不同企业类型的客户环境也是对研发的一种挑战，研发无法像普适的ToC环境一样去模拟ToB客户的上下文，这对问题定位起到一定的阻碍作用。
为了提高定位线上问题的效率，我们着手调研并落地了内部异常诊断平台。在无需进入客户真实环境的情况下，通过客户提供的诊断文件快速定位问题。对于前端研发工程师而言，除了环境、版本等信息外，操作路径往往非常重要，为了清晰、快速的复现客户操作路径，我们引入了页面录制功能。
二、异常诊断与调研
前端研发在诊断异常时往往会依赖客户的操作流程，为了降低与客户的沟通成本，我们希望能够直接录制用户的操作流程。为此，我们在调研时发现业界对于Web录制主要有两种方式。其一是以WebRTC浏览器原生录制的方式为代表进行录屏，另一种是录制页面的DOM结构。
针对神策数据的业务场景，我们需要考虑客户的数据敏感性（针对指定数据进行脱敏）、产物大小等因素，最终我们选择更灵活、传播性更低的DOM录制来实现功能。而通过调研我们发现rrweb开源仓库对于DOM录制的支持性非常好，能够将页面DOM结构通过相应算法高效转换为JSON数据，对于可操作性较强的JSON格式数据而言，我们可以自行实现压缩、加密、敏感数据处理等操作，同时压缩后的文件大小也非常可观，总体可以控制在5M以下。
三、页面录制与回放
1.录制原理
rrweb对于录制与回放的实现主要由rrweb、rrweb-snapshot、rrweb-player三部分组成，其对页面录制和回放有很好的支持性，下图演示了录制和回放的大致操作流程。
rrweb在录制时会首先进行首屏DOM快照，遍历整个页面的DOMTree并通过nodeType映射转换为JSON结构数据，同时针对增量改变的数据同步转换为JSON数据进行存储。整个录制的过程会生成uniqueid来确定增量数据所对应的DOM节点，通过timestamp保证回放顺序，下图分别对应首屏快照和录制原理图。
对于首屏快照后的增量数据更新，则是通过mutationObserver获取DOM增量变化，通过全局事件监听、事件（属性）代理的方式进行方法（属性）劫持，并将劫持到的增量变化数据存入JSON数据中。
2.回放原理
回放功能的原理和录制有些类似，首先针对首屏DOM快照进行重建，在遍历JSON产物的同时通过自定义type映射到不同的节点构建方法，重建首屏的DOM结构。
而对于录制产生的增量数据，rrweb内部则根据不同的增量类型调用不同的函数，在页面进行展现。同时，播放时通过录制产生的时间戳来保证回放顺序，通过Nodeid作用至指定的DOM节点，通过requestAnimationFrame保证页面播放流畅度。
四、小结
相对于视频的形式来说，通过录制页面结构和行为来实现录屏，不仅数据可操作性更强（例如可以对JSON产物进行加密、压缩、分段、剔除等操作），还可以进行多方式传输（例如分段传输、指定业务场景传输）。同时，页面录制的使用场景也较为丰富，可以用来定位问题、产品使用分析、自动化测试记录、重要信息（操作）备份以及多人协作等场景。
点击链接查看直播回放：
转载请注明：http://www.0431gb208.com/sjszlff/3715.html
