From 9eb405c9efd75637a1c02d8acf9be9d2126ca0a8 Mon Sep 17 00:00:00 2001
From: rishigupta1599 <rishi@browserstack.com>
Date: Wed, 22 Jul 2026 23:34:45 +0530
Subject: [PATCH] fix(dom): reduce transient allocation during serialize
 (PER-10135)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Percy snapshot serialization of heavy SPAs allocates large transient
strings on the hot tail of every capture. On a customer app already near
the renderer memory ceiling, that churn adds GC pressure that can
contribute to intermittent renderer OOM / browser disconnects.

Two safe, output-preserving reductions:

- serialize-dom.js: fold the two marker-rewrite `.replace()` passes
  (custom-element proxies + serialized attributes) into a single regex
  pass, halving the large-string allocation churn. Output verified
  byte-identical.
- clone-dom.js: in getOuterHTML, when there are no shadow roots to embed
  as declarative <template shadowrootmode>, return `docElement.outerHTML`
  directly instead of the getHTML()->textContent=''->outerHTML.replace()
  reassembly, avoiding a full-size intermediate string + a replace on the
  common no-shadow-DOM page.

Not a complete OOM fix on its own — the full DOM clone dominates the
transient peak (see PER-10135 for the memory-constrained reproduction and
analysis). Validated as NOT a memory leak: across 100 serializes on one
tab the post-GC heap is flat (~0.0005 MB/snapshot) and the live DOM node
count is constant.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 packages/dom/src/clone-dom.js     |  7 +++++++
 packages/dom/src/serialize-dom.js | 14 ++++++++++----
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/dom/src/clone-dom.js b/packages/dom/src/clone-dom.js
index 89e752986..6530616af 100644
--- a/packages/dom/src/clone-dom.js
+++ b/packages/dom/src/clone-dom.js
@@ -162,6 +162,13 @@ export function getOuterHTML(docElement, { shadowRootElements, forceShadowAsLigh
   if (forceShadowAsLightDOM) {
     return docElement.outerHTML;
   }
+  // With no shadow roots to embed, the getHTML()+textContent=''+outerHTML
+  // .replace() reassembly below just reproduces `docElement.outerHTML` while
+  // allocating a full-size intermediate string + replace copy. Skip it to cut
+  // this step's transient footprint (GC pressure) on heavy pages.
+  if (!shadowRootElements || shadowRootElements.length === 0) {
+    return docElement.outerHTML;
+  }
   /* istanbul ignore else if: Only triggered in chrome <= 128 and tests runs on latest */
   if (docElement.getHTML) {
     // All major browsers in latest versions supports getHTML API to get serialized DOM
diff --git a/packages/dom/src/serialize-dom.js b/packages/dom/src/serialize-dom.js
index 1d025b505..bd8d13f5b 100644
--- a/packages/dom/src/serialize-dom.js
+++ b/packages/dom/src/serialize-dom.js
@@ -24,13 +24,19 @@ function doctype(dom) {
   return `<!DOCTYPE ${name}${deprecated}>`;
 }
 
+// Un-mangle both serialization markers in one pass instead of two:
+//   <data-percy-custom-element-x>          -> <x>
+//   ` data-percy-serialized-attribute-y=`  -> ` y=`
+// Serialized HTML can reach tens of MB and each .replace() copies the whole
+// string, so folding two passes into one halves the large-string churn (GC
+// pressure) per snapshot. Groups: g1 = `<`/`</` (tag); g2/g3 = space + attr.
+const PERCY_MARKER_RE = /(<\/?)data-percy-custom-element-|( )data-percy-serialized-attribute-(\w+?)=/gi;
+
 // Serializes and returns the cloned DOM as an HTML string
 function serializeHTML(ctx) {
   let html = getOuterHTML(ctx.clone.documentElement, { shadowRootElements: ctx.shadowRootElements, forceShadowAsLightDOM: ctx.forceShadowAsLightDOM });
-  // this is replacing serialized data tag with real tag
-  html = html.replace(/(<\/?)data-percy-custom-element-/g, '$1');
-  // replace serialized data attributes with real attributes
-  html = html.replace(/ data-percy-serialized-attribute-(\w+?)=/ig, ' $1=');
+  html = html.replace(PERCY_MARKER_RE, (_match, tagPrefix, attrSpace, attrName) =>
+    tagPrefix !== undefined ? tagPrefix : `${attrSpace}${attrName}=`);
   // include the doctype with the html string
   return doctype(ctx.dom) + html;
 }