用JS实现页面录制与回放：技术赋能运维效率

2023-11-27 15:17:55

一、业务背景

对于研发来说，总是需要处理一些线上问题。To B 和 To C 企业在应对线上问题时，面临着不同的挑战。To B 企业的用户数量较少，但每个用户的价值很高，因此，To B 企业对线上问题的处理要求非常高。To C 企业的用户数量庞大，但每个用户的价值相对较低，因此，To C 企业对线上问题的处理要求相对较低。

无论To B 还是 To C，为了能更好地解决线上问题，都需要进行页面录制和回放，以便快速复现问题场景。

二、技术方案

页面录制和回放有很多种实现方案，可以分为两大类：一是基于浏览器的方案，二是基于浏览器的扩展。基于浏览器的方案不需要安装任何扩展，但功能有限。基于浏览器的扩展功能更强大，但需要安装扩展。

本文将介绍如何使用JavaScript实现基于浏览器的页面录制和回放功能。这种方案的好处是无需安装任何扩展，而且功能强大。

三、实现步骤

录制页面

要录制页面，需要使用JavaScript的 requestAnimationFrame() 函数。该函数可以让你在浏览器每帧刷新时执行一段代码。

function recordPage() {
  // 获取当前页面的快照
  const snapshot = document.documentElement.outerHTML;

  // 将快照存储到数组中
  snapshots.push(snapshot);

  // 继续录制下一帧
  requestAnimationFrame(recordPage);
}

回放页面

要回放页面，需要使用JavaScript的 setInterval() 函数。该函数可以让你每隔一段时间执行一段代码。

function playbackPage() {
  // 从数组中取出第一帧快照
  const snapshot = snapshots.shift();

  // 将快照还原到页面中
  document.documentElement.outerHTML = snapshot;

  // 每隔一段时间回放下一帧
  setTimeout(playbackPage, 1000 / 60);
}

录制和回放控制

为了便于控制录制和回放，可以添加一些按钮。

<button onclick="startRecording()">开始录制</button>
<button onclick="stopRecording()">停止录制</button>
<button onclick="startPlayback()">开始回放</button>
<button onclick="stopPlayback()">停止回放</button>