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

perf(rrweb): attribute mutation optimization (#1343)

Browse Source
This commit is contained in:
Michael Dellanoce
2026-04-01 12:00:00 +08:00
committed by GitHub
parent 6dafa924d2
commit a8dcca54d8
4 changed files with 36 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/moody-dots-refuse.md Normal file
View File

@@ -0,0 +1,5 @@
---
'rrweb': patch
---
use WeakMap for faster attributeCursor lookup while processing attribute mutations

7
packages/rrweb/src/record/mutation.ts
View File

@@ -142,6 +142,7 @@ export default class MutationBuffer {
private texts: textCursor[] = [];
private attributes: attributeCursor[] = [];
private attributeMap = new WeakMap<Node, attributeCursor>();
private removes: removedNodeMutation[] = [];
private mapRemoves: Node[] = [];
@@ -485,6 +486,7 @@ export default class MutationBuffer {
// reset
this.texts = [];
this.attributes = [];
this.attributeMap = new WeakMap<Node, attributeCursor>();
this.removes = [];
this.addedSet = new Set<Node>();
this.movedSet = new Set<Node>();
@@ -554,9 +556,7 @@ export default class MutationBuffer {
return;
}
let item: attributeCursor | undefined = this.attributes.find(
(a) => a.node === m.target,
);
let item = this.attributeMap.get(m.target);
if (
target.tagName === 'IFRAME' &&
attributeName === 'src' &&
@@ -578,6 +578,7 @@ export default class MutationBuffer {
_unchangedStyles: {},
};
this.attributes.push(item);
this.attributeMap.set(m.target, item);
}
// Keep this property on inputs that used to be password inputs

6
packages/rrweb/test/benchmark/dom-mutation.test.ts
View File

@@ -42,6 +42,12 @@ const suites: Array<
eval: 'window.workload()',
times: 5,
},
{
title: 'modify attributes on 10000 DOM nodes',
html: 'benchmark-dom-mutation-attributes.html',
eval: 'window.workload()',
times: 10,
},
];
function avg(v: number[]): number {

21
packages/rrweb/test/html/benchmark-dom-mutation-attributes.html Normal file
View File

@@ -0,0 +1,21 @@
<html>
<body></body>
<script>
function init() {
const count = 10000;
for (let i = 0; i < count; ++i) {
const div = document.createElement('div');
document.body.appendChild(div);
}
}
init();
window.workload = () => {
const divs = document.getElementsByTagName('div');
for (let div of divs) {
div.classList.add('foo');
}
};
</script>
</html>