OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2025-12-06 12:20:20 +01:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Minor Tweak to Performance Track (#32808)

Browse Source 
Rename "Suspended" commit to "Suspended on CSS" since that's the only
reason for this particular branch. This will not hold true because with
suspended images and with view transitions those can also be the reason.
So in the future we need to add those.

Only log "Blocked" in the components track if we yield for 3ms or
longer. It's common to have like 1-2ms yield times for various reasons
going on which is not worth the noise to consider "blocking".

Rename "Blocked" to "Update" in the Blocking/Transition tracks. This is
when a setState happens and with stack traces it's where you should look
for the stack trace of the setState. So we want to indicate that this is
the "Update".

I only added the "Blocked" part if we're blocked for more than 5ms
before we can start rendering - indicating that some other track was
working at the same time and preventing us from rendering.
This commit is contained in:
Sebastian Markbåge 2025-04-02 17:01:10 -04:00 committed by GitHub
parent b81c92be62
commit b2f6365745
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/react-reconciler/src/ReactFiberPerformanceTrack.js vendored
View File

@ -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;
}
@ -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);
}
}
@ -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',
reusableLaneOptions,
);
}
@ -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,
);
}
}
}
@ -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);
}
}