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

perf: optimize performance of the DoubleLinkedList get (#1220)

Browse Source 
* perf: optimize performance of the DoubleLinkedList get

* fix: delete addedNodeIndexArr
This commit is contained in:
fukang wang
2026-04-01 12:00:00 +08:00
committed by GitHub
parent 4a247f0a73
commit d8ef6159e2
4 changed files with 60 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/gold-terms-look.md Normal file
View File

@@ -0,0 +1,5 @@
---
'rrweb': patch
---
perf: optimize performance of the DoubleLinkedList get

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

@@ -48,6 +48,7 @@ function isNodeInLinkedList(n: Node | NodeInLinkedList): n is NodeInLinkedList {
class DoubleLinkedList {
public length = 0;
public head: DoubleLinkedListNode | null = null;
public tail: DoubleLinkedListNode | null = null;
public get(position: number) {
if (position >= this.length) {
@@ -95,6 +96,9 @@ class DoubleLinkedList {
node.next = this.head;
this.head = node;
}
if (node.next === null) {
this.tail = node;
}
this.length++;
}
@@ -108,11 +112,15 @@ class DoubleLinkedList {
this.head = current.next;
if (this.head) {
this.head.previous = null;
} else {
this.tail = null;
}
} else {
current.previous.next = current.next;
if (current.next) {
current.next.previous = current.previous;
} else {
this.tail = current.previous;
}
}
if (n.__ln) {
@@ -368,8 +376,10 @@ export default class MutationBuffer {
}
}
if (!node) {
for (let index = addList.length - 1; index >= 0; index--) {
const _node = addList.get(index);
let tailNode = addList.tail;
while (tailNode) {
const _node = tailNode;
tailNode = tailNode.previous;
// ensure _node is defined before attempting to find value
if (_node) {
const parentId = this.mirror.getId(_node.value.parentNode);

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

@@ -36,6 +36,12 @@ const suites: Array<
eval: 'window.workload()',
times: 5,
},
{
title: 'create 10000 DOM nodes and move it to new container',
html: 'benchmark-dom-mutation-add-and-move.html',
eval: 'window.workload()',
times: 5,
},
];
function avg(v: number[]): number {

37
packages/rrweb/test/html/benchmark-dom-mutation-add-and-move.html Normal file
View File

@@ -0,0 +1,37 @@
<html>
<body>
<div id="app"></div>
</body>
<script>
function appendNodes(parentNode, total) {
const el = document.createElement('div');
for (let i = 0; i < total; i++) {
const div = document.createElement('div');
div.innerHTML = `div-${i + 1}`;
el.append(div);
}
parentNode.append(el);
return el;
}
function addAndMove() {
const app = document.getElementById('app');
const elContainer = appendNodes(app, 10000);
const newAppContainer = document.createElement('div');
newAppContainer.append(elContainer);
document.body.append(newAppContainer);
app.remove();
// necessary
appendNodes(document.body, 1);
}
window.workload = () => {
addAndMove();
};
</script>
</html>