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

30
src/replay/index.ts
View File

@@ -1310,18 +1310,28 @@ export class Replayer {
for (const attributeName in mutation.attributes) {
if (typeof attributeName === 'string') {
const value = mutation.attributes[attributeName];
try {
if (value !== null) {
if (value === null) {
((target as Node) as Element).removeAttribute(attributeName);
} else if (typeof value === 'string') {
try {
((target as Node) as Element).setAttribute(attributeName, value);
} else {
((target as Node) as Element).removeAttribute(attributeName);
} catch (error) {
if (this.config.showWarning) {
console.warn(
'An error occurred may due to the checkout feature.',
error,
);
}
}
} catch (error) {
if (this.config.showWarning) {
console.warn(
'An error occurred may due to the checkout feature.',
error,
);
} else if (attributeName === 'style') {
for (var s in value) {
if (value[s] === false) {
((target as Node) as Element).style.removeProperty(s);
} else if (Array.isArray(value[s])) {
((target as Node) as Element).style.setProperty(s, value[s][0], value[s][1]);
} else {
((target as Node) as Element).style.setProperty(s, value[s]);
}
}
}
}