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

perf: record processMutation (#1214)

Browse Source 
* perf: record processMutation

* Create mean-tips-impress.md

* Apply formatting changes
This commit is contained in:
fukang wang
2026-04-01 12:00:00 +08:00
committed by GitHub
parent 19727cf50e
commit 6a4a816538
4 changed files with 32 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/mean-tips-impress.md Normal file
View File

@@ -0,0 +1,5 @@
---
'rrweb': patch
---
perf: optimize the performance of record in processMutation phase

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

@@ -656,6 +656,9 @@ export default class MutationBuffer {
// this node was already recorded in other buffer, ignore it // this node was already recorded in other buffer, ignore it
if (this.processedNodeManager.inOtherBuffer(n, this)) return; if (this.processedNodeManager.inOtherBuffer(n, this)) return;
// if n is added to set, there is no need to travel it and its' children again
if (this.addedSet.has(n) || this.movedSet.has(n)) return;
if (this.mirror.hasNode(n)) { if (this.mirror.hasNode(n)) {
if (isIgnored(n, this.mirror)) { if (isIgnored(n, this.mirror)) {
return; return;

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

@@ -30,6 +30,12 @@ const suites: Array<
eval: 'window.workload()', eval: 'window.workload()',
times: 10, times: 10,
}, },
{
title: 'create 1000 DOM nodes and append into its previous looped node',
html: 'benchmark-dom-mutation-multiple-descendant-add.html',
eval: 'window.workload()',
times: 5,
},
]; ];
function avg(v: number[]): number { function avg(v: number[]): number {

18
packages/rrweb/test/html/benchmark-dom-mutation-multiple-descendant-add.html Normal file
View File

@@ -0,0 +1,18 @@
<html>
<body></body>
<script>
function addMultiNodes() {
const total = 1000;
let parent = document.body;
for (let i = 0; i < total; i++) {
const el = document.createElement('div');
el.textContent = `el-${i + 1}`;
parent.append(el);
parent = el;
}
}
window.workload = () => {
addMultiNodes();
};
</script>
</html>