From 6cb833570a62149782675366ea4b9a8b43071b0a Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Tue, 17 Oct 2023 14:00:39 +0100 Subject: [PATCH 1/3] Refactor to preclude the need for a continuous raf loop --- .../src/record/processed-node-manager.ts | 27 +++++++------------ 1 file changed, 9 insertions(+), 18 deletions(-) diff --git a/packages/rrweb/src/record/processed-node-manager.ts b/packages/rrweb/src/record/processed-node-manager.ts index b5d6c4b679..c5c3490dab 100644 --- a/packages/rrweb/src/record/processed-node-manager.ts +++ b/packages/rrweb/src/record/processed-node-manager.ts @@ -5,19 +5,8 @@ import type MutationBuffer from './mutation'; */ export default class ProcessedNodeManager { private nodeMap: WeakMap> = new WeakMap(); - // Whether to continue RAF loop. - private loop = true; - constructor() { - this.periodicallyClear(); - } - - private periodicallyClear() { - requestAnimationFrame(() => { - this.clear(); - if (this.loop) this.periodicallyClear(); - }); - } + private active = false; public inOtherBuffer(node: Node, thisBuffer: MutationBuffer) { const buffers = this.nodeMap.get(node); @@ -27,15 +16,17 @@ export default class ProcessedNodeManager { } public add(node: Node, buffer: MutationBuffer) { + if (!this.active) { + this.active = true; + requestAnimationFrame(() => { + this.nodeMap = new WeakMap(); + this.active = false; + }); + } this.nodeMap.set(node, (this.nodeMap.get(node) || new Set()).add(buffer)); } - private clear() { - this.nodeMap = new WeakMap(); - } - public destroy() { - // Stop the RAF loop. - this.loop = false; + // cleanup no longer needed } } From 54360b9a8840a36c9521214c8511925d93d09c0d Mon Sep 17 00:00:00 2001 From: eoghanmurray Date: Thu, 11 Apr 2024 10:59:55 +0000 Subject: [PATCH 2/3] Apply formatting changes --- guide.md | 42 +++++++++++++++--------------- packages/rrweb-player/src/utils.ts | 5 +++- 2 files changed, 25 insertions(+), 22 deletions(-) diff --git a/guide.md b/guide.md index 6298cdf772..5693b26d29 100644 --- a/guide.md +++ b/guide.md @@ -295,27 +295,27 @@ replayer.destroy(); 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 | -| inactivePeriodThreshold | 10000 | the threshold in milliseconds for what should be considered an inactive period | -| 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.** | -| pauseAnimation | true | whether to pause CSS animation when the replayer is paused | -| 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) | -| useVirtualDom | true | whether to use Virtual Dom optimization in the process of skipping to a new point of time | -| logger | console | The logger object used by the replayer to print warnings or errors | +| 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 | +| inactivePeriodThreshold | 10000 | the threshold in milliseconds for what should be considered an inactive period | +| 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.** | +| pauseAnimation | true | whether to pause CSS animation when the replayer is paused | +| 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) | +| useVirtualDom | true | whether to use Virtual Dom optimization in the process of skipping to a new point of time | +| logger | console | The logger object used by the replayer to print warnings or errors | #### Use rrweb-player diff --git a/packages/rrweb-player/src/utils.ts b/packages/rrweb-player/src/utils.ts index 405dffa901..08146bd253 100644 --- a/packages/rrweb-player/src/utils.ts +++ b/packages/rrweb-player/src/utils.ts @@ -167,7 +167,10 @@ function isUserInteraction(event: eventWithTime): boolean { * @param inactivePeriodThreshold - threshold of inactive time in milliseconds * @returns periods of time consist with [start time, end time] */ -export function getInactivePeriods(events: eventWithTime[], inactivePeriodThreshold: number) { +export function getInactivePeriods( + events: eventWithTime[], + inactivePeriodThreshold: number, +) { const inactivePeriods: [number, number][] = []; let lastActiveTime = events[0].timestamp; for (const event of events) { From 23cd976724861d4400e5aa4a1dc62acd92c9bc9b Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Thu, 11 Apr 2024 12:00:41 +0100 Subject: [PATCH 3/3] Create shadow-dom-unbusify.md --- .changeset/shadow-dom-unbusify.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/shadow-dom-unbusify.md diff --git a/.changeset/shadow-dom-unbusify.md b/.changeset/shadow-dom-unbusify.md new file mode 100644 index 0000000000..d1b01010b7 --- /dev/null +++ b/.changeset/shadow-dom-unbusify.md @@ -0,0 +1,5 @@ +--- +'rrweb': patch +--- + +Refactor to preclude the need for a continuous raf loop running in the background which is related to shadowDom