优化存储体积

在某些应用中，rrweb 录制到的数据量可能会超出预期。本章节将帮助你找到合适的存储优化方式。

目前，我们提供以下几种优化策略：

• 屏蔽部分 DOM 元素，缩小录制范围
• 使用 sampling 抽样配置，减少事件数量
• 使用去重与压缩，降低存储体积

屏蔽 DOM 元素

某些 DOM 元素会发出大量事件，而其中一部分可能并不是用户关心的内容。因此你可以使用 block class 来忽略这类元素。

常见的会发出大量事件的元素包括：

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

抽样

在录制时使用 sampling 配置，可以通过丢弃部分事件来降低存储体积：

场景 1

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

record({
  emit(event) {},
  sampling: {
    // do not record mouse movement
    mousemove: false
    // do not record mouse interaction
    mouseInteraction: false
    // set the interval of scrolling event
    scroll: 150 // do not emit twice in 150ms
    // set the interval of media interaction event
    media: 800
    // set the timing of record input
    input: 'last' // When input mulitple characters, only record the final input
  }
})

场景 2

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

record({
  emit(event) {},
  sampling: {
    // Configure which kinds of mouse interaction should be recorded
    mouseInteraction: {
      MouseUp: false,
      MouseDown: false,
      Click: false,
      ContextMenu: false,
      DblClick: false,
      Focus: false,
      Blur: false,
      TouchStart: false,
      TouchEnd: false,
    },
  },
});

压缩

使用 packFn 压缩每个事件

rrweb 在 @rrweb/packer 中提供了一个基于 fflate 的简单压缩函数。

你可以在录制时将它作为 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 逐事件压缩可能无法获得最佳效果。

推荐在后端对整个会话进行压缩，对于 deflate 等压缩算法来说，这样可以获得更高的压缩率。

去重

另一种优化策略是去重。

由于回放时需要模拟 hover 效果，rrweb 会尽可能将 CSS 样式内联到事件中。

因此，如果将 rrweb 应用于 github.com，跨会话录制时可能会记录到大量重复的 CSS 样式。

我们可以遍历事件并提取其中的 CSS，从而只保存一份样式副本。

这一策略同样适用于跨会话的全量快照。