Skip to content

Minor Tweak to Performance Track #32808

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
Apr 2, 2025
Merged

Minor Tweak to Performance Track #32808

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d2dee57
Rename "Suspended" commit to "Suspended on CSS" since that's the only…
sebmarkbage Apr 2, 2025
54919f2
Only log blocked if it's 3ms or longer
sebmarkbage Apr 2, 2025
3e15165
Rename "Blocked" to "Update"
sebmarkbage Apr 2, 2025
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
21 changes: 17 additions & 4 deletions packages/react-reconciler/src/ReactFiberPerformanceTrack.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -284,7 +284,7 @@ export function logComponentEffect(
export function logYieldTime(startTime: number, endTime: number): void {
if (supportsUserTiming) {
const yieldDuration = endTime - startTime;
if (yieldDuration < 1) {
if (yieldDuration < 3) {
// Skip sub-millisecond yields. This happens all the time and is not interesting.
return;
}
Expand All @@ -299,6 +299,10 @@ export function logYieldTime(startTime: number, endTime: number): void {
: 'error';
reusableComponentOptions.start = startTime;
reusableComponentOptions.end = endTime;
// This get logged in the components track if we don't commit which leaves them
// hanging by themselves without context. It's a useful indicator for why something
// might be starving this render though.
// TODO: Considering adding these to a queue and only logging them if we commit.
performance.measure('Blocked', reusableComponentOptions);
}
}
Expand Down Expand Up @@ -365,7 +369,11 @@ export function logBlockingStart(
reusableLaneOptions.start = updateTime;
reusableLaneOptions.end = renderStartTime;
performance.measure(
isSpawnedUpdate ? 'Cascade' : 'Blocked',
isSpawnedUpdate
? 'Cascading Update'
: renderStartTime - updateTime > 5
? 'Update Blocked'
: 'Update',
Copy link
Member

Choose a reason for hiding this comment

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

I was thinking "Scheduled" which also makes sense since it's the Scheduler track

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

It's tricky because the time span really mean that but it actually doubles as a "mark" too in the beginning which is the update. It's just that marks are kind of useless in this UI since they 1) stack on top of the span 2) are impossible to click. Where as the span is easier to see and click. Even if it's very small.

reusableLaneOptions,
);
}
Expand Down Expand Up @@ -411,7 +419,10 @@ export function logTransitionStart(
reusableLaneDevToolDetails.color = 'primary-light';
reusableLaneOptions.start = updateTime;
reusableLaneOptions.end = renderStartTime;
performance.measure('Blocked', reusableLaneOptions);
performance.measure(
renderStartTime - updateTime > 5 ? 'Update Blocked' : 'Update',
reusableLaneOptions,
);
}
}
}
Expand Down Expand Up @@ -588,7 +599,9 @@ export function logSuspendedCommitPhase(
reusableLaneDevToolDetails.color = 'secondary-light';
reusableLaneOptions.start = startTime;
reusableLaneOptions.end = endTime;
performance.measure('Suspended', reusableLaneOptions);
// TODO: Make this conditionally "Suspended on Images" or both when we add Suspensey Images.
// TODO: This might also be Suspended while waiting on a View Transition.
performance.measure('Suspended on CSS', reusableLaneOptions);
}
}

Expand Down
Loading