Skip to content

Speed up snapshotting of many new dom nodes #903

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 18 commits into from
Jun 6, 2022
Merged

Speed up snapshotting of many new dom nodes #903

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
ed86eca
Speed up snapshotting of many new dom nodes
Juice10 May 25, 2022
30e4f7d
Improve newlyAddedElement docs
Juice10 May 25, 2022
39a70d0
Optimize needMaskingText by using el.closest and less recursion
Juice10 May 26, 2022
778471e
Serve all rrweb dist files
Juice10 May 26, 2022
9eaf4ce
Split serializeNode into smaller functions
Juice10 May 26, 2022
5d77c7b
Slow down cpu enhance tracing on fast machines
Juice10 May 26, 2022
909c127
Increase timeout
Juice10 May 26, 2022
d289cde
Perf: only loop through ancestors when they have something to compare to
Juice10 May 27, 2022
9d666d3
Perf: `hasNode` is cheaper than `getMeta`
Juice10 May 27, 2022
ff2b225
Perf: If parents where already checked, no need to do it again
Juice10 May 27, 2022
b179941
Perf: reverse for loops are faster
Juice10 May 27, 2022
b2ae33e
Clean up code
Juice10 May 27, 2022
288c275
Perf: check ancestors once with isBlocked
Juice10 May 28, 2022
64c50a9
guessing this might fixes canvas test
Juice10 May 28, 2022
038f40e
Update packages/rrweb/src/record/observers/canvas/webgl.ts
Juice10 Jun 5, 2022
0a63f4c
Fix #904 (#906)
Juice10 May 31, 2022
4b4e343
Bump minimist from 1.2.5 to 1.2.6 (#902)
dependabot[bot] Jun 5, 2022
100c12f
Merge branch 'master' into serialize-perf
Juice10 Jun 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Perf: only loop through ancestors when they have something to compare to
  • Loading branch information
@Juice10
Juice10 committed May 27, 2022
commit d289cde95120c919668c3b16ccc7af161138d632
18 changes: 16 additions & 2 deletions packages/rrweb/src/record/mutation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -617,6 +617,15 @@ function isParentRemoved(
removes: removedNodeMutation[],
n: Node,
mirror: Mirror,
): boolean {
if (removes.length === 0) return false;
return _isParentRemoved(removes, n, mirror);
}

function _isParentRemoved(
removes: removedNodeMutation[],
n: Node,
mirror: Mirror,
): boolean {
const { parentNode } = n;
if (!parentNode) {
Expand All @@ -626,16 +635,21 @@ function isParentRemoved(
if (removes.some((r) => r.id === parentId)) {
return true;
}
return isParentRemoved(removes, parentNode, mirror);
return _isParentRemoved(removes, parentNode, mirror);
}

function isAncestorInSet(set: Set<Node>, n: Node): boolean {
if (set.size === 0) return false;
return _isAncestorInSet(set, n);
}

function _isAncestorInSet(set: Set<Node>, n: Node): boolean {
const { parentNode } = n;
if (!parentNode) {
return false;
}
if (set.has(parentNode)) {
return true;
}
return isAncestorInSet(set, parentNode);
return _isAncestorInSet(set, parentNode);
}
6 changes: 6 additions & 0 deletions packages/rrweb/test/benchmark/dom-mutation.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,12 @@ const suites: Array<
eval: 'window.workload()',
times: 10,
},
{
title: 'create 1000x10x2 DOM nodes and remove a bunch of them',
html: 'benchmark-dom-mutation-add-and-remove.html',
eval: 'window.workload()',
times: 10,
},
];

function avg(v: number[]): number {
Expand Down
46 changes: 46 additions & 0 deletions packages/rrweb/test/html/benchmark-dom-mutation-add-and-remove.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<html>
<body></body>
<script>
function add() {
const branches = 1000;
const depth = 10;
const frag = document.createDocumentFragment();
for (let b = 0; b < branches; b++) {
const node = document.createElement('div');
let d = 0;
node.setAttribute('branch', b.toString());
node.setAttribute('depth', d.toString());
let current = node;
while (d < depth - 1) {
d++;
const child = document.createElement('div');
child.setAttribute('branch', b.toString());
child.setAttribute('depth', d.toString());
current.appendChild(child);
current = child;
}
frag.appendChild(node);
}
document.body.appendChild(frag);
}

function remove() {
// const divs = Array.from(document.querySelectorAll('div'));
// const half = divs.length / 2;
// while (divs.length > half) {
// const i = (divs.length * Math.random()) | 0;
// divs[i].remove();
// divs.splice(i, 1);
// }
document.querySelectorAll('div').forEach((node) => {
node.parentNode.removeChild(node);
});
}

window.workload = () => {
add();
remove();
add();
};
</script>
</html>