ref: optimize splitShadowRootCss

[ZerGo0]

Overview

I did some benchmarking in my prod. ext. and noticed that ~8% (~65ms) of the initial page render time is spent in splitShadowRootCss. It is pretty unoptimized right now and this PR changes that.

Main problem with the original one seems to be GC and regex related:

Original:

Optimized:

Manual Testing

Benchmark script (copy and paste this in the Chrome dev tools, ai generated):

function splitShadowRootCss(css) {
  let shadowCss = css;
  let documentCss = "";

  const rulesRegex = /(\s*@(property|font-face)[\s\S]*?{[\s\S]*?})/gm;
  let match;
  while ((match = rulesRegex.exec(css)) !== null) {
    documentCss += match[1];
    shadowCss = shadowCss.replace(match[1], "");
  }

  return {
    documentCss: documentCss.trim(),
    shadowCss: shadowCss.trim(),
  };
}

const AT_RULE_BLOCKS = /(\s*@(property|font-face)[\s\S]*?{[\s\S]*?})/gm;

function splitShadowRootCssOptimized(css) {
  const documentCss = Array.from(css.matchAll(AT_RULE_BLOCKS), (m) => m[0])
    .join("")
    .trim();
  const shadowCss = css.replace(AT_RULE_BLOCKS, "").trim();

  return {
    documentCss,
    shadowCss,
  };
}

function generateTestCss(size = 5000) {
  const rule =
    `  @property --x { syntax: "<color>"; inherits: true; initial-value: red; }\n` +
    `\t@font-face { font-family: "Test"; src: url("test.woff2"); }\n` +
    `.foo { color: blue; background: var(--x); }\n` +
    `\n/* comment */\n  .bar{font-family:"Test"}\n\n` +
    `@supports (font-variation-settings: "wght" 400) { .baz { letter-spacing: 0; } }\n`;
  return rule.repeat(size);
}

function assertEqual(a, b, label) {
  const same = a.documentCss === b.documentCss && a.shadowCss === b.shadowCss;
  if (!same) {
    console.error(`❌ Validation failed: ${label}`);
    process.exit(1);
  }
}

function benchmark(fn, css, label, iterations = 1000) {
  for (let i = 0; i < 5; i++) fn(css);

  const start = performance.now();
  for (let i = 0; i < iterations; i++) fn(css);
  const end = performance.now();

  const total = end - start;
  const avg = total / iterations;
  console.log(
    `${label}: total ${total.toFixed(2)} ms (${avg.toFixed(3)} ms avg per run)`
  );
}

const css = generateTestCss(500);

console.log("Benchmarking splitShadowRootCss (1000 iterations)...\n");

const resultOriginal = splitShadowRootCss(css);
const resultOptimized = splitShadowRootCssOptimized(css);
assertEqual(
  resultOriginal,
  resultOptimized,
  "Outputs differ between implementations"
);

console.log("✅ Validation passed — outputs are identical.\n");

benchmark(splitShadowRootCss, css, "Original");
benchmark(splitShadowRootCssOptimized, css, "Optimized");

console.log("\n✅ Done.");

Related Issue

None

[netlify]

✅ Deploy Preview for creative-fairy-df92c4 ready!

Name	Link
🔨 Latest commit	c503202
🔍 Latest deploy log	https://app.netlify.com/projects/creative-fairy-df92c4/deploys/68ecd40b038a7300087faba1
😎 Deploy Preview	https://deploy-preview-1934--creative-fairy-df92c4.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.