perf: improve blocked and masking logic checks

rrweb-io · Jul 18, 2024 · 93e65f3 · 93e65f3
1 parent 40bbc25
commit 93e65f3
Show file tree

Hide file tree

Showing 10 changed files with 30 additions and 35 deletions.
diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
@@ -347,8 +347,9 @@ export default class MutationBuffer {
       }
     };
 
+
     while (this.mapRemoves.length) {
-      this.mirror.removeNodeFromMap(this.mapRemoves.shift()!);
+      this.mirror.removeNodeFromMap(this.mapRemoves.pop()!);
     }
 
     for (const n of this.movedSet) {

diff --git a/packages/rrweb/src/record/processed-node-manager.ts b/packages/rrweb/src/record/processed-node-manager.ts
@@ -10,9 +10,8 @@ export default class ProcessedNodeManager {
 
   public inOtherBuffer(node: Node, thisBuffer: MutationBuffer) {
     const buffers = this.nodeMap.get(node);
-    return (
-      buffers && Array.from(buffers).some((buffer) => buffer !== thisBuffer)
-    );
+    if (!buffers) return false;
+    return buffers.has(thisBuffer);
   }
 
   public add(node: Node, buffer: MutationBuffer) {

diff --git a/packages/rrweb/src/utils.ts b/packages/rrweb/src/utils.ts
@@ -246,29 +246,22 @@ export function isBlocked(
   blockSelector: string | null,
   checkAncestors: boolean,
 ): boolean {
-  if (!node) {
-    return false;
-  }
   const el = closestElementOfNode(node);
+  if (!el) return false;
+  if (!blockClass && !blockSelector) return false;
 
-  if (!el) {
-    return false;
-  }
-
-  try {
-    if (typeof blockClass === 'string') {
-      if (el.classList.contains(blockClass)) return true;
-      if (checkAncestors && el.closest('.' + blockClass) !== null) return true;
-    } else {
-      if (classMatchesRegex(el, blockClass, checkAncestors)) return true;
-    }
-  } catch (e) {
-    // e
-  }
   if (blockSelector) {
     if (el.matches(blockSelector)) return true;
-    if (checkAncestors && el.closest(blockSelector) !== null) return true;
+    if (checkAncestors && el.matches(`${blockSelector} *`)) return true;
+  }
+
+  if (typeof blockClass === 'string') {
+    if (el.matches(`.${blockClass}`)) return true;
+    if (checkAncestors && el.matches(`.${blockClass} *`)) return true;
+  } else {
+    if (classMatchesRegex(el, blockClass, checkAncestors)) return true;
   }
+
   return false;
 }
 

diff --git a/packages/rrweb/test/benchmark/dom-mutation.test.ts b/packages/rrweb/test/benchmark/dom-mutation.test.ts
@@ -89,17 +89,6 @@ describe('benchmark: mutation observer', () => {
     return fs.readFileSync(filePath, 'utf8');
   };
 
-  const addRecordingScript = async (page: Page) => {
-    // const scriptUrl = `${getServerURL(server)}/rrweb-1.1.3.js`;
-    const scriptUrl = `${getServerURL(server)}/rrweb.umd.cjs`;
-    await page.evaluate((url) => {
-      const scriptEl = document.createElement('script');
-      scriptEl.src = url;
-      document.head.append(scriptEl);
-    }, scriptUrl);
-    await page.waitForFunction('window.rrweb');
-  };
-
   for (const suite of suites) {
     it(suite.title, async () => {
       page = await browser.newPage();
@@ -110,12 +99,19 @@ describe('benchmark: mutation observer', () => {
       const loadPage = async () => {
         if ('html' in suite) {
           await page.goto('about:blank');
+          const code = fs
+            .readFileSync(path.resolve(__dirname, '../../dist/rrweb.umd.cjs'))
+            .toString();
+          await page.setContent(`<html>
+            <script>
+            ${code.toString()}
+            </script>
+            </html>`);
+
           await page.setContent(getHtml.call(this, suite.html));
         } else {
           await page.goto(suite.url);
         }
-
-        await addRecordingScript(page);
       };
 
       const getDuration = async (): Promise<number> => {

diff --git a/packages/rrweb/test/html/benchmark-dom-mutation-add-and-move.html b/packages/rrweb/test/html/benchmark-dom-mutation-add-and-move.html
@@ -1,4 +1,5 @@
 <html>
+  <head></head>
   <body>
     <div id="app"></div>
   </body>

diff --git a/packages/rrweb/test/html/benchmark-dom-mutation-add-and-remove.html b/packages/rrweb/test/html/benchmark-dom-mutation-add-and-remove.html
@@ -1,4 +1,5 @@
 <html>
+  <head></head>
   <body></body>
   <script>
     function add() {

diff --git a/packages/rrweb/test/html/benchmark-dom-mutation-attributes.html b/packages/rrweb/test/html/benchmark-dom-mutation-attributes.html
@@ -1,4 +1,5 @@
 <html>
+  <head></head>
   <body></body>
   <script>
     function init() {

diff --git a/packages/rrweb/test/html/benchmark-dom-mutation-deep-nested.html b/packages/rrweb/test/html/benchmark-dom-mutation-deep-nested.html
@@ -1,4 +1,5 @@
 <html>
+  <head></head>
   <body></body>
   <script>
     function init() {

diff --git a/packages/rrweb/test/html/benchmark-dom-mutation-multiple-descendant-add.html b/packages/rrweb/test/html/benchmark-dom-mutation-multiple-descendant-add.html
@@ -1,4 +1,5 @@
 <html>
+  <head></head>
   <body></body>
   <script>
     function addMultiNodes() {

diff --git a/packages/rrweb/test/html/benchmark-dom-mutation.html b/packages/rrweb/test/html/benchmark-dom-mutation.html
@@ -1,4 +1,5 @@
 <html>
+  <head></head>
   <body></body>
   <script>
     window.workload = () => {