Post#程序员

#程序员 看到一个在网页上录制用户行为的框架，https://github.com/rrweb-io/rrweb，最终可以导出一个用户在网页操作的视频录制文件，其实现的原理比较有意思。 一般什么情况下需要记录用户在网页上的行为呢？比如想要排查某个用户的报错，必须按照用户的操作轨迹才能够复现问题，这个时候行为录制然后上报就十分有效，省却了联系用户再远程连接的过程；再比如保险业务的签署上，国家有文件规定必须记录用户的操作行为，如果采用录屏的方式，操作难度和网络开销都是比较有挑战的；再比如一些需要风控的内部系统上，对于敏感的操作需要对用户的操作过程做记录。再比如做产品的用户交互行为分析等，需求场景还是蛮多的。 rrweb 这个框架没有采用录屏的方式，也没有通过 html2canvas 将每一帧都记录下来，而是采用了更加高效、更低成本的办法，思路大概是这样的： 1. 将 DOM 进行虚拟化转换，储存为序列化的 snapshot 2. 通过 MutationObserver API 收集 DOM 的变更，将操作过程（Oplog）和 DOM diff 记录到一个双向链表中 3. 回放过程：将 snapshot 还原到一个 no-script iframe 沙箱中，然后使用一个定时器读取链表数据，逐步依次还原 Oplog 和 patch diff 对双向链表做精简、合并或者过滤，可以实现最小化储存，回放过程中还可以实现快进和跳过无效行为；这个框架中处理了大量的异常问题和边界 case，项目完成度非常高。