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

[Fizz]: Unify preload queue #27190

Merged
merged 1 commit into from
Aug 7, 2023
Merged

[Fizz]: Unify preload queue #27190

merged 1 commit into from
Aug 7, 2023

Conversation

gnoff
Copy link
Collaborator

@gnoff gnoff commented Aug 4, 2023

stacked on #27189

Currently React attempts to prioritize certain preloads over others based on their type. This is at odds with allowing the user to control priority by ordering which calls are made first. There are some asset types that generally should just be prioritized first such as fonts since we don't know when fonts will be used and they either block display or may lead to fallback fonts being used. But for scripts and stylesheets we can emit them in the order received with other arbitrary preload types.

We will eventually add support for emitting suspensey image preloads before other resources because these also block display however that implementation will look at which images are actually rendered rather than simply preloaded.

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Aug 4, 2023
@gnoff gnoff requested a review from sebmarkbage August 4, 2023 23:00
@react-sizebot
Copy link

react-sizebot commented Aug 4, 2023

Comparing: 9edf470...2e5e20e

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.min.js = 164.38 kB 164.38 kB = 51.77 kB 51.77 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 171.79 kB 171.79 kB = 53.99 kB 53.99 kB
facebook-www/ReactDOM-prod.classic.js = 567.40 kB 567.40 kB = 100.10 kB 100.10 kB
facebook-www/ReactDOM-prod.modern.js = 551.20 kB 551.20 kB = 97.26 kB 97.26 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
facebook-www/ReactDOMServer-dev.classic.js = 381.14 kB 380.20 kB = 83.00 kB 82.89 kB
facebook-www/ReactDOMServer-dev.modern.js = 373.72 kB 372.77 kB = 81.37 kB 81.26 kB
facebook-www/ReactDOMServerStreaming-dev.modern.js = 368.55 kB 367.60 kB = 80.08 kB 79.99 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.node.development.js = 373.89 kB 372.91 kB = 82.55 kB 82.45 kB
oss-experimental/react-dom/cjs/react-dom-server.node.development.js = 372.72 kB 371.75 kB = 82.21 kB 82.12 kB
oss-experimental/react-dom/cjs/react-dom-static.node.development.js = 372.69 kB 371.71 kB = 82.31 kB 82.21 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.browser.development.js = 372.07 kB 371.09 kB = 82.10 kB 82.00 kB
oss-experimental/react-dom/cjs/react-dom-server.edge.development.js = 371.65 kB 370.68 kB = 82.29 kB 82.19 kB
oss-experimental/react-dom/cjs/react-dom-server.browser.development.js = 371.24 kB 370.27 kB = 82.17 kB 82.07 kB
oss-experimental/react-dom/cjs/react-dom-static.edge.development.js = 370.96 kB 369.98 kB = 82.10 kB 82.01 kB
oss-experimental/react-dom/cjs/react-dom-static.browser.development.js = 370.55 kB 369.57 kB = 81.98 kB 81.89 kB
oss-experimental/react-dom/umd/react-dom-server-legacy.browser.development.js = 389.65 kB 388.61 kB = 83.30 kB 83.20 kB
oss-experimental/react-dom/cjs/react-dom-server.bun.development.js = 369.05 kB 368.07 kB = 81.49 kB 81.40 kB
oss-experimental/react-dom/umd/react-dom-server.browser.development.js = 388.80 kB 387.77 kB = 83.40 kB 83.31 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.node.development.js = 364.20 kB 363.22 kB = 80.42 kB 80.32 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.node.development.js = 364.17 kB 363.19 kB = 80.39 kB 80.30 kB
oss-stable/react-dom/cjs/react-dom-server.node.development.js = 363.61 kB 362.64 kB = 80.30 kB 80.20 kB
oss-stable-semver/react-dom/cjs/react-dom-server.node.development.js = 363.59 kB 362.61 kB = 80.27 kB 80.18 kB
oss-stable/react-dom/cjs/react-dom-server.edge.development.js = 362.54 kB 361.57 kB = 80.38 kB 80.28 kB
oss-stable-semver/react-dom/cjs/react-dom-server.edge.development.js = 362.52 kB 361.54 kB = 80.35 kB 80.26 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.browser.development.js = 362.38 kB 361.40 kB = 79.96 kB 79.86 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.browser.development.js = 362.36 kB 361.38 kB = 79.93 kB 79.84 kB
oss-stable/react-dom/cjs/react-dom-server.browser.development.js = 362.13 kB 361.16 kB = 80.26 kB 80.16 kB
oss-stable-semver/react-dom/cjs/react-dom-server.browser.development.js = 362.11 kB 361.13 kB = 80.23 kB 80.14 kB
oss-stable/react-dom/umd/react-dom-server-legacy.browser.development.js = 379.54 kB 378.51 kB = 80.89 kB 80.79 kB
oss-stable-semver/react-dom/umd/react-dom-server-legacy.browser.development.js = 379.51 kB 378.48 kB = 80.86 kB 80.77 kB
oss-stable/react-dom/umd/react-dom-server.browser.development.js = 379.28 kB 378.24 kB = 81.20 kB 81.11 kB
oss-stable-semver/react-dom/umd/react-dom-server.browser.development.js = 379.25 kB 378.22 kB = 81.18 kB 81.08 kB
oss-stable/react-dom/cjs/react-dom-server.bun.development.js = 359.36 kB 358.38 kB = 79.34 kB 79.25 kB
oss-stable-semver/react-dom/cjs/react-dom-server.bun.development.js = 359.33 kB 358.35 kB = 79.32 kB 79.22 kB
facebook-www/ReactDOMServerStreaming-prod.modern.js = 143.34 kB 142.26 kB = 27.11 kB 27.00 kB
facebook-www/ReactDOMServer-prod.classic.js = 140.19 kB 139.12 kB = 26.10 kB 26.00 kB
facebook-www/ReactDOMServer-prod.modern.js = 136.67 kB 135.60 kB = 25.42 kB 25.32 kB
oss-experimental/react-dom/cjs/react-dom-server.node.production.min.js = 67.08 kB 66.55 kB = 21.02 kB 20.93 kB
oss-experimental/react-dom/cjs/react-dom-static.node.production.min.js = 67.06 kB 66.52 kB = 21.03 kB 20.95 kB
oss-experimental/react-dom/cjs/react-dom-server.edge.production.min.js = 66.98 kB 66.45 kB = 21.00 kB 20.92 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.node.production.min.js = 65.92 kB 65.39 kB = 20.07 kB 19.97 kB
oss-experimental/react-dom/cjs/react-dom-server.bun.production.min.js = 65.67 kB 65.14 kB = 20.20 kB 20.13 kB
oss-stable/react-dom/cjs/react-dom-server.node.production.min.js = 65.02 kB 64.49 kB = 20.13 kB 20.04 kB
oss-stable-semver/react-dom/cjs/react-dom-server.node.production.min.js = 65.00 kB 64.46 kB = 20.10 kB 20.01 kB
oss-stable/react-dom/cjs/react-dom-server.edge.production.min.js = 64.92 kB 64.39 kB = 20.09 kB 20.01 kB
oss-stable-semver/react-dom/cjs/react-dom-server.edge.production.min.js = 64.89 kB 64.36 kB = 20.07 kB 19.99 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.node.production.min.js = 63.34 kB 62.81 kB = 18.92 kB 18.83 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.node.production.min.js = 63.31 kB 62.78 kB = 18.89 kB 18.81 kB
oss-stable/react-dom/cjs/react-dom-server.bun.production.min.js = 63.07 kB 62.54 kB = 19.08 kB 18.99 kB
oss-stable-semver/react-dom/cjs/react-dom-server.bun.production.min.js = 63.05 kB 62.52 kB = 19.05 kB 18.96 kB
oss-experimental/react-dom/cjs/react-dom-static.edge.production.min.js = 62.85 kB 62.31 kB = 19.58 kB 19.50 kB
oss-experimental/react-dom/umd/react-dom-server.browser.production.min.js = 62.79 kB 62.26 kB = 19.80 kB 19.72 kB
oss-experimental/react-dom/cjs/react-dom-server.browser.production.min.js = 62.63 kB 62.10 kB = 19.53 kB 19.45 kB
oss-experimental/react-dom/cjs/react-dom-static.browser.production.min.js = 62.51 kB 61.98 kB = 19.48 kB 19.39 kB
oss-experimental/react-dom/umd/react-dom-server-legacy.browser.production.min.js = 61.21 kB 60.67 kB = 18.78 kB 18.69 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.browser.production.min.js = 61.04 kB 60.50 kB = 18.44 kB 18.37 kB
oss-stable/react-dom/umd/react-dom-server.browser.production.min.js = 60.84 kB 60.31 kB = 18.94 kB 18.86 kB
oss-stable-semver/react-dom/umd/react-dom-server.browser.production.min.js = 60.81 kB 60.28 kB = 18.92 kB 18.84 kB
oss-stable/react-dom/cjs/react-dom-server.browser.production.min.js = 60.68 kB 60.14 kB = 18.67 kB 18.59 kB
oss-stable-semver/react-dom/cjs/react-dom-server.browser.production.min.js = 60.65 kB 60.12 kB = 18.65 kB 18.57 kB
oss-stable/react-dom/umd/react-dom-server-legacy.browser.production.min.js = 58.72 kB 58.19 kB = 17.63 kB 17.54 kB
oss-stable-semver/react-dom/umd/react-dom-server-legacy.browser.production.min.js = 58.70 kB 58.17 kB = 17.61 kB 17.52 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.browser.production.min.js = 58.56 kB 58.03 kB = 17.36 kB 17.27 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.browser.production.min.js = 58.53 kB 58.00 kB = 17.34 kB 17.24 kB

