Skip to content

Commit eddb096

Browse files
gnoffgnoff
committed
[Fizz] declare bootstrap script preloads to be fetchPriority: 'low' (#27189)
Generally scripts should not be preloaded before images but if they arrive earlier than image preloads (or images) the network (or server) may be saturated responding to inflight script preloads and not sufficiently prioritize images arriving later. This change marks the preloaded bootstrap script with a `low` fetch priority to signal to supporting browsers that the request should be deprioritized. This should make the preload operate similar to async script fetch priority which is low by default according to https://web.dev/fetch-priority/ Additionally the bootstrap script preloads will emit before preinitialized scripts do. Normal script preloads will continue to be prioritized after stylesheets This change can land separatrely but is part of a larger effort to implement elevating image loading and making script loading less blocking. Later changes will emit used suspensey images earlier in the queue and will stop favoring scripts over images that are explicitly preloaded DiffTrain build for [9edf470](9edf470)
1 parent 9094b9c commit eddb096

7 files changed

+51
-16
lines changed

‎compiled/facebook-www/REVISION

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
ea17cc18f458010c89c1bf494be08bb782d034af
1+
9edf470d6ed1f3ac12c23a248e64293f367c1797

‎compiled/facebook-www/ReactDOMServer-dev.classic.js

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ if (__DEV__) {
1919
var React = require("react");
2020
var ReactDOM = require("react-dom");
2121

22-
var ReactVersion = "18.3.0-www-classic-8651ccc3";
22+
var ReactVersion = "18.3.0-www-classic-728bbc0a";
2323

2424
// This refers to a WWW module.
2525
var warningWWW = require("warning");
@@ -6282,6 +6282,7 @@ function writePreamble(
62826282
resources.fontPreloads.clear(); // Flush unblocked stylesheets by precedence
62836283

62846284
resources.precedences.forEach(flushAllStylesInPreamble, destination);
6285+
resources.bootstrapScripts.forEach(flushResourceInPreamble, destination);
62856286
resources.scripts.forEach(flushResourceInPreamble, destination);
62866287
resources.scripts.clear();
62876288
resources.explicitStylesheetPreloads.forEach(
@@ -6346,7 +6347,9 @@ function writeHoistables(destination, resources, responseState) {
63466347
resources.fontPreloads.clear(); // Preload any stylesheets. these will emit in a render instruction that follows this
63476348
// but we want to kick off preloading as soon as possible
63486349

6349-
resources.precedences.forEach(preloadLateStyles, destination);
6350+
resources.precedences.forEach(preloadLateStyles, destination); // bootstrap scripts should flush above script priority but these can only flush in the preamble
6351+
// so we elide the code here for performance
6352+
63506353
resources.scripts.forEach(flushResourceLate, destination);
63516354
resources.scripts.clear();
63526355
resources.explicitStylesheetPreloads.forEach(flushResourceLate, destination);
@@ -6836,6 +6839,7 @@ function createResources() {
68366839
// usedImagePreloads: new Set(),
68376840
precedences: new Map(),
68386841
stylePrecedences: new Map(),
6842+
bootstrapScripts: new Set(),
68396843
scripts: new Set(),
68406844
explicitStylesheetPreloads: new Set(),
68416845
// explicitImagePreloads: new Set(),
@@ -7482,6 +7486,7 @@ function preloadBootstrapScript(resources, src, nonce, integrity, crossOrigin) {
74827486
rel: "preload",
74837487
href: src,
74847488
as: "script",
7489+
fetchPriority: "low",
74857490
nonce: nonce,
74867491
integrity: integrity,
74877492
crossOrigin: crossOrigin
@@ -7493,7 +7498,7 @@ function preloadBootstrapScript(resources, src, nonce, integrity, crossOrigin) {
74937498
props: props
74947499
};
74957500
resources.preloadsMap.set(key, resource);
7496-
resources.explicitScriptPreloads.add(resource);
7501+
resources.bootstrapScripts.add(resource);
74977502
pushLinkImpl(resource.chunks, props);
74987503
} // This function is only safe to call at Request start time since it assumes
74997504
// that each module has not already been preloaded. If we find a need to preload
@@ -7518,6 +7523,7 @@ function preloadBootstrapModule(resources, src, nonce, integrity, crossOrigin) {
75187523
var props = {
75197524
rel: "modulepreload",
75207525
href: src,
7526+
fetchPriority: "low",
75217527
nonce: nonce,
75227528
integrity: integrity,
75237529
crossOrigin: crossOrigin
@@ -7529,7 +7535,7 @@ function preloadBootstrapModule(resources, src, nonce, integrity, crossOrigin) {
75297535
props: props
75307536
};
75317537
resources.preloadsMap.set(key, resource);
7532-
resources.explicitScriptPreloads.add(resource);
7538+
resources.bootstrapScripts.add(resource);
75337539
pushLinkImpl(resource.chunks, props);
75347540
return;
75357541
}

‎compiled/facebook-www/ReactDOMServer-dev.modern.js

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ if (__DEV__) {
1919
var React = require("react");
2020
var ReactDOM = require("react-dom");
2121

22-
var ReactVersion = "18.3.0-www-modern-f39e0868";
22+
var ReactVersion = "18.3.0-www-modern-9727d465";
2323

2424
// This refers to a WWW module.
2525
var warningWWW = require("warning");
@@ -6282,6 +6282,7 @@ function writePreamble(
62826282
resources.fontPreloads.clear(); // Flush unblocked stylesheets by precedence
62836283

62846284
resources.precedences.forEach(flushAllStylesInPreamble, destination);
6285+
resources.bootstrapScripts.forEach(flushResourceInPreamble, destination);
62856286
resources.scripts.forEach(flushResourceInPreamble, destination);
62866287
resources.scripts.clear();
62876288
resources.explicitStylesheetPreloads.forEach(
@@ -6346,7 +6347,9 @@ function writeHoistables(destination, resources, responseState) {
63466347
resources.fontPreloads.clear(); // Preload any stylesheets. these will emit in a render instruction that follows this
63476348
// but we want to kick off preloading as soon as possible
63486349

6349-
resources.precedences.forEach(preloadLateStyles, destination);
6350+
resources.precedences.forEach(preloadLateStyles, destination); // bootstrap scripts should flush above script priority but these can only flush in the preamble
6351+
// so we elide the code here for performance
6352+
63506353
resources.scripts.forEach(flushResourceLate, destination);
63516354
resources.scripts.clear();
63526355
resources.explicitStylesheetPreloads.forEach(flushResourceLate, destination);
@@ -6836,6 +6839,7 @@ function createResources() {
68366839
// usedImagePreloads: new Set(),
68376840
precedences: new Map(),
68386841
stylePrecedences: new Map(),
6842+
bootstrapScripts: new Set(),
68396843
scripts: new Set(),
68406844
explicitStylesheetPreloads: new Set(),
68416845
// explicitImagePreloads: new Set(),
@@ -7482,6 +7486,7 @@ function preloadBootstrapScript(resources, src, nonce, integrity, crossOrigin) {
74827486
rel: "preload",
74837487
href: src,
74847488
as: "script",
7489+
fetchPriority: "low",
74857490
nonce: nonce,
74867491
integrity: integrity,
74877492
crossOrigin: crossOrigin
@@ -7493,7 +7498,7 @@ function preloadBootstrapScript(resources, src, nonce, integrity, crossOrigin) {
74937498
props: props
74947499
};
74957500
resources.preloadsMap.set(key, resource);
7496-
resources.explicitScriptPreloads.add(resource);
7501+
resources.bootstrapScripts.add(resource);
74977502
pushLinkImpl(resource.chunks, props);
74987503
} // This function is only safe to call at Request start time since it assumes
74997504
// that each module has not already been preloaded. If we find a need to preload
@@ -7518,6 +7523,7 @@ function preloadBootstrapModule(resources, src, nonce, integrity, crossOrigin) {
75187523
var props = {
75197524
rel: "modulepreload",
75207525
href: src,
7526+
fetchPriority: "low",
75217527
nonce: nonce,
75227528
integrity: integrity,
75237529
crossOrigin: crossOrigin
@@ -7529,7 +7535,7 @@ function preloadBootstrapModule(resources, src, nonce, integrity, crossOrigin) {
75297535
props: props
75307536
};
75317537
resources.preloadsMap.set(key, resource);
7532-
resources.explicitScriptPreloads.add(resource);
7538+
resources.bootstrapScripts.add(resource);
75337539
pushLinkImpl(resource.chunks, props);
75347540
return;
75357541
}

‎compiled/facebook-www/ReactDOMServer-prod.classic.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3649,6 +3649,10 @@ function flushCompletedQueues(request, destination) {
36493649
resources.fontPreloads.forEach(flushResourceInPreamble, destination);
36503650
resources.fontPreloads.clear();
36513651
resources.precedences.forEach(flushAllStylesInPreamble, destination);
3652+
resources.bootstrapScripts.forEach(
3653+
flushResourceInPreamble,
3654+
destination
3655+
);
36523656
resources.scripts.forEach(flushResourceInPreamble, destination);
36533657
resources.scripts.clear();
36543658
resources.explicitStylesheetPreloads.forEach(
@@ -3949,6 +3953,7 @@ function renderToStringImpl(
39493953
fontPreloads: new Set(),
39503954
precedences: new Map(),
39513955
stylePrecedences: new Map(),
3956+
bootstrapScripts: new Set(),
39523957
scripts: new Set(),
39533958
explicitStylesheetPreloads: new Set(),
39543959
explicitScriptPreloads: new Set(),
@@ -4014,4 +4019,4 @@ exports.renderToString = function (children, options) {
40144019
'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
40154020
);
40164021
};
4017-
exports.version = "18.3.0-www-classic-849751e4";
4022+
exports.version = "18.3.0-www-classic-e05f0ecc";

‎compiled/facebook-www/ReactDOMServer-prod.modern.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3547,6 +3547,10 @@ function flushCompletedQueues(request, destination) {
35473547
resources.fontPreloads.forEach(flushResourceInPreamble, destination);
35483548
resources.fontPreloads.clear();
35493549
resources.precedences.forEach(flushAllStylesInPreamble, destination);
3550+
resources.bootstrapScripts.forEach(
3551+
flushResourceInPreamble,
3552+
destination
3553+
);
35503554
resources.scripts.forEach(flushResourceInPreamble, destination);
35513555
resources.scripts.clear();
35523556
resources.explicitStylesheetPreloads.forEach(
@@ -3847,6 +3851,7 @@ function renderToStringImpl(
38473851
fontPreloads: new Set(),
38483852
precedences: new Map(),
38493853
stylePrecedences: new Map(),
3854+
bootstrapScripts: new Set(),
38503855
scripts: new Set(),
38513856
explicitStylesheetPreloads: new Set(),
38523857
explicitScriptPreloads: new Set(),
@@ -3912,4 +3917,4 @@ exports.renderToString = function (children, options) {
39123917
'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
39133918
);
39143919
};
3915-
exports.version = "18.3.0-www-modern-a94e9f5e";
3920+
exports.version = "18.3.0-www-modern-432efc32";

‎compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6289,6 +6289,7 @@ function writePreamble(
62896289
resources.fontPreloads.clear(); // Flush unblocked stylesheets by precedence
62906290

62916291
resources.precedences.forEach(flushAllStylesInPreamble, destination);
6292+
resources.bootstrapScripts.forEach(flushResourceInPreamble, destination);
62926293
resources.scripts.forEach(flushResourceInPreamble, destination);
62936294
resources.scripts.clear();
62946295
resources.explicitStylesheetPreloads.forEach(
@@ -6353,7 +6354,9 @@ function writeHoistables(destination, resources, responseState) {
63536354
resources.fontPreloads.clear(); // Preload any stylesheets. these will emit in a render instruction that follows this
63546355
// but we want to kick off preloading as soon as possible
63556356

6356-
resources.precedences.forEach(preloadLateStyles, destination);
6357+
resources.precedences.forEach(preloadLateStyles, destination); // bootstrap scripts should flush above script priority but these can only flush in the preamble
6358+
// so we elide the code here for performance
6359+
63576360
resources.scripts.forEach(flushResourceLate, destination);
63586361
resources.scripts.clear();
63596362
resources.explicitStylesheetPreloads.forEach(flushResourceLate, destination);
@@ -6843,6 +6846,7 @@ function createResources() {
68436846
// usedImagePreloads: new Set(),
68446847
precedences: new Map(),
68456848
stylePrecedences: new Map(),
6849+
bootstrapScripts: new Set(),
68466850
scripts: new Set(),
68476851
explicitStylesheetPreloads: new Set(),
68486852
// explicitImagePreloads: new Set(),
@@ -7489,6 +7493,7 @@ function preloadBootstrapScript(resources, src, nonce, integrity, crossOrigin) {
74897493
rel: "preload",
74907494
href: src,
74917495
as: "script",
7496+
fetchPriority: "low",
74927497
nonce: nonce,
74937498
integrity: integrity,
74947499
crossOrigin: crossOrigin
@@ -7500,7 +7505,7 @@ function preloadBootstrapScript(resources, src, nonce, integrity, crossOrigin) {
75007505
props: props
75017506
};
75027507
resources.preloadsMap.set(key, resource);
7503-
resources.explicitScriptPreloads.add(resource);
7508+
resources.bootstrapScripts.add(resource);
75047509
pushLinkImpl(resource.chunks, props);
75057510
} // This function is only safe to call at Request start time since it assumes
75067511
// that each module has not already been preloaded. If we find a need to preload
@@ -7525,6 +7530,7 @@ function preloadBootstrapModule(resources, src, nonce, integrity, crossOrigin) {
75257530
var props = {
75267531
rel: "modulepreload",
75277532
href: src,
7533+
fetchPriority: "low",
75287534
nonce: nonce,
75297535
integrity: integrity,
75307536
crossOrigin: crossOrigin
@@ -7536,7 +7542,7 @@ function preloadBootstrapModule(resources, src, nonce, integrity, crossOrigin) {
75367542
props: props
75377543
};
75387544
resources.preloadsMap.set(key, resource);
7539-
resources.explicitScriptPreloads.add(resource);
7545+
resources.bootstrapScripts.add(resource);
75407546
pushLinkImpl(resource.chunks, props);
75417547
return;
75427548
}

‎compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3409,6 +3409,10 @@ function flushCompletedQueues(request, destination) {
34093409
resources.fontPreloads.forEach(flushResourceInPreamble, destination);
34103410
resources.fontPreloads.clear();
34113411
resources.precedences.forEach(flushAllStylesInPreamble, destination);
3412+
resources.bootstrapScripts.forEach(
3413+
flushResourceInPreamble,
3414+
destination
3415+
);
34123416
resources.scripts.forEach(flushResourceInPreamble, destination);
34133417
resources.scripts.clear();
34143418
resources.explicitStylesheetPreloads.forEach(
@@ -3819,6 +3823,7 @@ exports.renderToStream = function (children, options) {
38193823
fontPreloads: new Set(),
38203824
precedences: new Map(),
38213825
stylePrecedences: new Map(),
3826+
bootstrapScripts: new Set(),
38223827
scripts: new Set(),
38233828
explicitStylesheetPreloads: new Set(),
38243829
explicitScriptPreloads: new Set(),
@@ -3883,13 +3888,14 @@ exports.renderToStream = function (children, options) {
38833888
rel: "preload",
38843889
href: externalRuntimeConfig,
38853890
as: "script",
3891+
fetchPriority: "low",
38863892
nonce: void 0,
38873893
integrity: integrity,
38883894
crossOrigin: scriptConfig
38893895
},
38903896
resource = { type: "preload", chunks: [], state: 0, props: props };
38913897
resources.preloadsMap.set("[script]" + externalRuntimeConfig, resource);
3892-
resources.explicitScriptPreloads.add(resource);
3898+
resources.bootstrapScripts.add(resource);
38933899
pushLinkImpl(resource.chunks, props);
38943900
JSCompiler_inline_result.push(
38953901
'<script src="',
@@ -3927,6 +3933,7 @@ exports.renderToStream = function (children, options) {
39273933
(scriptConfig = {
39283934
rel: "modulepreload",
39293935
href: bootstrapScriptContent,
3936+
fetchPriority: "low",
39303937
nonce: void 0,
39313938
integrity: externalRuntimeConfig,
39323939
crossOrigin: integrity
@@ -3938,7 +3945,7 @@ exports.renderToStream = function (children, options) {
39383945
props: scriptConfig
39393946
}),
39403947
resources.preloadsMap.set("[script]" + bootstrapScriptContent, props),
3941-
resources.explicitScriptPreloads.add(props),
3948+
resources.bootstrapScripts.add(props),
39423949
pushLinkImpl(props.chunks, scriptConfig),
39433950
JSCompiler_inline_result.push(
39443951
'<script type="module" src="',

0 commit comments

Comments
 (0)