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 1 commit
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.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Update scheduling profiler to require User Timing level 3 
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 12, 2020
commit 77bf18e3b562142ecfd89101d1e4bf450940d1c1
94 changes: 63 additions & 31 deletions packages/react-reconciler/src/SchedulingProfiler.js
View file
Open in desktop
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() {},
});
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
Loading