Skip to content

Commit

Permalink
Update scheduling profiler to require User Timing level 3
Browse files Browse the repository at this point in the history 
Browsers that implement User Timing level 2 (e.g. Firefox) apparently struggle to keep up with the number of marks the scheduling profiler is logging. To avoid this, the feature detection has been updated to require User Timing level 3 support. In addition to this, marks are cleared immediately after being logged to avoid perpetually growing the entries buffer.
  • Loading branch information
Brian Vaughn committed Nov 11, 2020
1 parent 1ef223d commit da2c064
Show file tree
Hide file tree
Showing 2 changed files with 149 additions and 76 deletions.
98 changes: 67 additions & 31 deletions packages/react-reconciler/src/SchedulingProfiler.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,31 +20,63 @@ import getComponentName from 'shared/getComponentName';
* require.
*/
const supportsUserTiming =
typeof performance !== 'undefined' && typeof performance.mark === 'function';
typeof performance !== 'undefined' &&
typeof performance.mark === 'function' &&
typeof performance.clearMarks === 'function';

let supportsUserTimingV3 = false;
if (enableSchedulingProfiler) {
if (supportsUserTiming) {
const CHECK_V3_MARK = '__v3';
const markOptions = {};
// $FlowFixMe: Ignore Flow complaining about needing a value
Object.defineProperty(markOptions, 'startTime', {
get: function() {
supportsUserTimingV3 = true;
return 0;
},
set: function() {},
});

try {
// $FlowFixMe: Flow expects the User Timing level 2 API.
performance.mark(CHECK_V3_MARK, markOptions);
} catch (error) {
// Ignore
} finally {
performance.clearMarks(CHECK_V3_MARK);
}
}
}

function formatLanes(laneOrLanes: Lane | Lanes): string {
return ((laneOrLanes: any): number).toString();
}

function markAndClear(name) {
performance.mark(name);
performance.clearMarks(name);
}

// Create a mark on React initialization
if (enableSchedulingProfiler) {
if (supportsUserTiming) {
performance.mark(`--react-init-${ReactVersion}`);
if (supportsUserTimingV3) {
markAndClear(`--react-init-${ReactVersion}`);
}
}

export function markCommitStarted(lanes: Lanes): void {
if (enableSchedulingProfiler) {
if (supportsUserTiming) {
performance.mark(`--commit-start-${formatLanes(lanes)}`);
if (supportsUserTimingV3) {
markAndClear(`--commit-start-${formatLanes(lanes)}`);
}
}
}

export function markCommitStopped(): void {
if (enableSchedulingProfiler) {
if (supportsUserTiming) {
performance.mark('--commit-stop');
if (supportsUserTimingV3) {
markAndClear('--commit-stop');
}
}
}
Expand All @@ -63,89 +95,93 @@ function getWakeableID(wakeable: Wakeable): number {

export function markComponentSuspended(fiber: Fiber, wakeable: Wakeable): void {
if (enableSchedulingProfiler) {
if (supportsUserTiming) {
if (supportsUserTimingV3) {
const id = getWakeableID(wakeable);
const componentName = getComponentName(fiber.type) || 'Unknown';
// TODO Add component stack id
performance.mark(`--suspense-suspend-${id}-${componentName}`);
markAndClear(`--suspense-suspend-${id}-${componentName}`);
wakeable.then(
() => performance.mark(`--suspense-resolved-${id}-${componentName}`),
() => performance.mark(`--suspense-rejected-${id}-${componentName}`),
() => {
markAndClear(`--suspense-resolved-${id}-${componentName}`);
},
() => {
markAndClear(`--suspense-rejected-${id}-${componentName}`);
},
);
}
}
}

export function markLayoutEffectsStarted(lanes: Lanes): void {
if (enableSchedulingProfiler) {
if (supportsUserTiming) {
performance.mark(`--layout-effects-start-${formatLanes(lanes)}`);
if (supportsUserTimingV3) {
markAndClear(`--layout-effects-start-${formatLanes(lanes)}`);
}
}
}

export function markLayoutEffectsStopped(): void {
if (enableSchedulingProfiler) {
if (supportsUserTiming) {
performance.mark('--layout-effects-stop');
if (supportsUserTimingV3) {
markAndClear('--layout-effects-stop');
}
}
}

export function markPassiveEffectsStarted(lanes: Lanes): void {
if (enableSchedulingProfiler) {
if (supportsUserTiming) {
performance.mark(`--passive-effects-start-${formatLanes(lanes)}`);
if (supportsUserTimingV3) {
markAndClear(`--passive-effects-start-${formatLanes(lanes)}`);
}
}
}

export function markPassiveEffectsStopped(): void {
if (enableSchedulingProfiler) {
if (supportsUserTiming) {
performance.mark('--passive-effects-stop');
if (supportsUserTimingV3) {
markAndClear('--passive-effects-stop');
}
}
}

export function markRenderStarted(lanes: Lanes): void {
if (enableSchedulingProfiler) {
if (supportsUserTiming) {
performance.mark(`--render-start-${formatLanes(lanes)}`);
if (supportsUserTimingV3) {
markAndClear(`--render-start-${formatLanes(lanes)}`);
}
}
}

export function markRenderYielded(): void {
if (enableSchedulingProfiler) {
if (supportsUserTiming) {
performance.mark('--render-yield');
if (supportsUserTimingV3) {
markAndClear('--render-yield');
}
}
}

export function markRenderStopped(): void {
if (enableSchedulingProfiler) {
if (supportsUserTiming) {
performance.mark('--render-stop');
if (supportsUserTimingV3) {
markAndClear('--render-stop');
}
}
}

export function markRenderScheduled(lane: Lane): void {
if (enableSchedulingProfiler) {
if (supportsUserTiming) {
performance.mark(`--schedule-render-${formatLanes(lane)}`);
if (supportsUserTimingV3) {
markAndClear(`--schedule-render-${formatLanes(lane)}`);
}
}
}

export function markForceUpdateScheduled(fiber: Fiber, lane: Lane): void {
if (enableSchedulingProfiler) {
if (supportsUserTiming) {
if (supportsUserTimingV3) {
const componentName = getComponentName(fiber.type) || 'Unknown';
// TODO Add component stack id
performance.mark(
markAndClear(
`--schedule-forced-update-${formatLanes(lane)}-${componentName}`,
);
}
Expand All @@ -154,10 +190,10 @@ export function markForceUpdateScheduled(fiber: Fiber, lane: Lane): void {

export function markStateUpdateScheduled(fiber: Fiber, lane: Lane): void {
if (enableSchedulingProfiler) {
if (supportsUserTiming) {
if (supportsUserTimingV3) {
const componentName = getComponentName(fiber.type) || 'Unknown';
// TODO Add component stack id
performance.mark(
markAndClear(
`--schedule-state-update-${formatLanes(lane)}-${componentName}`,
);
}
Expand Down
Loading

0 comments on commit da2c064

Please sign in to comment.