Skip to content

merge rrweb #903 performance improvements #75

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 24 commits into from
Jun 13, 2022
Merged

merge rrweb #903 performance improvements #75

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
8069055
Remove INode (`node.__sn`) and use Mirror as source of truth (#868)
Juice10 Apr 6, 2022
627d54f
Fix mutation edge case when blocked class gets unblocked (#867)
rahulrelicx Apr 15, 2022
1c851c9
Record canvas snapshots N times per second (#859)
Juice10 Apr 18, 2022
94e0007
Test: Stylesheet append text node (#886)
Juice10 May 5, 2022
b49f505
Fix for issue #890 (#891)
dkozlovskyi May 9, 2022
c3de806
Perf: Apply the latest text mutation only (#885)
Juice10 May 9, 2022
0e91e84
* rrdom: add a diff function for properties
Juice10 May 12, 2022
4711692
Introduce benchmark tests and improve snapshot attributes traversing …
Yuyz0112 May 14, 2022
dc64d49
Chore: Add issue/pr template and general housekeeping tools and docs …
Juice10 May 22, 2022
1d7fcbd
Fix #904 (#906)
Juice10 May 31, 2022
11cd5ca
inline stylesheets when loaded
Juice10 May 31, 2022
3514b4f
set empty link elements to loaded by default
Juice10 Jun 1, 2022
1dcd7ea
Clean up stylesheet manager
Juice10 Jun 1, 2022
a345326
Remove attribute mutation code
Juice10 Jun 2, 2022
e7e78fb
Bump minimist from 1.2.5 to 1.2.6 (#902)
dependabot[bot] Jun 5, 2022
e0215fe
Speed up snapshotting of many new dom nodes (#903)
Juice10 Jun 6, 2022
1e784f6
highlight fixes after merge
Vadman97 Jun 2, 2022
2637be9
cleanup script
Vadman97 Jun 9, 2022
2cc2b5f
bump versions
Vadman97 Jun 9, 2022
3df6929
update version dependencies
Vadman97 Jun 10, 2022
789073d
fix rebuild not restoring inlined images
Vadman97 Jun 10, 2022
5d0842f
inline stylesheets when loaded
Juice10 May 31, 2022
8d38f64
fixup! inline stylesheets when loaded
Vadman97 Jun 10, 2022
9c64602
avoid crash on rrdom diff issues
Vadman97 Jun 13, 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
inline stylesheets when loaded 
set empty link elements to loaded by default

Clean up stylesheet manager

Remove attribute mutation code

Update packages/rrweb/test/record.test.ts

Update packages/rrweb/test/record.test.ts

Update packages/rrweb/test/record.test.ts

Move require out of time sensitive assert

Update packages/rrweb/scripts/repl.js

Update packages/rrweb/test/record.test.ts

Update packages/rrweb/src/record/index.ts

Add todo

Add waitForRAF, its more reliable than waitForTimeout

Remove flaky tests

Add recording stylesheets in iframes

Remove variability from flaky test

Make test more robust
  • Loading branch information
@Juice10 @Vadman97
Juice10 authored and Vadman97 committed Jun 10, 2022
commit 5d0842f02fdde23ee0fe6a3306ce23a5f1a8d4ee
6 changes: 2 additions & 4 deletions packages/rrdom/test/polyfill.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
polyfillNode,
polyfillDocument,
} from '../src/polyfill';
import { performance as nativePerformance } from 'perf_hooks';

describe('polyfill for nodejs', () => {
it('should polyfill performance api', () => {
Expand All @@ -16,10 +17,7 @@ describe('polyfill for nodejs', () => {
expect(global.performance).toBeDefined();
expect(performance).toBeDefined();
expect(performance.now).toBeDefined();
expect(performance.now()).toBeCloseTo(
require('perf_hooks').performance.now(),
1e-10,
);
expect(performance.now()).toBeCloseTo(nativePerformance.now(), 1e-10);
});

it('should not polyfill performance if it already exists', () => {
Expand Down
5 changes: 4 additions & 1 deletion packages/rrweb-snapshot/src/snapshot.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1152,6 +1152,8 @@ export function serializeNodeWithId(
onSerialize,
onIframeLoad,
iframeLoadTimeout,
onStylesheetLoad,
stylesheetLoadTimeout,
keepIframeSrcFn,
enableStrictPrivacy,
});
Expand Down Expand Up @@ -1197,8 +1199,9 @@ export function serializeNodeWithId(
preserveWhiteSpace,
onSerialize,
onIframeLoad,
onStylesheetLoad,
iframeLoadTimeout,
onStylesheetLoad,
stylesheetLoadTimeout,
keepIframeSrcFn,
enableStrictPrivacy
});
Expand Down
8 changes: 4 additions & 4 deletions packages/rrweb/src/record/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -286,9 +286,9 @@ function record<T = eventWithTime>(
if (isSerializedIframe(n, mirror)) {
iframeManager.addIframe(n as HTMLIFrameElement);
}
// if (isSerializedStylesheet(n, mirror)) {
// stylesheetManager.addStylesheet(n as HTMLLinkElement);
// }
if (isSerializedStylesheet(n, mirror)) {
stylesheetManager.addStylesheet(n as HTMLLinkElement);
}
if (hasShadowRoot(n)) {
shadowDomManager.addShadowRoot(n.shadowRoot, document);
}
Expand All @@ -298,7 +298,7 @@ function record<T = eventWithTime>(
shadowDomManager.observeAttachShadow(iframe);
},
onStylesheetLoad: (linkEl, childSn) => {
this.stylesheetManager.attachStylesheet(linkEl, childSn, this.mirror);
stylesheetManager.attachStylesheet(linkEl, childSn, mirror);
},
keepIframeSrcFn,
});
Expand Down
3 changes: 2 additions & 1 deletion packages/rrweb/src/record/stylesheet-manager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { Mirror, serializedNodeWithId } from '@highlight-run/rrweb-snapshot';
import type { Mirror, serializedNodeWithId } from 'rrweb-snapshot';
import type { mutationCallBack } from '../types';

export class StylesheetManager {
Expand All @@ -16,6 +16,7 @@ export class StylesheetManager {
this.trackStylesheet(linkEl);
}

// TODO: take snapshot on stylesheet reload by applying event listener
private trackStylesheet(linkEl: HTMLLinkElement) {
// linkEl.addEventListener('load', () => {
// // re-loaded, maybe take another snapshot?
Expand Down
302 changes: 302 additions & 0 deletions packages/rrweb/test/__snapshots__/record.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -743,6 +743,308 @@ exports[`record captures stylesheet rules 1`] = `
]"
`;

exports[`record captures stylesheets in iframes that are still loading 1`] = `
"[
{
\\"type\\": 4,
\\"data\\": {
\\"href\\": \\"about:blank\\",
\\"width\\": 1920,
\\"height\\": 1080
}
},
{
\\"type\\": 2,
\\"data\\": {
\\"node\\": {
\\"type\\": 0,
\\"childNodes\\": [
{
\\"type\\": 1,
\\"name\\": \\"html\\",
\\"publicId\\": \\"\\",
\\"systemId\\": \\"\\",
\\"id\\": 2
},
{
\\"type\\": 2,
\\"tagName\\": \\"html\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 2,
\\"tagName\\": \\"head\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 4
},
{
\\"type\\": 2,
\\"tagName\\": \\"body\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 6
},
{
\\"type\\": 2,
\\"tagName\\": \\"input\\",
\\"attributes\\": {
\\"type\\": \\"text\\",
\\"size\\": \\"40\\"
},
\\"childNodes\\": [],
\\"id\\": 7
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\\\n \\",
\\"id\\": 8
},
{
\\"type\\": 2,
\\"tagName\\": \\"iframe\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 9
}
],
\\"id\\": 5
}
],
\\"id\\": 3
}
],
\\"id\\": 1
},
\\"initialOffset\\": {
\\"left\\": 0,
\\"top\\": 0
}
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 0,
\\"adds\\": [
{
\\"parentId\\": 9,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 0,
\\"childNodes\\": [
{
\\"type\\": 2,
\\"tagName\\": \\"html\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 2,
\\"tagName\\": \\"head\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"rootId\\": 10,
\\"id\\": 12
},
{
\\"type\\": 2,
\\"tagName\\": \\"body\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"rootId\\": 10,
\\"id\\": 14
}
],
\\"rootId\\": 10,
\\"id\\": 11
}
],
\\"compatMode\\": \\"BackCompat\\",
\\"id\\": 10
}
}
],
\\"removes\\": [],
\\"texts\\": [],
\\"attributes\\": [],
\\"isAttachIframe\\": true
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 0,
\\"adds\\": [
{
\\"parentId\\": 13,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 2,
\\"tagName\\": \\"link\\",
\\"attributes\\": {
\\"_cssText\\": \\"body { color: pink; }\\"
},
\\"childNodes\\": [],
\\"rootId\\": 10,
\\"id\\": 13
}
}
],
\\"removes\\": [],
\\"texts\\": [],
\\"attributes\\": []
}
}
]"
`;

exports[`record captures stylesheets in iframes with \`blob:\` url 1`] = `
"[
{
\\"type\\": 4,
\\"data\\": {
\\"href\\": \\"about:blank\\",
\\"width\\": 1920,
\\"height\\": 1080
}
},
{
\\"type\\": 2,
\\"data\\": {
\\"node\\": {
\\"type\\": 0,
\\"childNodes\\": [
{
\\"type\\": 1,
\\"name\\": \\"html\\",
\\"publicId\\": \\"\\",
\\"systemId\\": \\"\\",
\\"id\\": 2
},
{
\\"type\\": 2,
\\"tagName\\": \\"html\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 2,
\\"tagName\\": \\"head\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 4
},
{
\\"type\\": 2,
\\"tagName\\": \\"body\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 6
},
{
\\"type\\": 2,
\\"tagName\\": \\"input\\",
\\"attributes\\": {
\\"type\\": \\"text\\",
\\"size\\": \\"40\\"
},
\\"childNodes\\": [],
\\"id\\": 7
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\\\n \\",
\\"id\\": 8
},
{
\\"type\\": 2,
\\"tagName\\": \\"iframe\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 9
}
],
\\"id\\": 5
}
],
\\"id\\": 3
}
],
\\"id\\": 1
},
\\"initialOffset\\": {
\\"left\\": 0,
\\"top\\": 0
}
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 0,
\\"adds\\": [
{
\\"parentId\\": 9,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 0,
\\"childNodes\\": [
{
\\"type\\": 2,
\\"tagName\\": \\"html\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 2,
\\"tagName\\": \\"head\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 2,
\\"tagName\\": \\"link\\",
\\"attributes\\": {
\\"_cssText\\": \\"body { color: pink; }\\"
},
\\"childNodes\\": [],
\\"rootId\\": 10,
\\"id\\": 13
}
],
\\"rootId\\": 10,
\\"id\\": 12
},
{
\\"type\\": 2,
\\"tagName\\": \\"body\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"rootId\\": 10,
\\"id\\": 14
}
],
\\"rootId\\": 10,
\\"id\\": 11
}
],
\\"compatMode\\": \\"BackCompat\\",
\\"id\\": 10
}
}
],
\\"removes\\": [],
\\"texts\\": [],
\\"attributes\\": [],
\\"isAttachIframe\\": true
}
}
]"
`;

exports[`record captures stylesheets that are still loading 1`] = `
"[
{
Expand Down
3 changes: 2 additions & 1 deletion packages/rrweb/test/integration.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -576,7 +576,8 @@ describe('record integration tests', function (this: ISuite) {
);
});
});
await page.waitForTimeout(50);
await page.waitForTimeout(20); // 20ms of sleep time
await waitForRAF(page); // wait for events to get created

const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots);
Expand Down
Loading