perf: record processMutation (rrweb-io#1214)

* perf: record processMutation * Create mean-tips-impress.md * Apply formatting changes
eoghanmurray · Jul 27, 2023 · 33b8e5b · 33b8e5b
1 parent cc326a1
commit 33b8e5b
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 0 deletions.
diff --git a/.changeset/mean-tips-impress.md b/.changeset/mean-tips-impress.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+perf: optimize the performance of record in processMutation phase
diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
@@ -656,6 +656,9 @@ export default class MutationBuffer {
     // 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)) {
         return;

diff --git a/packages/rrweb/test/benchmark/dom-mutation.test.ts b/packages/rrweb/test/benchmark/dom-mutation.test.ts
@@ -30,6 +30,12 @@ const suites: Array<
     eval: 'window.workload()',
     times: 10,
   },
+  {
+    title: 'create 1000 DOM nodes and append into its previous looped node',
+    html: 'benchmark-dom-mutation-multiple-descendant-add.html',
+    eval: 'window.workload()',
+    times: 5,
+  },
 ];
 
 function avg(v: number[]): number {

diff --git a/packages/rrweb/test/html/benchmark-dom-mutation-multiple-descendant-add.html b/packages/rrweb/test/html/benchmark-dom-mutation-multiple-descendant-add.html
@@ -0,0 +1,18 @@
+<html>
+  <body></body>
+  <script>
+    function addMultiNodes() {
+      const total = 1000;
+      let parent = document.body;
+      for (let i = 0; i < total; i++) {
+        const el = document.createElement('div');
+        el.textContent = `el-${i + 1}`;
+        parent.append(el);
+        parent = el;
+      }
+    }
+    window.workload = () => {
+      addMultiNodes();
+    };
+  </script>
+</html>