1、rrweb 是什么？

web 端录制回放的一个基础库，即记录页面中的 DOM 结构还有用户操做行为，在远程实现回放。rrweb 其实实现了 录制页面为用户的操做，回放页面则是根据数据回放用户的操做行为功能的一个库。

2、适用场景

• 记录⽤户使⽤产品的⽅式并加以分析，进⼀步优化产品。

• 采集⽤户遇到 bug 的操做路径，予以复现。

• 记录 CI 环境中的 E2E 测试的执⾏状况。

• 录制体积更⼩、清晰度⽆损的产品演⽰。

3、录制回放基本原理

这一块能够简单地理解为 “快照 + 操做指令”, 通常记录页面状态，咱们能够根据时间记录每一时刻页面的 DOM状态，回放的时候根据时间点显示便可，可是通常一个页面DOM 数据是很庞大的。

所以 rrweb 采起了另一种方式，记录初始页面的DOM 状态，或者特定某个时刻的DOM 状态，后续收集的是不一样时间点的操做指令 或者 某个时刻 某个DOM 的变化做为一个增量快照，在原先快照的基础上，不断加入根据行为解析的DOM 数据，构建了后续的快照，减小大量数据的存储或传输。

4、使用 rrweb 应注意的问题

• 数据量大的问题

• 数据安全问题 关于数据大的问题，其实rrweb 内部有作了一些处理，好比：

• 根据DOM 变化或者有特定的用户操做行为时才收集数据；

• 数据切片，分片不是单个数据的分片，而是如何把一天的数据或者是连续不刷新页面的数据进行分片，在rrweb里叫snapshot，好比每隔10分钟或者数据超过必定大小以后，进行一次数据分片，能够分开存储，这样在播放的时候，能够获取某一段的数据，不用播放一成天的。

• 节流，对于鼠标移动，页面滚动事件进行了节流

除此之外，可本身对收集到的数据进行处理

• 压缩数据，尝试过用 pako.js 进行压缩

• 将数据切片保存在不一样的文件存储在云服务器，在播放的时候拉取文件整合数据再播放（这里只是一个想法，还没验证是否可行）

使用rrweb示例见附件。其开源地址为：https://github.com/rrweb-io/rrweb

在vuejs项目中使用简单示例如下：

template:

<el-cardshadow="never"class="aui-card--fill">

      <divclass="rrweb-create">

        <el-button @click="get_start">开始录制</el-button>

        <el-button @click="playback">回放录制</el-button>

      </div>

      <divid="replaycontent"style="width:1000px;height:500px;"></div>

    </el-card>

script:

import { record } from'rrweb'

import'rrweb-player/dist/style.css'

importrrwebPlayerfrom'rrweb-player'

letevents= []

get_start() {

      let_this=this

      events=[]

      this.stopFn=record({

        emit(event) {

          events.push(event)

          if (events.length>900) {

            _this.stopFn()

          }

        }

      })

    },

    playback() {

      newrrwebPlayer({

        target: document.getElementById('replaycontent'),

        data: {

          events,

        }

      })

    }

展示效果如下：