feat(benchmark): add blockClass and blockSelector benchmarks

JonasBa · Aug 10, 2023 · e188253 · e188253
1 parent fab0d3d
commit e188253
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 19 deletions.
diff --git a/packages/rrweb/test/benchmark/dom-mutation.test.ts b/packages/rrweb/test/benchmark/dom-mutation.test.ts
@@ -10,6 +10,7 @@ const suites: Array<
     title: string;
     eval: string;
     times?: number; // defaults to 5
+    options?: recordOptions<eventWithTime>
   } & ({ html: string } | { url: string })
 > = [
   // {
@@ -18,30 +19,48 @@ const suites: Array<
   //   eval: 'document.querySelector("button").click()',
   //   times: 10,
   // },
+  // {
+  //   title: 'create 1000x10 DOM nodes',
+  //   html: 'benchmark-dom-mutation.html',
+  //   eval: 'window.workload()',
+  //   times: 10,
+  // },
+  // {
+  //   title: 'create 1000x10x2 DOM nodes and remove a bunch of them',
+  //   html: 'benchmark-dom-mutation-add-and-remove.html',
+  //   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,
+  // },
+  // {
+  //   title: 'create 10000 DOM nodes and move it to new container',
+  //   html: 'benchmark-dom-mutation-add-and-move.html',
+  //   eval: 'window.workload()',
+  //   times: 5,
+  // },
   {
-    title: 'create 1000x10 DOM nodes',
-    html: 'benchmark-dom-mutation.html',
-    eval: 'window.workload()',
-    times: 10,
-  },
-  {
-    title: 'create 1000x10x2 DOM nodes and remove a bunch of them',
-    html: 'benchmark-dom-mutation-add-and-remove.html',
-    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',
+    title: 'Create 1000x10 DOM nodes that are blocked using blockClass',
+    html: 'benchmark-dom-mutation-add-blocked.html',
     eval: 'window.workload()',
     times: 5,
+    options: {
+      blockClass: "blocked"
+    }
   },
   {
-    title: 'create 10000 DOM nodes and move it to new container',
-    html: 'benchmark-dom-mutation-add-and-move.html',
+    title: 'Create 1000x10 DOM nodes that are blocked using blockSelector',
+    html: 'benchmark-dom-mutation-add-blocked.html',
     eval: 'window.workload()',
     times: 5,
-  },
+    options: {
+      blockSelector: ".blocked"
+    }
+  }
 ];
 
 function avg(v: number[]): number {
@@ -106,7 +125,7 @@ describe('benchmark: mutation observer', () => {
       };
 
       const getDuration = async (): Promise<number> => {
-        return (await page.evaluate((triggerWorkloadScript) => {
+        return (await page.evaluate((triggerWorkloadScript, replayOptions) => {
           return new Promise((resolve, reject) => {
             let start = 0;
             let lastEvent: eventWithTime | null;
@@ -123,6 +142,7 @@ describe('benchmark: mutation observer', () => {
                 }
                 resolve(lastEvent.timestamp - start);
               },
+              ...replayOptions
             };
             const record = (window as any).rrweb.record;
             record(options);
@@ -134,7 +154,7 @@ describe('benchmark: mutation observer', () => {
               record.addCustomEvent('FTAG', {});
             });
           });
-        }, suite.eval)) as number;
+        }, suite.eval, suite.options ?? {})) as number;
       };
 
       // generate profile.json file

diff --git a/packages/rrweb/test/html/benchmark-dom-mutation-add-blocked.html b/packages/rrweb/test/html/benchmark-dom-mutation-add-blocked.html
@@ -0,0 +1,32 @@
+<html>
+  <body></body>
+  <script>
+    window.workload = () => {
+      const branches = 1000;
+      const depth = 10;
+      const frag = document.createDocumentFragment();
+      for (let b = 0; b < branches; b++) {
+        const node = document.createElement('div');
+        let d = 0;
+        node.classList.add('blocked');
+        node.setAttribute('branch', b.toString());
+        node.setAttribute('depth', d.toString());
+        let current = node;
+        while (d < depth - 1) {
+          d++;
+          const child = document.createElement('div');
+          child.setAttribute('branch', b.toString());
+          child.setAttribute('depth', d.toString());
+          current.appendChild(child);
+          current = child;
+
+          if(d === depth-1) {
+            d.textContent = 'blocked';
+          }
+        }
+        frag.appendChild(node);
+      }
+      document.body.appendChild(frag);
+    };
+  </script>
+</html>