perf(snapshot): avoid recreate element a every time

.changeset/hungry-dodos-taste.md

@@ -0,0 +1,10 @@
+---
+'rrweb-snapshot': patch
+---
+
+Avoid recreating the same element every time, instead, we cache and we just update the element.
+
+Before: 779k ops/s
+After: 860k ops/s
+
+Benchmark: https://jsbench.me/ktlqztuf95/1

packages/rrweb-snapshot/src/snapshot.ts

@@ -195,23 +195,31 @@
   return output.join(', ');
 }
 
+const cachedDocument = new WeakMap<Document, HTMLAnchorElement>();
+
 export function absoluteToDoc(doc: Document, attributeValue: string): string {
   if (!attributeValue || attributeValue.trim() === '') {
     return attributeValue;
   }
-  const a: HTMLAnchorElement = doc.createElement('a');
-  a.href = attributeValue;
-  return a.href;
+
+  return getHref(doc, attributeValue);
 }
 
 function isSVGElement(el: Element): boolean {
   return Boolean(el.tagName === 'svg' || (el as SVGElement).ownerSVGElement);
 }
 
-function getHref() {
-  // return a href without hash
-  const a = document.createElement('a');
-  a.href = '';
+function getHref(doc: Document, customHref?: string) {
+  let a = cachedDocument.get(doc);
+  if (!a) {
+    a = doc.createElement('a');
+    cachedDocument.set(doc, a);
+  }
+  if (!customHref) {
+    customHref = '';
+  }
+  // note: using `new URL` is slower. See #1434 or https://jsbench.me/uqlud17rxo/1
+  a.setAttribute('href', customHref);
   return a.href;
 }
 
@@ -243,7 +251,7 @@
   } else if (name === 'srcset') {
     return getAbsoluteSrcsetString(doc, value);
   } else if (name === 'style') {
-    return absoluteToStylesheet(value, getHref());
+    return absoluteToStylesheet(value, getHref(doc));
   } else if (tagName === 'object' && name === 'data') {
     return absoluteToDoc(doc, value);
   }
@@ -254,7 +262,7 @@
 export function ignoreAttribute(
   tagName: string,
   name: string,
   _value: unknown,
 ): boolean {
   return (tagName === 'video' || tagName === 'audio') && name === 'autoplay';
 }
@@ -392,7 +400,7 @@
   iframeEl.addEventListener('load', listener);
 }
 
 function isStylesheetLoaded(link: HTMLLinkElement) {
   if (!link.getAttribute('href')) return true; // nothing to load
   return link.sheet !== null;
 }
@@ -505,6 +513,7 @@
       });
     case n.TEXT_NODE:
       return serializeTextNode(n as Text, {
+        doc,
         needsMask,
         maskTextFn,
         rootId,
@@ -535,6 +544,7 @@
 function serializeTextNode(
   n: Text,
   options: {
+    doc: Document;
     needsMask: boolean | undefined;
     maskTextFn: MaskTextFn | undefined;
     rootId: number | undefined;
@@ -557,7 +567,7 @@
         // So we'll be conservative and keep textContent as-is.
       } else if ((n.parentNode as HTMLStyleElement).sheet?.cssRules) {
         textContent = stringifyStylesheet(
           (n.parentNode as HTMLStyleElement).sheet!,
         );
       }
     } catch (err) {
@@ -566,7 +576,7 @@
         n,
       );
     }
-    textContent = absoluteToStylesheet(textContent, getHref());
+    textContent = absoluteToStylesheet(textContent, getHref(options.doc));
   }
   if (isScript) {
     textContent = 'SCRIPT_PLACEHOLDER';
@@ -646,7 +656,7 @@
     if (cssText) {
       delete attributes.rel;
       delete attributes.href;
       attributes._cssText = absoluteToStylesheet(cssText, stylesheet!.href!);
     }
   }
   // dynamic stylesheet
@@ -660,7 +670,7 @@
       (n as HTMLStyleElement).sheet as CSSStyleSheet,
     );
     if (cssText) {
-      attributes._cssText = absoluteToStylesheet(cssText, getHref());
+      attributes._cssText = absoluteToStylesheet(cssText, getHref(doc));
     }
   }
   // form fields
@@ -739,10 +749,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,
         );