From c83ca77718767d604868ac45c5079cf9202add5d Mon Sep 17 00:00:00 2001 From: Richard Szegh Date: Tue, 5 May 2026 11:48:10 +0200 Subject: [PATCH 1/4] perf: replace object-hash with fast djb2 hash and batch MutationObserver in AutoFrame - Replace object-hash with a lightweight djb2 hash function to avoid O(n) serialisation of large CSS strings on every style node mutation - Key style elements by href (link) or innerHTML hash (style) instead of full outerHTML, enabling early deduplication before any DOM cloning - Batch MutationObserver callbacks via a single deferred flush to prevent per-node main-thread tasks during bulk style injection from federated modules - Deduplicate style nodes during initial collection to skip duplicate PandaCSS atomic class blocks injected by multiple federated modules - Fix removeEl not splicing the elements array, causing unbounded growth --- packages/core/components/AutoFrame/index.tsx | 100 +++++++++++++++---- 1 file changed, 83 insertions(+), 17 deletions(-) diff --git a/packages/core/components/AutoFrame/index.tsx b/packages/core/components/AutoFrame/index.tsx index a0d8580f4c..71e3afcc4b 100644 --- a/packages/core/components/AutoFrame/index.tsx +++ b/packages/core/components/AutoFrame/index.tsx @@ -6,11 +6,24 @@ import { useEffect, useState, } from "react"; -import hash from "object-hash"; import { createPortal } from "react-dom"; const styleSelector = 'style, link[rel="stylesheet"]'; +/** + * Fast, non-cryptographic djb2 hash over a string. + * Replaces `object-hash` which serialises the full outerHTML via JSON + * and is O(n) on the CSS string length — catastrophically slow when + * PandaCSS / federated modules inject hundreds of KB of atomic CSS. + */ +const fastHash = (str: string): string => { + let h = 5381; + for (let i = 0; i < str.length; i++) { + h = (((h << 5) + h) ^ str.charCodeAt(i)) >>> 0; + } + return h.toString(36); +}; + const collectStyles = (doc: Document) => { const collected: HTMLElement[] = []; @@ -66,6 +79,20 @@ const syncAttributes = (sourceElement: Element, targetElement: Element) => { const defer = (fn: () => void) => setTimeout(fn, 0); +/** + * Compute a cheap hash key for a style element. + * - For elements we key on the href (a short string). + * - For