add benchmarks for text masking #1096

mdellanoce · mdellanoce · commit e8f91b67be46 · 2023-07-13T10:09:32.000-04:00
diff --git a/packages/rrweb/test/benchmark/dom-mutation.test.ts b/packages/rrweb/test/benchmark/dom-mutation.test.ts
@@ -10,6 +10,10 @@ const suites: Array<
     title: string;
     eval: string;
     times?: number; // defaults to 5
+    recordOptions?: {
+      maskTextClass?: string;
+      unmaskTextClass?: string;
+    };
   } & ({ html: string } | { url: string })
 > = [
   // {
@@ -42,6 +46,25 @@ const suites: Array<
     eval: 'window.workload()',
     times: 5,
   },
+  {
+    title: 'mask 1000x10 DOM nodes',
+    html: 'benchmark-text-masking.html',
+    eval: 'window.workload()',
+    times: 10,
+    recordOptions: {
+      maskTextClass: 'rr-mask',
+    },
+  },
+  {
+    title: 'unmask 1000x10 DOM nodes',
+    html: 'benchmark-text-masking.html',
+    eval: 'window.workload()',
+    times: 10,
+    recordOptions: {
+      maskTextClass: 'rr-mask',
+      unmaskTextClass: 'rr-unmask',
+    },
+  },
 ];
 
 function avg(v: number[]): number {
@@ -106,35 +129,40 @@ describe('benchmark: mutation observer', () => {
       };
 
       const getDuration = async (): Promise<number> => {
-        return (await page.evaluate((triggerWorkloadScript) => {
-          return new Promise((resolve, reject) => {
-            let start = 0;
-            let lastEvent: eventWithTime | null;
-            const options: recordOptions<eventWithTime> = {
-              emit: (event) => {
-                // console.log(event.type, event.timestamp);
-                if (event.type !== 5 || event.data.tag !== 'FTAG') {
-                  lastEvent = event;
-                  return;
-                }
-                if (!lastEvent) {
-                  reject('no events recorded');
-                  return;
-                }
-                resolve(lastEvent.timestamp - start);
-              },
-            };
-            const record = (window as any).rrweb.record;
-            record(options);
-
-            start = Date.now();
-            eval(triggerWorkloadScript);
-
-            requestAnimationFrame(() => {
-              record.addCustomEvent('FTAG', {});
+        return (await page.evaluate(
+          (triggerWorkloadScript, recordOptions) => {
+            return new Promise((resolve, reject) => {
+              let start = 0;
+              let lastEvent: eventWithTime | null;
+              const options: recordOptions<eventWithTime> = {
+                ...recordOptions,
+                emit: (event) => {
+                  // console.log(event.type, event.timestamp);
+                  if (event.type !== 5 || event.data.tag !== 'FTAG') {
+                    lastEvent = event;
+                    return;
+                  }
+                  if (!lastEvent) {
+                    reject('no events recorded');
+                    return;
+                  }
+                  resolve(lastEvent.timestamp - start);
+                },
+              };
+              const record = (window as any).rrweb.record;
+              record(options);
+
+              start = Date.now();
+              eval(triggerWorkloadScript);
+
+              requestAnimationFrame(() => {
+                record.addCustomEvent('FTAG', {});
+              });
             });
-          });
-        }, suite.eval)) as number;
+          },
+          suite.eval,
+          suite.recordOptions || {}
+        )) as number;
       };
 
       // generate profile.json file
diff --git a/packages/rrweb/test/html/benchmark-text-masking.html b/packages/rrweb/test/html/benchmark-text-masking.html
@@ -0,0 +1,30 @@
+<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.setAttribute('branch', b.toString());
+        node.setAttribute('depth', d.toString());
+        node.classList.add('rr-mask');
+        let current = node;
+        while (d < depth - 1) {
+          d++;
+          const child = document.createElement('div');
+          child.setAttribute('branch', b.toString());
+          child.setAttribute('depth', d.toString());
+          child.classList.toggle('rr-unmask', d === 1);
+          current.appendChild(child);
+          current = child;
+        }
+        current.innerText = 'some text';
+        frag.appendChild(node);
+      }
+      document.body.appendChild(frag);
+    };
+  </script>
+</html>
