perf(mutation): add deep recursive test

rrweb-io · May 24, 2024 · 0435984 · 0435984
1 parent 2e5c904
commit 0435984
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 27 deletions.
diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
@@ -22,7 +22,7 @@
     "check-types": "tsc -noEmit",
     "prepublish": "npm run typings && npm run bundle",
     "lint": "yarn eslint src",
-    "benchmark": "jest test/benchmark"
+    "benchmark": "jest test/benchmark/dom-mutation"
   },
   "type": "module",
   "repository": {

diff --git a/packages/rrweb/test/benchmark/dom-mutation.test.ts b/packages/rrweb/test/benchmark/dom-mutation.test.ts
@@ -19,35 +19,41 @@ const suites: Array<
   //   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: 'modify attributes on 10000 DOM nodes',
-    html: 'benchmark-dom-mutation-attributes.html',
+    title: 'create 1000x 1 DOM nodes with deeply nested children',
+    html: 'benchmark-dom-mutation-deep-nested.html',
     eval: 'window.workload()',
     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: 'modify attributes on 10000 DOM nodes',
+  //   html: 'benchmark-dom-mutation-attributes.html',
+  //   eval: 'window.workload()',
+  //   times: 10,
+  // },
 ];
 
 function avg(v: number[]): number {

diff --git a/packages/rrweb/test/html/benchmark-dom-mutation-deep-nested.html b/packages/rrweb/test/html/benchmark-dom-mutation-deep-nested.html
@@ -0,0 +1,35 @@
+<html>
+  <body></body>
+  <script>
+    function init() {
+      const count = 1000;
+
+      let roots = [];
+      for (let i = 0; i < count; ++i) {
+        const div = document.createElement('div');
+        document.body.appendChild(div);
+        roots.push(div);
+      }
+
+      let tree_depth = 64;
+      let children = [...roots];
+      while (tree_depth > 0) {
+        for (let i = 0; i < children.length; i++) {
+          const div = document.createElement('div');
+          children[i].appendChild(div);
+          children[i] = div;
+        }
+        tree_depth--;
+      }
+    }
+
+    init();
+
+    window.workload = () => {
+      const divs = document.getElementsByTagName('div');
+      for (let div of divs) {
+        div.classList.add('foo');
+      }
+    };
+  </script>
+</html>