?

?

本文根據神策數據資深前端研發工程師王磊《如何用 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% 會員增長

• 在線教育大數據營銷平臺實戰（搭建篇）

?

總結

以上是生活随笔為你收集整理的神策数据王磊：如何用 JS 实现页面录制与回放的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。