diff --git a/packages/rrweb/test/benchmark/dom-mutation.test.ts b/packages/rrweb/test/benchmark/dom-mutation.test.ts index 3da794db45..50d6ba6104 100644 --- a/packages/rrweb/test/benchmark/dom-mutation.test.ts +++ b/packages/rrweb/test/benchmark/dom-mutation.test.ts @@ -10,6 +10,10 @@ const suites: Array< title: string; eval: string; times?: number; // defaults to 5 + recordOptions?: { + maskTextClass?: string; + unmaskTextClass?: string; + }; } & ({ html: string } | { url: string }) > = [ // { @@ -42,6 +46,25 @@ const suites: Array< eval: 'window.workload()', times: 5, }, + { + title: 'mask 1000x10 DOM nodes', + html: 'benchmark-text-masking.html', + eval: 'window.workload()', + times: 10, + recordOptions: { + maskTextClass: 'rr-mask', + }, + }, + { + title: 'unmask 1000x10 DOM nodes', + html: 'benchmark-text-masking.html', + eval: 'window.workload()', + times: 10, + recordOptions: { + maskTextClass: 'rr-mask', + unmaskTextClass: 'rr-unmask', + }, + }, ]; function avg(v: number[]): number { @@ -106,35 +129,40 @@ describe('benchmark: mutation observer', () => { }; const getDuration = async (): Promise => { - return (await page.evaluate((triggerWorkloadScript) => { - return new Promise((resolve, reject) => { - let start = 0; - let lastEvent: eventWithTime | null; - const options: recordOptions = { - emit: (event) => { - // console.log(event.type, event.timestamp); - if (event.type !== 5 || event.data.tag !== 'FTAG') { - lastEvent = event; - return; - } - if (!lastEvent) { - reject('no events recorded'); - return; - } - resolve(lastEvent.timestamp - start); - }, - }; - const record = (window as any).rrweb.record; - record(options); - - start = Date.now(); - eval(triggerWorkloadScript); - - requestAnimationFrame(() => { - record.addCustomEvent('FTAG', {}); + return (await page.evaluate( + (triggerWorkloadScript, recordOptions) => { + return new Promise((resolve, reject) => { + let start = 0; + let lastEvent: eventWithTime | null; + const options: recordOptions = { + ...recordOptions, + emit: (event) => { + // console.log(event.type, event.timestamp); + if (event.type !== 5 || event.data.tag !== 'FTAG') { + lastEvent = event; + return; + } + if (!lastEvent) { + reject('no events recorded'); + return; + } + resolve(lastEvent.timestamp - start); + }, + }; + const record = (window as any).rrweb.record; + record(options); + + start = Date.now(); + eval(triggerWorkloadScript); + + requestAnimationFrame(() => { + record.addCustomEvent('FTAG', {}); + }); }); - }); - }, suite.eval)) as number; + }, + suite.eval, + suite.recordOptions || {} + )) as number; }; // generate profile.json file diff --git a/packages/rrweb/test/html/benchmark-text-masking.html b/packages/rrweb/test/html/benchmark-text-masking.html new file mode 100644 index 0000000000..3c7d730fc3 --- /dev/null +++ b/packages/rrweb/test/html/benchmark-text-masking.html @@ -0,0 +1,30 @@ + + + +