perf(mutation): refactor parent removed detection to iterative proced…

…ure (#1489) * perf(mutation): add deep tree benchmark * perf(mutation): use iterative procedure * perf(mutation): run formatter * perf(mutation): add changeset
rrweb-io · Jun 5, 2024 · 609b7fa · 609b7fa
1 parent d38893f
commit 609b7fa
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 8 deletions.
diff --git a/.changeset/kind-kids-design.md b/.changeset/kind-kids-design.md
@@ -0,0 +1,5 @@
+---
+"rrweb": patch
+---
+
+Optimize performance of isParentRemoved by converting it to an iterative procedure
diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
@@ -802,15 +802,15 @@ function _isParentRemoved(
   n: Node,
   mirror: Mirror,
 ): boolean {
-  const { parentNode } = n;
-  if (!parentNode) {
-    return false;
-  }
-  const parentId = mirror.getId(parentNode);
-  if (removes.some((r) => r.id === parentId)) {
-    return true;
+  let node: ParentNode | null = n.parentNode;
+  while (node) {
+    const parentId = mirror.getId(node);
+    if (removes.some((r) => r.id === parentId)) {
+      return true;
+    }
+    node = node.parentNode;
   }
-  return _isParentRemoved(removes, parentNode, mirror);
+  return false;
 }
 
 function isAncestorInSet(set: Set<Node>, n: Node): boolean {

diff --git a/packages/rrweb/test/benchmark/dom-mutation.test.ts b/packages/rrweb/test/benchmark/dom-mutation.test.ts
@@ -18,6 +18,12 @@ const suites: Array<
   //   eval: 'document.querySelector("button").click()',
   //   times: 10,
   // },
+  {
+    title: 'create 1000x 1 DOM nodes with deeply nested children',
+    html: 'benchmark-dom-mutation-deep-nested.html',
+    eval: 'window.workload()',
+    times: 10,
+  },
   {
     title: 'create 1000x10 DOM nodes',
     html: 'benchmark-dom-mutation.html',

diff --git a/packages/rrweb/test/html/benchmark-dom-mutation-deep-nested.html b/packages/rrweb/test/html/benchmark-dom-mutation-deep-nested.html
@@ -0,0 +1,31 @@
+<html>
+  <body></body>
+  <script>
+    function init() {
+      const count = 100;
+
+      let roots = [];
+      for (let i = 0; i < count; ++i) {
+        const div = document.createElement('div');
+        document.body.appendChild(div);
+        roots.push(div);
+      }
+
+      let tree_depth = 256;
+      let children = [...roots];
+      while (tree_depth > 0) {
+        for (let i = 0; i < children.length; i++) {
+          const div = document.createElement('div');
+          children[i].appendChild(div);
+          children[i] = div;
+        }
+        tree_depth--;
+      }
+    }
+
+    window.workload = () => {
+        document.body.innerHTML = '';
+        init();
+    };
+  </script>
+</html>