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

Compact style mutation (#464)

Browse Source 
* Don't store the full style attribute change, as small mutations to single style properties result in storage of a rewrite for the full style attribute, which may be very large.

Had an example of a website using http://schillmania.com/projects/snowstorm/ where many direct style changes were happening every second across many 'snowflake' elements, with each attribute change looking like:
"style":"color: rgb(255, 255, 255); position: absolute; width: 8px; height: 8px; font-family: arial, verdana; overflow: hidden; font-weight: normal; z-index: 0; display: block; bottom: auto; opacity: 1; padding: 0px; margin: 0px; font-size: 10px; line-height: 10px; text-align: center; vertical-align: baseline; left: 242.807px; top: 85.7332px;"
even though maybe just the left/top position had been changed

* More compact storage for the much more common attribute value without an `!important` flag - saves 6 chars per style attr in the json :)

* Fix bug: attributes weren't getting removed after changes to treatment of 'style' attributes
This commit is contained in:
Eoghan Murray
2026-04-01 12:00:00 +08:00
committed by GitHub
parent 59b7a39ce1
commit afe6ec9dd1
6 changed files with 114 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
test/utils.ts
View File

@@ -75,14 +75,20 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
s.data.source === IncrementalSource.Mutation
) {
s.data.attributes.forEach((a) => {
if (
'style' in a.attributes &&
coordinatesReg.test(a.attributes.style!)
) {
a.attributes.style = a.attributes.style!.replace(
coordinatesReg,
'$1: Npx',
);
if ('style' in a.attributes && a.attributes.style && typeof a.attributes.style === 'object') {
for (const [k, v] of Object.entries(a.attributes.style)) {
if (Array.isArray(v)) {
if (coordinatesReg.test(k + ': ' + v[0])) {
// TODO: could round the number here instead depending on what's coming out of various test envs
a.attributes.style[k] = ['Npx', v[1]];
}
} else if (typeof v === 'string') {
if (coordinatesReg.test(k + ': ' + v)) {
a.attributes.style[k] = 'Npx';
}
}
coordinatesReg.lastIndex = 0; // wow, a real wart in ECMAScript
}
}
});
s.data.adds.forEach((add) => {
@@ -97,6 +103,7 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
'$1: Npx',
);
}
coordinatesReg.lastIndex = 0; // wow, a real wart in ECMAScript
});
}
delete s.timestamp;