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.

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

[Fiber] Log the Render/Commit phases and the gaps in between #31016

Merged
merged 8 commits into from
Sep 23, 2024

Conversation

sebmarkbage
Copy link
Collaborator

A slight behavior change here too is that I now mark the start of the commit phase before the BeforeMutationEffect phase. This affects <Profiler> too.

The named sequences are as follows:

Render -> Suspended or Throttled -> Commit -> Waiting for Paint -> Remaining Effects

The Suspended phase is only logged if we delay the Commit due to CSS / images.

The Throttled phase is only logged if we delay the commit due to the Suspense throttling timer.

Screenshot 2024-09-20 at 9 14 23 PM

I don't yet log render phases that don't complete. I think I also need to special case renders that or don't commit after being suspended.

This affects the Profiler component as well but really this metric should
indicate when we started the commit and if something else was blocking it
before.

Usually there's nothing in before mutation effects.
…ssive

If the commit phase is delayed due to throttling we log the phase in between
as "Throttled". If it's delayed due to CSS/image suspending then we log it
as "Suspended".

If the passive phase is delayed until the scheduled task we log it as
"Waiting for Paint". If the passive phase is immediate or forced due to
another update, we don't log anything about the gap.
Copy link

vercel bot commented Sep 21, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-compiler-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 23, 2024 5:51pm

@react-sizebot
Copy link

react-sizebot commented Sep 21, 2024

Comparing: 5d19e1c...f91dc20

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.js = 6.68 kB 6.68 kB = 1.82 kB 1.82 kB
oss-stable/react-dom/cjs/react-dom-client.production.js +0.09% 508.62 kB 509.10 kB +0.09% 90.98 kB 91.06 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.69 kB 6.69 kB = 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js +0.09% 513.56 kB 514.04 kB +0.09% 91.71 kB 91.78 kB
facebook-www/ReactDOM-prod.classic.js +0.09% 603.01 kB 603.53 kB +0.08% 106.69 kB 106.78 kB
facebook-www/ReactDOM-prod.modern.js +0.09% 579.24 kB 579.76 kB +0.08% 102.79 kB 102.88 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
oss-experimental/react-reconciler/cjs/react-reconciler.profiling.js +0.89% 419.76 kB 423.50 kB +0.66% 68.62 kB 69.07 kB
oss-experimental/react-art/cjs/react-art.development.js +0.71% 567.16 kB 571.21 kB +0.60% 91.84 kB 92.39 kB
oss-experimental/react-dom/cjs/react-dom-profiling.profiling.js +0.66% 547.69 kB 551.33 kB +0.54% 97.59 kB 98.11 kB
oss-experimental/react-reconciler/cjs/react-reconciler.development.js +0.62% 649.02 kB 653.08 kB +0.50% 104.39 kB 104.91 kB
oss-experimental/react-dom/cjs/react-dom-client.development.js +0.43% 952.13 kB 956.18 kB +0.34% 161.20 kB 161.75 kB
oss-experimental/react-dom/cjs/react-dom-profiling.development.js +0.42% 968.57 kB 972.62 kB +0.33% 164.03 kB 164.57 kB
oss-experimental/react-dom/cjs/react-dom-unstable_testing.development.js +0.42% 969.06 kB 973.12 kB +0.33% 165.02 kB 165.56 kB

Generated by 🚫 dangerJS against 3b9f88d

Since multiple roots can start rendering and overriding these while the
commit is still pending.

Then we need to stash it temporarily on module scope for the passive effect.
Same as lanes.
This lets us log this phase differently if it is interrupted before commit.
@sebmarkbage sebmarkbage merged commit 4e9540e into facebook:main Sep 23, 2024
184 checks passed
github-actions bot pushed a commit that referenced this pull request Sep 23, 2024
A slight behavior change here too is that I now mark the start of the
commit phase before the BeforeMutationEffect phase. This affects
`<Profiler>` too.

The named sequences are as follows:

Render -> Suspended or Throttled -> Commit -> Waiting for Paint ->
Remaining Effects

The Suspended phase is only logged if we delay the Commit due to CSS /
images.

The Throttled phase is only logged if we delay the commit due to the
Suspense throttling timer.

<img width="1246" alt="Screenshot 2024-09-20 at 9 14 23 PM"
src="https://github.com/user-attachments/assets/8d01f444-bb85-472b-9b42-6157d92c81b4">

I don't yet log render phases that don't complete. I think I also need
to special case renders that or don't commit after being suspended.

DiffTrain build for commit 4e9540e.
github-actions bot pushed a commit that referenced this pull request Sep 23, 2024
A slight behavior change here too is that I now mark the start of the
commit phase before the BeforeMutationEffect phase. This affects
`<Profiler>` too.

The named sequences are as follows:

Render -> Suspended or Throttled -> Commit -> Waiting for Paint ->
Remaining Effects

The Suspended phase is only logged if we delay the Commit due to CSS /
images.

The Throttled phase is only logged if we delay the commit due to the
Suspense throttling timer.

<img width="1246" alt="Screenshot 2024-09-20 at 9 14 23 PM"
src="https://github.com/user-attachments/assets/8d01f444-bb85-472b-9b42-6157d92c81b4">

I don't yet log render phases that don't complete. I think I also need
to special case renders that or don't commit after being suspended.

DiffTrain build for [4e9540e](4e9540e)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants