From 93e65f3ae9fbab6d8750a7cfdf6a104163f6d5c5 Mon Sep 17 00:00:00 2001 From: JonasBa Date: Thu, 18 Jul 2024 15:51:13 -0400 Subject: [PATCH] perf: improve blocked and masking logic checks --- packages/rrweb/src/record/mutation.ts | 3 +- .../src/record/processed-node-manager.ts | 5 ++-- packages/rrweb/src/utils.ts | 29 +++++++------------ .../rrweb/test/benchmark/dom-mutation.test.ts | 22 ++++++-------- .../benchmark-dom-mutation-add-and-move.html | 1 + ...benchmark-dom-mutation-add-and-remove.html | 1 + .../benchmark-dom-mutation-attributes.html | 1 + .../benchmark-dom-mutation-deep-nested.html | 1 + ...-dom-mutation-multiple-descendant-add.html | 1 + .../test/html/benchmark-dom-mutation.html | 1 + 10 files changed, 30 insertions(+), 35 deletions(-) diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts index a798441969..b58fb7aaae 100644 --- a/packages/rrweb/src/record/mutation.ts +++ b/packages/rrweb/src/record/mutation.ts @@ -347,8 +347,9 @@ export default class MutationBuffer { } }; + while (this.mapRemoves.length) { - this.mirror.removeNodeFromMap(this.mapRemoves.shift()!); + this.mirror.removeNodeFromMap(this.mapRemoves.pop()!); } for (const n of this.movedSet) { diff --git a/packages/rrweb/src/record/processed-node-manager.ts b/packages/rrweb/src/record/processed-node-manager.ts index c5c3490dab..b3b5fced92 100644 --- a/packages/rrweb/src/record/processed-node-manager.ts +++ b/packages/rrweb/src/record/processed-node-manager.ts @@ -10,9 +10,8 @@ export default class ProcessedNodeManager { public inOtherBuffer(node: Node, thisBuffer: MutationBuffer) { const buffers = this.nodeMap.get(node); - return ( - buffers && Array.from(buffers).some((buffer) => buffer !== thisBuffer) - ); + if (!buffers) return false; + return buffers.has(thisBuffer); } public add(node: Node, buffer: MutationBuffer) { diff --git a/packages/rrweb/src/utils.ts b/packages/rrweb/src/utils.ts index b7fa12506e..a06d346617 100644 --- a/packages/rrweb/src/utils.ts +++ b/packages/rrweb/src/utils.ts @@ -246,29 +246,22 @@ export function isBlocked( blockSelector: string | null, checkAncestors: boolean, ): boolean { - if (!node) { - return false; - } const el = closestElementOfNode(node); + if (!el) return false; + if (!blockClass && !blockSelector) return false; - if (!el) { - return false; - } - - try { - if (typeof blockClass === 'string') { - if (el.classList.contains(blockClass)) return true; - if (checkAncestors && el.closest('.' + blockClass) !== null) return true; - } else { - if (classMatchesRegex(el, blockClass, checkAncestors)) return true; - } - } catch (e) { - // e - } if (blockSelector) { if (el.matches(blockSelector)) return true; - if (checkAncestors && el.closest(blockSelector) !== null) return true; + if (checkAncestors && el.matches(`${blockSelector} *`)) return true; + } + + if (typeof blockClass === 'string') { + if (el.matches(`.${blockClass}`)) return true; + if (checkAncestors && el.matches(`.${blockClass} *`)) return true; + } else { + if (classMatchesRegex(el, blockClass, checkAncestors)) return true; } + return false; } diff --git a/packages/rrweb/test/benchmark/dom-mutation.test.ts b/packages/rrweb/test/benchmark/dom-mutation.test.ts index 96b809e94b..249d92a728 100644 --- a/packages/rrweb/test/benchmark/dom-mutation.test.ts +++ b/packages/rrweb/test/benchmark/dom-mutation.test.ts @@ -89,17 +89,6 @@ describe('benchmark: mutation observer', () => { return fs.readFileSync(filePath, 'utf8'); }; - const addRecordingScript = async (page: Page) => { - // const scriptUrl = `${getServerURL(server)}/rrweb-1.1.3.js`; - const scriptUrl = `${getServerURL(server)}/rrweb.umd.cjs`; - await page.evaluate((url) => { - const scriptEl = document.createElement('script'); - scriptEl.src = url; - document.head.append(scriptEl); - }, scriptUrl); - await page.waitForFunction('window.rrweb'); - }; - for (const suite of suites) { it(suite.title, async () => { page = await browser.newPage(); @@ -110,12 +99,19 @@ describe('benchmark: mutation observer', () => { const loadPage = async () => { if ('html' in suite) { await page.goto('about:blank'); + const code = fs + .readFileSync(path.resolve(__dirname, '../../dist/rrweb.umd.cjs')) + .toString(); + await page.setContent(` + + `); + await page.setContent(getHtml.call(this, suite.html)); } else { await page.goto(suite.url); } - - await addRecordingScript(page); }; const getDuration = async (): Promise => { diff --git a/packages/rrweb/test/html/benchmark-dom-mutation-add-and-move.html b/packages/rrweb/test/html/benchmark-dom-mutation-add-and-move.html index 922b8c9ffc..e9de314b66 100644 --- a/packages/rrweb/test/html/benchmark-dom-mutation-add-and-move.html +++ b/packages/rrweb/test/html/benchmark-dom-mutation-add-and-move.html @@ -1,4 +1,5 @@ +
diff --git a/packages/rrweb/test/html/benchmark-dom-mutation-add-and-remove.html b/packages/rrweb/test/html/benchmark-dom-mutation-add-and-remove.html index 49efad4400..9f63212f28 100644 --- a/packages/rrweb/test/html/benchmark-dom-mutation-add-and-remove.html +++ b/packages/rrweb/test/html/benchmark-dom-mutation-add-and-remove.html @@ -1,4 +1,5 @@ +