Skip to content

Refactor to preclude the need for a continuous raf loop #1328

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 3 commits into from
Jun 5, 2024
Merged

Refactor to preclude the need for a continuous raf loop #1328

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6cb8335
Refactor to preclude the need for a continuous raf loop
eoghanmurray Oct 17, 2023
54360b9
Apply formatting changes
eoghanmurray Apr 11, 2024
23cd976
Create shadow-dom-unbusify.md
eoghanmurray Apr 11, 2024
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
5 changes: 5 additions & 0 deletions .changeset/shadow-dom-unbusify.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'rrweb': patch
---

Refactor to preclude the need for a continuous raf loop running in the background which is related to shadowDom
42 changes: 21 additions & 21 deletions guide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,27 +295,27 @@ replayer.destroy();

The replayer accepts options as its constructor's second parameter, and it has the following options:

| key | default | description |
| ------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| speed | 1 | replay speed ratio |
| root | document.body | the root element of replayer |
| loadTimeout | 0 | timeout of loading remote style sheet |
| skipInactive | false | whether to skip inactive time |
| inactivePeriodThreshold | 10000 | the threshold in milliseconds for what should be considered an inactive period |
| showWarning | true | whether to print warning messages during replay |
| showDebug | false | whether to print debug messages during replay |
| blockClass | 'rr-block' | element with the class name will display as a blocked area |
| liveMode | false | whether to enable live mode |
| insertStyleRules | [] | accepts multiple CSS rule string, which will be injected into the replay iframe |
| triggerFocus | true | whether to trigger focus during replay |
| UNSAFE_replayCanvas | false | whether to replay the canvas element. **Enable this will remove the sandbox, which is unsafe.** |
| pauseAnimation | true | whether to pause CSS animation when the replayer is paused |
| mouseTail | true | whether to show mouse tail during replay. Set to false to disable mouse tail. A complete config can be found in this [type](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L407) |
| unpackFn | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
| logConfig | - | configuration of console output playback, refer to the [console recipe](./docs/recipes/console.md) |
| plugins | [] | load plugins to provide extended replay functions. [What is plugins?](./docs/recipes/plugin.md) |
| useVirtualDom | true | whether to use Virtual Dom optimization in the process of skipping to a new point of time |
| logger | console | The logger object used by the replayer to print warnings or errors |
| key | default | description |
| ----------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| speed | 1 | replay speed ratio |
| root | document.body | the root element of replayer |
| loadTimeout | 0 | timeout of loading remote style sheet |
| skipInactive | false | whether to skip inactive time |
| inactivePeriodThreshold | 10000 | the threshold in milliseconds for what should be considered an inactive period |
| showWarning | true | whether to print warning messages during replay |
| showDebug | false | whether to print debug messages during replay |
| blockClass | 'rr-block' | element with the class name will display as a blocked area |
| liveMode | false | whether to enable live mode |
| insertStyleRules | [] | accepts multiple CSS rule string, which will be injected into the replay iframe |
| triggerFocus | true | whether to trigger focus during replay |
| UNSAFE_replayCanvas | false | whether to replay the canvas element. **Enable this will remove the sandbox, which is unsafe.** |
| pauseAnimation | true | whether to pause CSS animation when the replayer is paused |
| mouseTail | true | whether to show mouse tail during replay. Set to false to disable mouse tail. A complete config can be found in this [type](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L407) |
| unpackFn | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
| logConfig | - | configuration of console output playback, refer to the [console recipe](./docs/recipes/console.md) |
| plugins | [] | load plugins to provide extended replay functions. [What is plugins?](./docs/recipes/plugin.md) |
| useVirtualDom | true | whether to use Virtual Dom optimization in the process of skipping to a new point of time |
| logger | console | The logger object used by the replayer to print warnings or errors |

#### Use rrweb-player

Expand Down
5 changes: 4 additions & 1 deletion packages/rrweb-player/src/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,10 @@ function isUserInteraction(event: eventWithTime): boolean {
* @param inactivePeriodThreshold - threshold of inactive time in milliseconds
* @returns periods of time consist with [start time, end time]
*/
export function getInactivePeriods(events: eventWithTime[], inactivePeriodThreshold: number) {
export function getInactivePeriods(
events: eventWithTime[],
inactivePeriodThreshold: number,
) {
const inactivePeriods: [number, number][] = [];
let lastActiveTime = events[0].timestamp;
for (const event of events) {
Expand Down
27 changes: 9 additions & 18 deletions packages/rrweb/src/record/processed-node-manager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,8 @@ import type MutationBuffer from './mutation';
*/
export default class ProcessedNodeManager {
private nodeMap: WeakMap<Node, Set<MutationBuffer>> = new WeakMap();
// Whether to continue RAF loop.
private loop = true;

constructor() {
this.periodicallyClear();
}

private periodicallyClear() {
requestAnimationFrame(() => {
this.clear();
if (this.loop) this.periodicallyClear();
});
}
private active = false;

public inOtherBuffer(node: Node, thisBuffer: MutationBuffer) {
const buffers = this.nodeMap.get(node);
Expand All @@ -27,15 +16,17 @@ export default class ProcessedNodeManager {
}

public add(node: Node, buffer: MutationBuffer) {
if (!this.active) {
this.active = true;
requestAnimationFrame(() => {
this.nodeMap = new WeakMap();
this.active = false;
});
}
this.nodeMap.set(node, (this.nodeMap.get(node) || new Set()).add(buffer));
}

private clear() {
this.nodeMap = new WeakMap();
}

public destroy() {
// Stop the RAF loop.
this.loop = false;
// cleanup no longer needed
}
}