Refactor to preclude the need for a continuous raf loop (rrweb-io#1328)

* Refactor to preclude the need for a continuous raf loop

* Apply formatting changes

* Create shadow-dom-unbusify.md

---------

Co-authored-by: eoghanmurray <[email protected]>

.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

packages/rrweb/src/record/processed-node-manager.ts

@@ -6,23 +6,8 @@ import { getNative } from 'rrweb-snapshot';
  */
 export default class ProcessedNodeManager {
   private nodeMap: WeakMap<Node, Set<MutationBuffer>> = new WeakMap();
-  // Whether to continue RAF loop.
-  private loop = true;
-  private nativeRAF;
 
-  constructor() {
-    this.nativeRAF = getNative<typeof requestAnimationFrame>(
-      '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
   }
 }