upstream: perf(rrweb): attribute mutation optimization (#178)

Ref: rrweb-io#1343 Co-authored-by: Michael Dellanoce <michael.dellanoce@gmail.com>
getsentry · Apr 19, 2024 · 02e711d · 02e711d
1 parent 15c4677
commit 02e711d
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 3 deletions.
diff --git a/.changeset/moody-dots-refuse.md b/.changeset/moody-dots-refuse.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+use WeakMap for faster attributeCursor lookup while processing attribute mutations
diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
@@ -144,6 +144,7 @@ export default class MutationBuffer {
 
   private texts: textCursor[] = [];
   private attributes: attributeCursor[] = [];
+  private attributeMap = new WeakMap<Node, attributeCursor>();
   private removes: removedNodeMutation[] = [];
   private mapRemoves: Node[] = [];
 
@@ -502,6 +503,7 @@ export default class MutationBuffer {
     // reset
     this.texts = [];
     this.attributes = [];
+    this.attributeMap = new WeakMap<Node, attributeCursor>();
     this.removes = [];
     this.addedSet = new Set<Node>();
     this.movedSet = new Set<Node>();
@@ -602,9 +604,7 @@ export default class MutationBuffer {
           return;
         }
 
-        let item: attributeCursor | undefined = this.attributes.find(
-          (a) => a.node === m.target,
-        );
+        let item = this.attributeMap.get(m.target);
         if (
           target.tagName === 'IFRAME' &&
           attributeName === 'src' &&
@@ -626,6 +626,7 @@ export default class MutationBuffer {
             _unchangedStyles: {},
           };
           this.attributes.push(item);
+          this.attributeMap.set(m.target, item);
         }
 
         // Keep this property on inputs that used to be password inputs

diff --git a/packages/rrweb/test/benchmark/dom-mutation.test.ts b/packages/rrweb/test/benchmark/dom-mutation.test.ts
@@ -46,6 +46,12 @@ const suites: Array<
     eval: 'window.workload()',
     times: 5,
   },
+  {
+    title: 'modify attributes on 10000 DOM nodes',
+    html: 'benchmark-dom-mutation-attributes.html',
+    eval: 'window.workload()',
+    times: 10,
+  },
   {
     title: 'mask 1000x10 DOM nodes',
     html: 'benchmark-text-masking.html',

diff --git a/packages/rrweb/test/html/benchmark-dom-mutation-attributes.html b/packages/rrweb/test/html/benchmark-dom-mutation-attributes.html
@@ -0,0 +1,21 @@
+<html>
+  <body></body>
+  <script>
+    function init() {
+      const count = 10000;
+      for (let i = 0; i < count; ++i) {
+        const div = document.createElement('div');
+        document.body.appendChild(div);
+      }
+    }
+
+    init();
+
+    window.workload = () => {
+      const divs = document.getElementsByTagName('div');
+      for (let div of divs) {
+        div.classList.add('foo');
+      }
+    };
+  </script>
+</html>