rrweb/docs/recipes/optimize-storage.zh_CN.md

优化存储容量

在一些场景下 rrweb 的录制数据量可能高于你的预期，这部分文档可以帮助你选择适用于你的存储优化策略。

优化策略分为以下几类：

• 通过屏蔽 DOM 元素，减少录制的内容
• 通过 sampling 配置抽样策略，减少录制的数据
• 通过去冗、压缩，减少数据存储体积

屏蔽 DOM 元素

一些特定 DOM 元素可能会产生大量的录制数据，而这些数据未必是回放时关注的，这种情况下可以选择将这些 DOM 元素进行屏蔽，不录制其内容。

常见的大数据量 DOM 元素包括：

• 长列表
• 复杂的 SVG
• 包含 JS 控制动画的元素
• canvas 动画

抽样策略

录制时通过 sampling 配置可以让特定数据以抽样的形式减少录制频率：

示例 1

import { record } from '@rrweb/record';

record({
  emit(event) {},
  sampling: {
    // 不录制鼠标移动事件
    mousemove: false
    // 不录制鼠标交互事件
    mouseInteraction: false,
    // 设置滚动事件的触发频率
    scroll: 150 // 每 150ms 最多触发一次
    // set the interval of media interaction event
    media: 800
    // 设置输入事件的录制时机
    input: 'last' // 连续输入时，只录制最终值
  }
})

示例 2

import { record } from '@rrweb/record';

record({
  emit(event) {},
  sampling: {
    // 定义不录制的鼠标交互事件类型，可以细粒度的开启或关闭对应交互录制
    mouseInteraction: {
      MouseUp: false,
      MouseDown: false,
      Click: false,
      ContextMenu: false,
      DblClick: false,
      Focus: false,
      Blur: false,
      TouchStart: false,
      TouchEnd: false,
    },
  },
});

压缩

基于 packFn 的单数据压缩

rrweb 提供了一个基于 fflate 的简单压缩函数，在 @rrweb/packer 中可以作为 packFn 传入使用。

import { pack } from '@rrweb/packer';

record({
  emit(event) {},
  packFn: pack,
});

回放时通用需要传入 packer.unpack 作为 unpackFn 传入。

import { unpack } from '@rrweb/packer';
import { Replayer } from '@rrweb/replay';

const replayer = new Replayer(events, {
  unpackFn: unpack,
});

批量压缩

基于 packFn 的单数据压缩以每个 event 数据为单位进行压缩，但这很多时候不能发挥 rrweb 录制数据易于压缩的优势。

因此更加推荐在服务端实现多个 event 的批量压缩，例如将单次用户操作产生的所有 event 数据进行一次压缩，对于 gzip 等压缩算法来说更为友好。

去冗

另一个优化存储容量的思路是去冗。

为了模拟 hover 等需求，rrweb 会尽可能的将 CSS 样式 inline 在录制数据中。

可以想象，如果使用 rrweb 录制每个用户对 github.com 的访问，则会在录制数据中保存大量重复的样式表内容。

可以通过遍历录制数据，将包含样式表的内容提取单独保存的方式，将这部分相同数据仅保存一份。

另一方面，全量快照类的数据也存在同样的问题，可以使用同样的思路去冗，减少存储总量。