Skip to content

Commit

Permalink
See rrweb-io#1339 - perf: remove a nested function call and an object…
Browse files Browse the repository at this point in the history 
… clone per event
  • Loading branch information
@eoghanmurray
eoghanmurray committed Apr 9, 2024
1 parent 3d1877c commit 230a507
Show file tree
Hide file tree
Showing 2 changed files with 132 additions and 168 deletions.
5 changes: 5 additions & 0 deletions .changeset/event-single-wrap.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'rrweb': patch
---

perf: Avoid an extra function call and object clone during event emission
295 changes: 127 additions & 168 deletions packages/rrweb/src/record/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,13 +40,6 @@ import {
unregisterErrorHandler,
} from './error-handler';

function wrapEvent(e: event): eventWithTime {
return {
...e,
timestamp: nowTimestamp(),
};
}

let wrappedEmit!: (e: eventWithTime, isCheckout?: boolean) => void;

let takeFullSnapshot!: (isCheckout?: boolean) => void;
Expand Down Expand Up @@ -187,7 +180,9 @@ function record<T = eventWithTime>(
}
return e as unknown as T;
};
wrappedEmit = (e: eventWithTime, isCheckout?: boolean) => {
wrappedEmit = (eWithoutTime: event, isCheckout?: boolean) => {
const e = eWithoutTime as eventWithTime;
e.timestamp = nowTimestamp();
if (
mutationBuffers[0]?.isFrozen() &&
e.type !== EventType.FullSnapshot &&
Expand Down Expand Up @@ -238,47 +233,39 @@ function record<T = eventWithTime>(
};

const wrappedMutationEmit = (m: mutationCallbackParam) => {
wrappedEmit(
wrapEvent({
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Mutation,
...m,
},
}),
);
wrappedEmit({
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Mutation,
...m,
},
});
};
const wrappedScrollEmit: scrollCallback = (p) =>
wrappedEmit(
wrapEvent({
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Scroll,
...p,
},
}),
);
wrappedEmit({
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Scroll,
...p,
},
});
const wrappedCanvasMutationEmit = (p: canvasMutationParam) =>
wrappedEmit(
wrapEvent({
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.CanvasMutation,
...p,
},
}),
);
wrappedEmit({
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.CanvasMutation,
...p,
},
});

const wrappedAdoptedStyleSheetEmit = (a: adoptedStyleSheetParam) =>
wrappedEmit(
wrapEvent({
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.AdoptedStyleSheet,
...a,
},
}),
);
wrappedEmit({
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.AdoptedStyleSheet,
...a,
},
});

const stylesheetManager = new StylesheetManager({
mutationCb: wrappedMutationEmit,
Expand Down Expand Up @@ -350,14 +337,14 @@ function record<T = eventWithTime>(
return;
}
wrappedEmit(
wrapEvent({
{
type: EventType.Meta,
data: {
href: window.location.href,
width: getWindowWidth(),
height: getWindowHeight(),
},
}),
},
isCheckout,
);

Expand Down Expand Up @@ -406,13 +393,13 @@ function record<T = eventWithTime>(
}

wrappedEmit(
wrapEvent({
{
type: EventType.FullSnapshot,
data: {
node,
initialOffset: getWindowScroll(window),
},
}),
},
isCheckout,
);
mutationBuffers.forEach((buf) => buf.unlock()); // generate & emit any mutations that happened during snapshotting, as can now apply against the newly built mirror
Expand All @@ -433,108 +420,88 @@ function record<T = eventWithTime>(
{
mutationCb: wrappedMutationEmit,
mousemoveCb: (positions, source) =>
wrappedEmit(
wrapEvent({
type: EventType.IncrementalSnapshot,
data: {
source,
positions,
},
}),
),
wrappedEmit({
type: EventType.IncrementalSnapshot,
data: {
source,
positions,
},
}),
mouseInteractionCb: (d) =>
wrappedEmit(
wrapEvent({
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.MouseInteraction,
...d,
},
}),
),
wrappedEmit({
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.MouseInteraction,
...d,
},
}),
scrollCb: wrappedScrollEmit,
viewportResizeCb: (d) =>
wrappedEmit(
wrapEvent({
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.ViewportResize,
...d,
},
}),
),
wrappedEmit({
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.ViewportResize,
...d,
},
}),
inputCb: (v) =>
wrappedEmit(
wrapEvent({
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Input,
...v,
},
}),
),
wrappedEmit({
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Input,
...v,
},
}),
mediaInteractionCb: (p) =>
wrappedEmit(
wrapEvent({
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.MediaInteraction,
...p,
},
}),
),
wrappedEmit({
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.MediaInteraction,
...p,
},
}),
styleSheetRuleCb: (r) =>
wrappedEmit(
wrapEvent({
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.StyleSheetRule,
...r,
},
}),
),
wrappedEmit({
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.StyleSheetRule,
...r,
},
}),
styleDeclarationCb: (r) =>
wrappedEmit(
wrapEvent({
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.StyleDeclaration,
...r,
},
}),
),
wrappedEmit({
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.StyleDeclaration,
...r,
},
}),
canvasMutationCb: wrappedCanvasMutationEmit,
fontCb: (p) =>
wrappedEmit(
wrapEvent({
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Font,
...p,
},
}),
),
wrappedEmit({
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Font,
...p,
},
}),
selectionCb: (p) => {
wrappedEmit(
wrapEvent({
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Selection,
...p,
},
}),
);
wrappedEmit({
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Selection,
...p,
},
});
},
customElementCb: (c) => {
wrappedEmit(
wrapEvent({
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.CustomElement,
...c,
},
}),
);
wrappedEmit({
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.CustomElement,
...c,
},
});
},
blockClass,
ignoreClass,
Expand Down Expand Up @@ -570,15 +537,13 @@ function record<T = eventWithTime>(
observer: p.observer!,
options: p.options,
callback: (payload: object) =>
wrappedEmit(
wrapEvent({
type: EventType.Plugin,
data: {
plugin: p.name,
payload,
},
}),
),
wrappedEmit({
type: EventType.Plugin,
data: {
plugin: p.name,
payload,
},
}),
})) || [],
},
hooks,
Expand Down Expand Up @@ -607,25 +572,21 @@ function record<T = eventWithTime>(
} else {
handlers.push(
on('DOMContentLoaded', () => {
wrappedEmit(
wrapEvent({
type: EventType.DomContentLoaded,
data: {},
}),
);
wrappedEmit({
type: EventType.DomContentLoaded,
data: {},
});
if (recordAfter === 'DOMContentLoaded') init();
}),
);
handlers.push(
on(
'load',
() => {
wrappedEmit(
wrapEvent({
type: EventType.Load,
data: {},
}),
);
wrappedEmit({
type: EventType.Load,
data: {},
});
if (recordAfter === 'load') init();
},
window,
Expand All @@ -648,15 +609,13 @@ record.addCustomEvent = <T>(tag: string, payload: T) => {
if (!recording) {
throw new Error('please add custom event after start recording');
}
wrappedEmit(
wrapEvent({
type: EventType.Custom,
data: {
tag,
payload,
},
}),
);
wrappedEmit({
type: EventType.Custom,
data: {
tag,
payload,
},
});
};

record.freezePage = () => {
Expand Down

0 comments on commit 230a507

Please sign in to comment.