Skip to content
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

Jump to bottom

Scheduling profiler tweaks #20215

Merged
merged 2 commits into from Nov 12, 2020
Merged

Scheduling profiler tweaks #20215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b8c3a4f
Make enableSchedulingProfiler flag dynamic (for PROFILING builds only)
Nov 12, 2020
77bf18e
Update scheduling profiler to require User Timing level 3
Nov 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
94 changes: 63 additions & 31 deletions packages/react-reconciler/src/SchedulingProfiler.js
View file
Open in desktop
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() {},
});
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This mirrors the way we check for User Timing level 3 support within Facebook.


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,89 @@ 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 +186,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