Generated by 🚫 dangerJS against 2e5e20e

@gnoff gnoff force-pushed the unify-preload-queue branch from 10f8295 to 29f352c Compare August 4, 2023 23:57
@gnoff gnoff force-pushed the unify-preload-queue branch from 29f352c to c8add69 Compare August 5, 2023 00:37
Copy link
Collaborator

@sebmarkbage sebmarkbage left a comment

Choose a reason for hiding this comment

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

Not 100% sure I get the argument/rationale here.

@gnoff
Copy link
Collaborator Author

gnoff commented Aug 7, 2023

I'm saying that absent another singal, like the fact that a resource was actually rendered, we should treat all preloads as the same priority from a flushing order standpoint because it allows the user to decide which assets to prioritize over others using fetchPriority. If we create a flushing hierarchy this can still be done but the browser (or responding server) may already be busy handling lower priority requests when something high priority comes in.

So by making there be a single queue we influence the implicit priority of "arbitrary" preloads less.

There are exceptions like fonts which we will never "render" but must be treated as being very high priority so those still have their own queue.

Does that help clarify or is it still not clear?

…int is to allow a sort of prioritization by the user via fetchPriority and order of preload calls and by making them use different queues we limit how much control you can have it ordering preloads
@gnoff gnoff force-pushed the unify-preload-queue branch from c8add69 to 2e5e20e Compare August 7, 2023 22:45
@gnoff gnoff merged commit cb3404a into facebook:main Aug 7, 2023
@gnoff gnoff deleted the unify-preload-queue branch August 7, 2023 22:51
github-actions bot pushed a commit that referenced this pull request Aug 7, 2023
Currently React attempts to prioritize certain preloads over others
based on their type. This is at odds with allowing the user to control
priority by ordering which calls are made first. There are some asset
types that generally should just be prioritized first such as fonts
since we don't know when fonts will be used and they either block
display or may lead to fallback fonts being used. But for scripts and
stylesheets we can emit them in the order received with other arbitrary
preload types.

