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

@@ -0,0 +1,6 @@
+---
+'rrweb-snapshot': patch
+'rrweb': patch
+---
+
+Perf: Avoid creation of intermediary array when iterating over style rules

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) {

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 {
+          rules: Array.from(sheet.rules || CSSRule, (r, index) => ({
             rule: stringifyRule(r),
             index,
-            };
-          }),
+          })),
         });
       } else styleId = this.styleMirror.getId(sheet);
       adoptedStyleSheetData.styleIds.push(styleId);