diff --git a/guide.md b/guide.md
index b95b4c2da3..35e428d228 100644
--- a/guide.md
+++ b/guide.md
@@ -135,30 +135,30 @@ setInterval(save, 10 * 1000);
The parameter of `rrweb.record` accepts the following options.
-| key | default | description |
-| -------------------- | ------------------ | ------------------------------------------------------------ |
-| emit | required | the callback function to get emitted events |
-| checkoutEveryNth | - | take a full snapshot after every N events
refer to the [checkout](#checkout) chapter |
-| checkoutEveryNms | - | take a full snapshot after every N ms
refer to the [checkout](#checkout) chapter |
-| blockClass | 'rr-block' | Use a string or RegExp to configure which elements should be blocked, refer to the [privacy](#privacy) chapter |
-| blockSelector | null | Use a string to configure which selector should be blocked, refer to the [privacy](#privacy) chapter |
-| ignoreClass | 'rr-ignore' | Use a string or RegExp to configure which elements should be ignored, refer to the [privacy](#privacy) chapter |
-| maskTextClass | 'rr-mask' | Use a string or RegExp to configure which elements should be masked, refer to the [privacy](#privacy) chapter |
-| maskTextSelector | null | Use a string to configure which selector should be masked, refer to the [privacy](#privacy) chapter |
-| maskAllInputs | false | mask all input content as \* |
-| maskInputOptions | { password: true } | mask some kinds of input \*
refer to the [list](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L77-L95) |
-| maskInputFn | - | customize mask input content recording logic |
-| maskTextFn | - | customize mask text content recording logic |
-| slimDOMOptions | {} | remove unnecessary parts of the DOM
refer to the [list](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L97-L108) |
-| inlineStylesheet | true | whether to inline the stylesheet in the events |
-| hooks | {} | hooks for events
refer to the [list](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207) |
-| packFn | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
-| sampling | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
-| recordCanvas | false | whether to record the canvas element |
-| inlineImages | false | whether to record the image content |
-| collectFonts | false | whether to collect fonts in the website |
+| key | default | description |
+| -------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| emit | required | the callback function to get emitted events |
+| checkoutEveryNth | - | take a full snapshot after every N events
refer to the [checkout](#checkout) chapter |
+| checkoutEveryNms | - | take a full snapshot after every N ms
refer to the [checkout](#checkout) chapter |
+| blockClass | 'rr-block' | Use `null` to disable (speeds up recording). Use a string or RegExp to configure which elements should be blocked, refer to the [privacy](#privacy) chapter |
+| blockSelector | null | Use `null` to disable (speeds up recording). Use a string to configure which selector should be blocked, refer to the [privacy](#privacy) chapter |
+| ignoreClass | 'rr-ignore' | Use a string or RegExp to configure which elements should be ignored, refer to the [privacy](#privacy) chapter |
+| maskTextClass | 'rr-mask' | Use a string or RegExp to configure which elements should be masked, refer to the [privacy](#privacy) chapter |
+| maskTextSelector | null | Use a string to configure which selector should be masked, refer to the [privacy](#privacy) chapter |
+| maskAllInputs | false | mask all input content as \* |
+| maskInputOptions | { password: true } | mask some kinds of input \*
refer to the [list](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L77-L95) |
+| maskInputFn | - | customize mask input content recording logic |
+| maskTextFn | - | customize mask text content recording logic |
+| slimDOMOptions | {} | remove unnecessary parts of the DOM
refer to the [list](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L97-L108) |
+| inlineStylesheet | true | whether to inline the stylesheet in the events |
+| hooks | {} | hooks for events
refer to the [list](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207) |
+| packFn | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
+| sampling | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
+| recordCanvas | false | whether to record the canvas element |
+| inlineImages | false | whether to record the image content |
+| collectFonts | false | whether to collect fonts in the website |
| userTriggeredOnInput | false | whether to add `userTriggered` on input events that indicates if this event was triggered directly by the user or not. [What is `userTriggered`?](https://github.com/rrweb-io/rrweb/pull/495) |
-| plugins | [] | load plugins to provide extended record functions. [What is plugins?](./docs/recipes/plugin.md) |
+| plugins | [] | load plugins to provide extended record functions. [What is plugins?](./docs/recipes/plugin.md) |
#### Privacy
@@ -286,23 +286,23 @@ replayer.pause(5000);
The replayer accepts options as its constructor's second parameter, and it has the following options:
-| key | default | description |
-| ------------------- | ------------- | ------------------------------------------------------------ |
-| speed | 1 | replay speed ratio |
-| root | document.body | the root element of replayer |
-| loadTimeout | 0 | timeout of loading remote style sheet |
-| skipInactive | false | whether to skip inactive time |
-| showWarning | true | whether to print warning messages during replay |
-| showDebug | false | whether to print debug messages during replay |
-| blockClass | 'rr-block' | element with the class name will display as a blocked area |
-| liveMode | false | whether to enable live mode |
-| insertStyleRules | [] | accepts multiple CSS rule string, which will be injected into the replay iframe |
-| triggerFocus | true | whether to trigger focus during replay |
-| UNSAFE_replayCanvas | false | whether to replay the canvas element. **Enable this will remove the sandbox, which is unsafe.** |
+| key | default | description |
+| ------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| speed | 1 | replay speed ratio |
+| root | document.body | the root element of replayer |
+| loadTimeout | 0 | timeout of loading remote style sheet |
+| skipInactive | false | whether to skip inactive time |
+| showWarning | true | whether to print warning messages during replay |
+| showDebug | false | whether to print debug messages during replay |
+| blockClass | 'rr-block' | element with the class name will display as a blocked area |
+| liveMode | false | whether to enable live mode |
+| insertStyleRules | [] | accepts multiple CSS rule string, which will be injected into the replay iframe |
+| triggerFocus | true | whether to trigger focus during replay |
+| UNSAFE_replayCanvas | false | whether to replay the canvas element. **Enable this will remove the sandbox, which is unsafe.** |
| mouseTail | true | whether to show mouse tail during replay. Set to false to disable mouse tail. A complete config can be found in this [type](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L407) |
-| unpackFn | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
-| logConfig | - | configuration of console output playback, refer to the [console recipe](./docs/recipes/console.md) |
-| plugins | [] | load plugins to provide extended replay functions. [What is plugins?](./docs/recipes/plugin.md) |
+| unpackFn | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
+| logConfig | - | configuration of console output playback, refer to the [console recipe](./docs/recipes/console.md) |
+| plugins | [] | load plugins to provide extended replay functions. [What is plugins?](./docs/recipes/plugin.md) |
#### Use rrweb-player
diff --git a/guide.zh_CN.md b/guide.zh_CN.md
index bdb0a93305..16b31a650d 100644
--- a/guide.zh_CN.md
+++ b/guide.zh_CN.md
@@ -136,8 +136,8 @@ setInterval(save, 10 * 1000);
| emit | 必填 | 获取当前录制的数据 |
| checkoutEveryNth | - | 每 N 次事件重新制作一次全量快照
详见[“重新制作快照”](#重新制作快照)章节 |
| checkoutEveryNms | - | 每 N 毫秒重新制作一次全量快照
详见[“重新制作快照”](#重新制作快照)章节 |
-| blockClass | 'rr-block' | 字符串或正则表达式，可用于自定义屏蔽元素的类名，详见[“隐私”](#隐私)章节 |
-| blockSelector | null | 所有 element.matches(blockSelector)为 true 的元素都不会被录制，回放时取而代之的是一个同等宽高的占位元素 |
+| blockClass | 'rr-block' | 使用 `null` 禁用（加速录制 字符串或正则表达式，可用于自定义屏蔽元素的类名，详见[“隐私”](#隐私)章节 |
+| blockSelector | null | 使用 `null` 禁用（加速录制）所有 element.matches(blockSelector)为 true 的元素都不会被录制，回放时取而代之的是一个同等宽高的占位元素 |
| ignoreClass | 'rr-ignore' | 字符串或正则表达式，可用于自定义忽略元素的类名，详见[“隐私”](#隐私)章节 |
| maskTextClass | 'rr-mask' | 字符串或正则表达式，可用于自定义忽略元素 text 内容的类名，详见[“隐私”](#隐私)章节 |
| maskTextSelector | null | 所有 element.matches(maskTextSelector)为 true 的元素及其子元素的 text 内容将会被屏蔽 |
diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index 6c283b796a..77143f2fa5 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -261,14 +261,16 @@ export function transformAttribute(
export function _isBlockedElement(
element: HTMLElement,
- blockClass: string | RegExp,
+ blockClass: string | RegExp | null,
blockSelector: string | null,
): boolean {
+ if (!blockClass && !blockSelector) return false;
+
if (typeof blockClass === 'string') {
if (element.classList.contains(blockClass)) {
return true;
}
- } else {
+ } else if (blockClass) {
// tslint:disable-next-line: prefer-for-of
for (let eIndex = 0; eIndex < element.classList.length; eIndex++) {
const className = element.classList[eIndex];
@@ -377,7 +379,7 @@ function serializeNode(
n: Node,
options: {
doc: Document;
- blockClass: string | RegExp;
+ blockClass: string | RegExp | null;
blockSelector: string | null;
maskTextClass: string | RegExp;
maskTextSelector: string | null;
@@ -790,7 +792,7 @@ export function serializeNodeWithId(
options: {
doc: Document;
map: idNodeMap;
- blockClass: string | RegExp;
+ blockClass: string | RegExp | null;
blockSelector: string | null;
maskTextClass: string | RegExp;
maskTextSelector: string | null;
@@ -988,7 +990,7 @@ export function serializeNodeWithId(
function snapshot(
n: Document,
options?: {
- blockClass?: string | RegExp;
+ blockClass?: string | RegExp | null;
blockSelector?: string | null;
maskTextClass?: string | RegExp;
maskTextSelector?: string | null;
diff --git a/packages/rrweb-snapshot/typings/snapshot.d.ts b/packages/rrweb-snapshot/typings/snapshot.d.ts
index b970f751eb..d9a08b3520 100644
--- a/packages/rrweb-snapshot/typings/snapshot.d.ts
+++ b/packages/rrweb-snapshot/typings/snapshot.d.ts
@@ -3,12 +3,12 @@ export declare const IGNORED_NODE = -2;
export declare function absoluteToStylesheet(cssText: string | null, href: string): string;
export declare function absoluteToDoc(doc: Document, attributeValue: string): string;
export declare function transformAttribute(doc: Document, tagName: string, name: string, value: string): string;
-export declare function _isBlockedElement(element: HTMLElement, blockClass: string | RegExp, blockSelector: string | null): boolean;
+export declare function _isBlockedElement(element: HTMLElement, blockClass: string | RegExp | null, blockSelector: string | null): boolean;
export declare function needMaskingText(node: Node | null, maskTextClass: string | RegExp, maskTextSelector: string | null): boolean;
export declare function serializeNodeWithId(n: Node | INode, options: {
doc: Document;
map: idNodeMap;
- blockClass: string | RegExp;
+ blockClass: string | RegExp | null;
blockSelector: string | null;
maskTextClass: string | RegExp;
maskTextSelector: string | null;
@@ -28,7 +28,7 @@ export declare function serializeNodeWithId(n: Node | INode, options: {
iframeLoadTimeout?: number;
}): serializedNodeWithId | null;
declare function snapshot(n: Document, options?: {
- blockClass?: string | RegExp;
+ blockClass?: string | RegExp | null;
blockSelector?: string | null;
maskTextClass?: string | RegExp;
maskTextSelector?: string | null;
diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts
index dea29982dc..fc8b995491 100644
--- a/packages/rrweb/src/types.ts
+++ b/packages/rrweb/src/types.ts
@@ -169,7 +169,7 @@ export type eventWithTime = event & {
delay?: number;
};
-export type blockClass = string | RegExp;
+export type blockClass = string | RegExp | null;
export type maskTextClass = string | RegExp;
diff --git a/packages/rrweb/src/utils.ts b/packages/rrweb/src/utils.ts
index 91376444ef..66354450bb 100644
--- a/packages/rrweb/src/utils.ts
+++ b/packages/rrweb/src/utils.ts
@@ -224,9 +224,7 @@ export function getWindowWidth(): number {
}
export function isBlocked(node: Node | null, blockClass: blockClass): boolean {
- if (!node) {
- return false;
- }
+ if (!blockClass || !node) return false;
if (node.nodeType === node.ELEMENT_NODE) {
let needBlock = false;
if (typeof blockClass === 'string') {
diff --git a/packages/rrweb/typings/types.d.ts b/packages/rrweb/typings/types.d.ts
index ae3aa94ca3..ecf5449b07 100644
--- a/packages/rrweb/typings/types.d.ts
+++ b/packages/rrweb/typings/types.d.ts
@@ -115,7 +115,7 @@ export declare type eventWithTime = event & {
timestamp: number;
delay?: number;
};
-export declare type blockClass = string | RegExp;
+export declare type blockClass = string | RegExp | null;
export declare type maskTextClass = string | RegExp;
export declare type SamplingStrategy = Partial<{
mousemove: boolean | number;