perf(genAdds): refactor recursive procedure to iterative

packages/rrweb/package.json

@@ -20,6 +20,7 @@
     "check-types": "tsc -noEmit",
     "prepublish": "tsc -noEmit && vite build",
     "lint": "yarn eslint src",
+    "benchmark-dom-mutation": "vitest run --maxConcurrency 1 --no-file-parallelism -t 'deeply nested children' test/benchmark/dom-mutation",
     "benchmark": "vitest run --maxConcurrency 1 --no-file-parallelism test/benchmark"
   },
   "type": "module",

packages/rrweb/src/record/mutation.ts

@@ -680,8 +680,63 @@ export default class MutationBuffer {
           return; // any removedNodes won't have been in mirror either
         }
 
-        m.addedNodes.forEach((n) => this.genAdds(n, m.target));
-        m.removedNodes.forEach((n) => {
+        const genAddsQueue: [Node, Node | undefined][] = new Array<
+          [Node, Node | undefined]
+        >();
+
+        for (let i = m.addedNodes.length - 1; i >= 0; i--) {
+          const n = m.addedNodes[i];
+          genAddsQueue.push([n, m.target]);
+
+          // iterate breadth first over new nodes (non recursive for performance)
+          while (genAddsQueue.length) {
+            const [n, target] = genAddsQueue.pop()!;
+
+            // this node was already recorded in other buffer, ignore it
+            if (this.processedNodeManager.inOtherBuffer(n, this)) continue;
+
+            // if n is added to set, there is no need to travel it and its' children again
+            if (this.addedSet.has(n) || this.movedSet.has(n)) continue;
+
+            if (this.mirror.hasNode(n)) {
+              if (isIgnored(n, this.mirror, this.slimDOMOptions)) {
+                continue;
+              }
+              this.movedSet.add(n);
+              let targetId: number | null = null;
+              if (target && this.mirror.hasNode(target)) {
+                targetId = this.mirror.getId(target);
+              }
+              if (targetId && targetId !== -1) {
+                this.movedMap[moveKey(this.mirror.getId(n), targetId)] = true;
+              }
+            } else {
+              this.addedSet.add(n);
+              this.droppedSet.delete(n);
+            }
+
+            if (isBlocked(n, this.blockClass, this.blockSelector, false)) {
+              // if this node is blocked `serializeNode` will turn it into a placeholder element
+              // but we have to ignore it's children otherwise they will be added as placeholders too
+              continue;
+            }
+
+            for (let j = n.childNodes.length - 1; j >= 0; j--) {
+              const childN = n.childNodes[j];
+              genAddsQueue.push([childN, undefined]);
+            }
+            if (hasShadowRoot(n)) {
+              for (let j = n.shadowRoot.childNodes.length - 1; j >= 0; j--) {
+                const childN = n.shadowRoot.childNodes[j];
+                this.processedNodeManager.add(childN, this);
+                genAddsQueue.push([childN, n]);
+              }
+            }
+          }
+        }
+
+        for(let i = 0; i < m.removedNodes.length; i++) {
+          const n = m.removedNodes[i];
           const nodeId = this.mirror.getId(n);
           const parentId = isShadowRoot(m.target)
             ? this.mirror.getId(m.target.host)
@@ -728,53 +783,13 @@ export default class MutationBuffer {
             });
           }
           this.mapRemoves.push(n);
-        });
+        };
         break;
       }
       default:
         break;
     }
   };
-
-  /**
-   * Make sure you check if `n`'s parent is blocked before calling this function
-   * */
-  private genAdds = (n: Node, target?: Node) => {
-    // this node was already recorded in other buffer, ignore it
-    if (this.processedNodeManager.inOtherBuffer(n, this)) return;
-
-    // if n is added to set, there is no need to travel it and its' children again
-    if (this.addedSet.has(n) || this.movedSet.has(n)) return;
-
-    if (this.mirror.hasNode(n)) {
-      if (isIgnored(n, this.mirror, this.slimDOMOptions)) {
-        return;
-      }
-      this.movedSet.add(n);
-      let targetId: number | null = null;
-      if (target && this.mirror.hasNode(target)) {
-        targetId = this.mirror.getId(target);
-      }
-      if (targetId && targetId !== -1) {
-        this.movedMap[moveKey(this.mirror.getId(n), targetId)] = true;
-      }
-    } else {
-      this.addedSet.add(n);
-      this.droppedSet.delete(n);
-    }
-
-    // if this node is blocked `serializeNode` will turn it into a placeholder element
-    // but we have to remove it's children otherwise they will be added as placeholders too
-    if (!isBlocked(n, this.blockClass, this.blockSelector, false)) {
-      n.childNodes.forEach((childN) => this.genAdds(childN));
-      if (hasShadowRoot(n)) {
-        n.shadowRoot.childNodes.forEach((childN) => {
-          this.processedNodeManager.add(childN, this);
-          this.genAdds(childN, n);
-        });
-      }
-    }
-  };
 }
 
 /**

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

@@ -5,14 +5,11 @@ import type MutationBuffer from './mutation';
  */
 export default class ProcessedNodeManager {
   private nodeMap: WeakMap<Node, Set<MutationBuffer>> = new WeakMap();
-
   private active = false;
 
   public inOtherBuffer(node: Node, thisBuffer: MutationBuffer) {
     const buffers = this.nodeMap.get(node);
-    return (
-      buffers && Array.from(buffers).some((buffer) => buffer !== thisBuffer)
-    );
+    return buffers?.has(thisBuffer)
   }
 
   public add(node: Node, buffer: MutationBuffer) {