add benchmark and optimize addList worst case performance

rrweb-io · Sep 7, 2023 · 464df83 · 464df83
1 parent 58c9104
commit 464df83
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 0 deletions.
diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
@@ -128,6 +128,16 @@ class DoubleLinkedList {
     }
     this.length--;
   }
+
+  public defragment() {
+    let current = this.head;
+    while (current) {
+        let next = current.next;
+        this.removeNode(current.value);
+        this.addNode(current.value);
+        current = next;
+    }
+  }
 }
 
 const moveKey = (id: number, parentId: number) => `${id}@${parentId}`;
@@ -368,6 +378,7 @@ export default class MutationBuffer {
     }
 
     let candidate: DoubleLinkedListNode | null = null;
+    addList.defragment()
     while (addList.length) {
       let node: DoubleLinkedListNode | null = null;
       if (candidate) {

diff --git a/packages/rrweb/test/benchmark/dom-mutation.test.ts b/packages/rrweb/test/benchmark/dom-mutation.test.ts
@@ -42,6 +42,12 @@ const suites: Array<
     eval: 'window.workload()',
     times: 5,
   },
+  {
+    title: 'add and reorder 10000 DOM nodes',
+    html: 'benchmark-dom-mutation-add-reorder.html',
+    eval: 'window.workload()',
+    times: 5,
+  },
 ];
 
 function avg(v: number[]): number {

diff --git a/packages/rrweb/test/html/benchmark-dom-mutation-add-reorder.html b/packages/rrweb/test/html/benchmark-dom-mutation-add-reorder.html
@@ -0,0 +1,33 @@
+<html>
+  <body>
+    <select id="select"></select>
+  </body>
+  <script>
+    window.workload = () => {
+      const optionCount = 10000;
+      const options = [];
+      for (let i = 0; i < optionCount; ++i) {
+        const value = `${i}`;
+        options.push({ value, label: value });
+      }
+      const frag = document.createDocumentFragment();
+      const select = document.getElementById('select');
+      const parent = select.parentNode;
+      parent.removeChild(select);
+      for (let o of options) {
+        const option = document.createElement('option');
+        option.value = o.value;
+        option.textContent = o.label;
+        o.optionElement = option;
+        frag.appendChild(option);
+      }
+      select.appendChild(frag);
+      parent.appendChild(select);
+      // re-shuffle the options
+      options.sort(() => Math.random() - 0.5);
+      for (var o of options) {
+        o.optionElement.parentNode.appendChild(o.optionElement);
+      }
+    };
+  </script>
+</html>