We will eventually add support for emitting suspensey image preloads
before other resources because these also block display however that
implementation will look at which images are actually rendered rather
than simply preloaded.

DiffTrain build for [cb3404a](cb3404a)
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
Currently React attempts to prioritize certain preloads over others
based on their type. This is at odds with allowing the user to control
priority by ordering which calls are made first. There are some asset
types that generally should just be prioritized first such as fonts
since we don't know when fonts will be used and they either block
display or may lead to fallback fonts being used. But for scripts and
stylesheets we can emit them in the order received with other arbitrary
preload types.

We will eventually add support for emitting suspensey image preloads
before other resources because these also block display however that
implementation will look at which images are actually rendered rather
than simply preloaded.
bigfootjon pushed a commit that referenced this pull request Apr 18, 2024
Currently React attempts to prioritize certain preloads over others
based on their type. This is at odds with allowing the user to control
priority by ordering which calls are made first. There are some asset
types that generally should just be prioritized first such as fonts
since we don't know when fonts will be used and they either block
display or may lead to fallback fonts being used. But for scripts and
stylesheets we can emit them in the order received with other arbitrary
preload types.

We will eventually add support for emitting suspensey image preloads
before other resources because these also block display however that
implementation will look at which images are actually rendered rather
than simply preloaded.

DiffTrain build for commit cb3404a.
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