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 diff --git a/packages/rrweb/src/record/processed-node-manager.ts b/packages/rrweb/src/record/processed-node-manager.ts index ddff37c15b..0e113b12fe 100644 --- a/packages/rrweb/src/record/processed-node-manager.ts +++ b/packages/rrweb/src/record/processed-node-manager.ts @@ -6,23 +6,8 @@ import { getNative } from 'rrweb-snapshot'; */ export default class ProcessedNodeManager { private nodeMap: WeakMap> = new WeakMap(); - // Whether to continue RAF loop. - private loop = true; - private nativeRAF; - constructor() { - this.nativeRAF = getNative( - 'requestAnimationFrame', - ).bind(window); - this.periodicallyClear(); - } - - private periodicallyClear() { - this.nativeRAF(() => { - this.clear(); - if (this.loop) this.periodicallyClear(); - }); - } + private active = false; public inOtherBuffer(node: Node, thisBuffer: MutationBuffer) { const buffers = this.nodeMap.get(node); @@ -32,15 +17,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 } }