From 705a03a84eeceae16b815d4d034414293ebd611f Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Wed, 1 Apr 2026 12:00:00 +0800
Subject: [PATCH] Perf: Avoid creation of intermediary array when iterating
 over style rules (#1272)

* Perf: Avoid creation of intermediary array when iterating over stylesheet rules by using the second `mapFn` argument of Array.from

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

Performance analysis by: JonasBA <jonas@badalic.com>
Authored-by: Eoghan Murray <eoghan@getthere.ie>
---
 .changeset/nervous-mirrors-perform.md           |  6 ++++++
 packages/rrweb-snapshot/src/utils.ts            |  2 +-
 packages/rrweb/src/record/stylesheet-manager.ts | 11 ++++-------
 3 files changed, 11 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/nervous-mirrors-perform.md

diff --git a/.changeset/nervous-mirrors-perform.md b/.changeset/nervous-mirrors-perform.md
new file mode 100644
index 00000000..46cf31fe
--- /dev/null
+++ b/.changeset/nervous-mirrors-perform.md
@@ -0,0 +1,6 @@
+---
+'rrweb-snapshot': patch
+'rrweb': patch
+---
+
+Perf: Avoid creation of intermediary array when iterating over style rules
diff --git a/packages/rrweb-snapshot/src/utils.ts b/packages/rrweb-snapshot/src/utils.ts
index 02043995..95444c18 100644
--- a/packages/rrweb-snapshot/src/utils.ts
+++ b/packages/rrweb-snapshot/src/utils.ts
@@ -98,7 +98,7 @@ export function stringifyStylesheet(s: CSSStyleSheet): string | null {
     const rules = s.rules || s.cssRules;
     return rules
       ? fixBrowserCompatibilityIssuesInCSS(
-          Array.from(rules).map(stringifyRule).join(''),
+          Array.from(rules, stringifyRule).join(''),
         )
       : null;
   } catch (error) {
diff --git a/packages/rrweb/src/record/stylesheet-manager.ts b/packages/rrweb/src/record/stylesheet-manager.ts
index b517b720..6e0a8077 100644
--- a/packages/rrweb/src/record/stylesheet-manager.ts
+++ b/packages/rrweb/src/record/stylesheet-manager.ts
@@ -61,15 +61,12 @@ export class StylesheetManager {
       let styleId;
       if (!this.styleMirror.has(sheet)) {
         styleId = this.styleMirror.add(sheet);
-        const rules = Array.from(sheet.rules || CSSRule);
         styles.push({
           styleId,
-          rules: rules.map((r, index) => {
-            return {
-              rule: stringifyRule(r),
-              index,
-            };
-          }),
+          rules: Array.from(sheet.rules || CSSRule, (r, index) => ({
+            rule: stringifyRule(r),
+            index,
+          })),
         });
       } else styleId = this.styleMirror.getId(sheet);
       adoptedStyleSheetData.styleIds.push(styleId);