From 2633dea9c04c1f1a600351e32815cae2fd846be3 Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Wed, 1 Apr 2026 12:00:00 +0800
Subject: [PATCH] Refactor to preclude the need for a continuous raf loop
 (#1328)

* Refactor to preclude the need for a continuous raf loop

* Apply formatting changes

* Create shadow-dom-unbusify.md

---------

Co-authored-by: eoghanmurray <eoghanmurray@users.noreply.github.com>
---
 .changeset/shadow-dom-unbusify.md             |  5 ++++
 .../src/record/processed-node-manager.ts      | 27 +++++++------------
 2 files changed, 14 insertions(+), 18 deletions(-)
 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 00000000..d1b01010
--- /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 b5d6c4b6..c5c3490d 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<Node, Set<MutationBuffer>> = 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
   }
 }