xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Perf: Avoid creation of intermediary array when iterating over style rules (#1272)

Browse Source 
* 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>
This commit is contained in:
Eoghan Murray
2023-08-15 10:39:29 +01:00
committed by GitHub
parent 64420c7e46
commit 58c9104edd
3 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/nervous-mirrors-perform.md Normal file
View File

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

2
packages/rrweb-snapshot/src/utils.ts
View File

@@ -98,7 +98,7 @@ export function stringifyStylesheet(s: CSSStyleSheet): string | null {
const rules = s.rules || s.cssRules; const rules = s.rules || s.cssRules;
return rules return rules
? fixBrowserCompatibilityIssuesInCSS( ? fixBrowserCompatibilityIssuesInCSS(
Array.from(rules).map(stringifyRule).join(''), Array.from(rules, stringifyRule).join(''),
) )
: null; : null;
} catch (error) { } catch (error) {

11
packages/rrweb/src/record/stylesheet-manager.ts
View File

@@ -61,15 +61,12 @@ export class StylesheetManager {
let styleId; let styleId;
if (!this.styleMirror.has(sheet)) { if (!this.styleMirror.has(sheet)) {
styleId = this.styleMirror.add(sheet); styleId = this.styleMirror.add(sheet);
const rules = Array.from(sheet.rules || CSSRule);
styles.push({ styles.push({
styleId, styleId,
rules: rules.map((r, index) => { rules: Array.from(sheet.rules || CSSRule, (r, index) => ({
return { rule: stringifyRule(r),
rule: stringifyRule(r), index,
index, })),
};
}),
}); });
} else styleId = this.styleMirror.getId(sheet); } else styleId = this.styleMirror.getId(sheet);
adoptedStyleSheetData.styleIds.push(styleId); adoptedStyleSheetData.styleIds.push(styleId);