Perf: Apply the latest text mutation only (#885)

* Perf: apply the latest text mutation only

* Find unique text mutations in one iteration

packages/rrweb/src/replay/index.ts

@@ -52,6 +52,7 @@ import {
   getBaseDimension,
   hasShadowRoot,
   isSerializedIframe,
+  uniqueTextMutations,
 } from '../utils';
 import getInjectStyleRules from './styles/inject-style';
 import './styles/style.css';
@@ -185,9 +186,10 @@ export class Replayer {
       this.fragmentParentMap.forEach((parent, frag) =>
         this.restoreRealParent(frag, parent),
       );
+
       // apply text needs to happen before virtual style rules gets applied
       // as it can overwrite the contents of a stylesheet
-      for (const d of mutationData.texts) {
+      for (const d of uniqueTextMutations(mutationData.texts)) {
         this.applyText(d, mutationData);
       }
 
@@ -1763,7 +1765,7 @@ export class Replayer {
       Object.assign(this.legacy_missingNodeRetryMap, legacy_missingNodeMap);
     }
 
-    d.texts.forEach((mutation) => {
+    uniqueTextMutations(d.texts).forEach((mutation) => {
       let target = this.mirror.getNode(mutation.id);
       if (!target) {
         if (d.removes.find((r) => r.id === mutation.id)) {

packages/rrweb/src/utils.ts

@@ -604,3 +604,23 @@ export function hasShadowRoot<T extends Node>(
 ): n is T & { shadowRoot: ShadowRoot } {
   return Boolean(((n as unknown) as Element)?.shadowRoot);
 }
+
+/**
+ * Returns the latest mutation in the queue for each node.
+ * @param  {textMutation[]} mutations The text mutations to filter.
+ * @returns {textMutation[]} The filtered text mutations.
+ */
+export function uniqueTextMutations(mutations: textMutation[]): textMutation[] {
+  const idSet = new Set<number>();
+  const uniqueMutations: textMutation[] = [];
+
+  for (let i = mutations.length; i--; ) {
+    const mutation = mutations[i];
+    if (!idSet.has(mutation.id)) {
+      uniqueMutations.push(mutation);
+      idSet.add(mutation.id);
+    }
+  }
+
+  return uniqueMutations;
+}

packages/rrweb/typings/utils.d.ts

@@ -11,6 +11,7 @@ export declare function getWindowHeight(): number;
 export declare function getWindowWidth(): number;
 export declare const isCanvasNode: (node: Node | null) => boolean;
 export declare function isBlocked(node: Node | null, blockClass: blockClass): boolean;
+export declare function isSerialized(n: Node, mirror: Mirror): boolean;
 export declare function isIgnored(n: Node, mirror: Mirror): boolean;
 export declare function isAncestorRemoved(target: Node, mirror: Mirror): boolean;
 export declare function isTouchEvent(event: MouseEvent | TouchEvent): event is TouchEvent;
@@ -63,4 +64,5 @@ export declare function getBaseDimension(node: Node, rootIframe: Node): Document
 export declare function hasShadowRoot<T extends Node>(n: T): n is T & {
     shadowRoot: ShadowRoot;
 };
+export declare function getUniqueTextMutations(mutations: textMutation[]): textMutation[];
 export {};