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

perf(mutation): refactor parent removed detection to iterative procedure (#1489)

Browse Source 
* perf(mutation): add deep tree benchmark

* perf(mutation): use iterative procedure

* perf(mutation): run formatter

* perf(mutation): add changeset
This commit is contained in:
Jonas
2026-04-01 12:00:00 +08:00
committed by GitHub
parent 2633dea9c0
commit 4055c69e26
4 changed files with 50 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/kind-kids-design.md Normal file
View File

@@ -0,0 +1,5 @@
---
"rrweb": patch
---
Optimize performance of isParentRemoved by converting it to an iterative procedure

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

@@ -802,15 +802,15 @@ function _isParentRemoved(
n: Node,
mirror: Mirror,
): boolean {
const { parentNode } = n;
if (!parentNode) {
return false;
let node: ParentNode | null = n.parentNode;
while (node) {
const parentId = mirror.getId(node);
if (removes.some((r) => r.id === parentId)) {
return true;
}
node = node.parentNode;
}
const parentId = mirror.getId(parentNode);
if (removes.some((r) => r.id === parentId)) {
return true;
}
return _isParentRemoved(removes, parentNode, mirror);
return false;
}
function isAncestorInSet(set: Set<Node>, n: Node): boolean {

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

@@ -18,6 +18,12 @@ const suites: Array<
// eval: 'document.querySelector("button").click()',
// times: 10,
// },
{
title: 'create 1000x 1 DOM nodes with deeply nested children',
html: 'benchmark-dom-mutation-deep-nested.html',
eval: 'window.workload()',
times: 10,
},
{
title: 'create 1000x10 DOM nodes',
html: 'benchmark-dom-mutation.html',

31
packages/rrweb/test/html/benchmark-dom-mutation-deep-nested.html Normal file
View File

@@ -0,0 +1,31 @@
<html>
<body></body>
<script>
function init() {
const count = 100;
let roots = [];
for (let i = 0; i < count; ++i) {
const div = document.createElement('div');
document.body.appendChild(div);
roots.push(div);
}
let tree_depth = 256;
let children = [...roots];
while (tree_depth > 0) {
for (let i = 0; i < children.length; i++) {
const div = document.createElement('div');
children[i].appendChild(div);
children[i] = div;
}
tree_depth--;
}
}
window.workload = () => {
document.body.innerHTML = '';
init();
};
</script>
</html>