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 <[email protected]> Authored-by: Eoghan Murray <[email protected]>
rrweb-io · Aug 15, 2023 · 58c9104 · 58c9104
1 parent 64420c7
commit 58c9104
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/.changeset/nervous-mirrors-perform.md 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
@@ -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
@@ -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);