perf: improve blocked and masking logic checks

.changeset/afraid-knives-relate.md

@@ -0,0 +1,5 @@
+---
+"rrweb": patch
+---
+
+improve blocking and masking perf

packages/rrdom/src/index.ts

@@ -351,11 +351,8 @@
 
   getId(n: RRNode | undefined | null): number {
     if (!n) return -1;
-
-    const id = this.getMeta(n)?.id;
-
     // if n is not a serialized Node, use -1 as its id.
-    return id ?? -1;
+    return this.getMeta(n)?.id ?? -1;
   }
 
   getNode(id: number): RRNode | null {
@@ -373,11 +370,14 @@
   // removes the node from idNodeMap
   // doesn't remove the node from nodeMetaMap
   removeNodeFromMap(n: RRNode) {
-    const id = this.getId(n);
-    this.idNodeMap.delete(id);
+    const queue = [n];
+    while (queue.length > 0) {
+      const n = queue.pop()!;
+      this.idNodeMap.delete(this.getId(n));
 
-    if (n.childNodes) {
-      n.childNodes.forEach((childNode) => this.removeNodeFromMap(childNode));
+      for (let i = 0; i < n.childNodes.length; i++) {
+        queue.push(n.childNodes[i]);
+      }
     }
   }
   has(id: number): boolean {

packages/rrweb-snapshot/src/snapshot.ts

@@ -280,27 +280,17 @@
     // should warn? maybe a text node isn't attached to a parent node yet?
     return false;
   } else {
     el = dom.parentElement(node)!;
   }
-  try {
-    if (typeof maskTextClass === 'string') {
-      if (checkAncestors) {
-        if (el.closest(`.${maskTextClass}`)) return true;
-      } else {
-        if (el.classList.contains(maskTextClass)) return true;
-      }
-    } else {
-      if (classMatchesRegex(el, maskTextClass, checkAncestors)) return true;
-    }
-    if (maskTextSelector) {
-      if (checkAncestors) {
-        if (el.closest(maskTextSelector)) return true;
-      } else {
-        if (el.matches(maskTextSelector)) return true;
-      }
-    }
-  } catch (e) {
-    //
+  if (typeof maskTextClass === 'string') {
+    if (el.matches(`.${maskTextClass}`)) return true;
+    if (checkAncestors && el.matches(`.${maskTextClass} *`)) return true;
+  } else {
+    if (classMatchesRegex(el, maskTextClass, checkAncestors)) return true;
+  }
+  if (maskTextSelector) {
+    if (el.matches(maskTextSelector)) return true;
+    if (checkAncestors && el.matches(`${maskTextSelector} *`)) return true;
   }
   return false;
 }
@@ -700,10 +690,10 @@
     const recordInlineImage = () => {
       image.removeEventListener('load', recordInlineImage);
       try {
         canvasService!.width = image.naturalWidth;
         canvasService!.height = image.naturalHeight;
         canvasCtx!.drawImage(image, 0, 0);
         attributes.rr_dataURL = canvasService!.toDataURL(
           dataURLOptions.type,
           dataURLOptions.quality,
         );

packages/rrweb/src/record/mutation.ts

@@ -362,13 +362,13 @@
     };
 
     while (this.mapRemoves.length) {
-      this.mirror.removeNodeFromMap(this.mapRemoves.shift()!);
+      this.mirror.removeNodeFromMap(this.mapRemoves.pop()!);
     }
 
     for (const n of this.movedSet) {
       if (
         isParentRemoved(this.removes, n, this.mirror) &&
         !this.movedSet.has(dom.parentNode(n)!)
       ) {
         continue;
       }
@@ -584,8 +584,8 @@
           });
         }
         if (
-          isBlocked(m.target, this.blockClass, this.blockSelector, false) ||
-          value === m.oldValue
+          value === m.oldValue ||
+          isBlocked(m.target, this.blockClass, this.blockSelector, false)
         ) {
           return;
         }
@@ -701,9 +701,9 @@
             ? this.mirror.getId(dom.host(m.target))
             : this.mirror.getId(m.target);
           if (
-            isBlocked(m.target, this.blockClass, this.blockSelector, false) ||
             isIgnored(n, this.mirror, this.slimDOMOptions) ||
-            !isSerialized(n, this.mirror)
+            !isSerialized(n, this.mirror) ||
+            isBlocked(m.target, this.blockClass, this.blockSelector, false)
           ) {
             return;
           }

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) {

packages/rrweb/src/utils.ts

@@ -31,7 +31,7 @@
   'now you can use replayer.getMirror() to access the mirror instance of a replayer,' +
   '\r\n' +
   'or you can use record.mirror to access the mirror instance during recording.';
 /** @deprecated */
 export let _mirror: DeprecatedMirror = {
   map: {},
   getId() {
@@ -115,7 +115,7 @@
           set(value) {
             // put hooked setter into event loop to avoid of set latency
             setTimeout(() => {
               d.set!.call(this, value);
             }, 0);
             if (original && original.set) {
               original.set.call(this, value);
@@ -128,7 +128,7 @@
 
 // copy from https://github.com/getsentry/sentry-javascript/blob/b2109071975af8bf0316d3b5b38f519bdaf5dc15/packages/utils/src/object.ts
 export function patch(
   source: { [key: string]: any },
   name: string,
   replacement: (...args: unknown[]) => unknown,
 ): () => void {
@@ -247,29 +247,22 @@
   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;
 }