Skip to content

Commit 2eb2c75

Browse files
gnoffgnoff
committed
bootstrap scripts should preload with low priority. This allows the browser to prefer loading paint blocking resources like images even if they arrive after the script preload has been processed
1 parent 997f52f commit 2eb2c75

File tree

7 files changed

+74
-22
lines changed

7 files changed

+74
-22
lines changed

‎packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5467,6 +5467,7 @@ function preloadBootstrapScript(
54675467
rel: 'preload',
54685468
href: src,
54695469
as: 'script',
5470+
fetchpriority: 'low',
54705471
nonce,
54715472
integrity,
54725473
crossOrigin,
@@ -5508,6 +5509,7 @@ function preloadBootstrapModule(
55085509
const props: PreloadModuleProps = {
55095510
rel: 'modulepreload',
55105511
href: src,
5512+
fetchpriority: 'low',
55115513
nonce,
55125514
integrity,
55135515
crossOrigin,

‎packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js‎

Lines changed: 66 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -610,17 +610,30 @@ describe('ReactDOMFizzServer', () => {
610610
});
611611

612612
expect(getVisibleChildren(container)).toEqual([
613-
<link rel="preload" href="init.js" as="script" nonce={CSPnonce} />,
614613
<link
615614
rel="preload"
615+
fetchpriority="low"
616+
href="init.js"
617+
as="script"
618+
nonce={CSPnonce}
619+
/>,
620+
<link
621+
rel="preload"
622+
fetchpriority="low"
616623
href="init2.js"
617624
as="script"
618625
nonce={CSPnonce}
619626
integrity="init2hash"
620627
/>,
621-
<link rel="modulepreload" href="init.mjs" nonce={CSPnonce} />,
622628
<link
623629
rel="modulepreload"
630+
fetchpriority="low"
631+
href="init.mjs"
632+
nonce={CSPnonce}
633+
/>,
634+
<link
635+
rel="modulepreload"
636+
fetchpriority="low"
624637
href="init2.mjs"
625638
nonce={CSPnonce}
626639
integrity="init2hash"
@@ -640,17 +653,30 @@ describe('ReactDOMFizzServer', () => {
640653
resolve({default: Text});
641654
});
642655
expect(getVisibleChildren(container)).toEqual([
643-
<link rel="preload" href="init.js" as="script" nonce={CSPnonce} />,
644656
<link
645657
rel="preload"
658+
fetchpriority="low"
659+
href="init.js"
660+
as="script"
661+
nonce={CSPnonce}
662+
/>,
663+
<link
664+
rel="preload"
665+
fetchpriority="low"
646666
href="init2.js"
647667
as="script"
648668
nonce={CSPnonce}
649669
integrity="init2hash"
650670
/>,
651-
<link rel="modulepreload" href="init.mjs" nonce={CSPnonce} />,
652671
<link
653672
rel="modulepreload"
673+
fetchpriority="low"
674+
href="init.mjs"
675+
nonce={CSPnonce}
676+
/>,
677+
<link
678+
rel="modulepreload"
679+
fetchpriority="low"
654680
href="init2.mjs"
655681
nonce={CSPnonce}
656682
integrity="init2hash"
@@ -3797,12 +3823,23 @@ describe('ReactDOMFizzServer', () => {
37973823
expect(getVisibleChildren(document)).toEqual(
37983824
<html>
37993825
<head>
3800-
<link rel="preload" href="foo" as="script" />
3801-
<link rel="preload" href="bar" as="script" />
3802-
<link rel="preload" href="baz" as="script" integrity="qux" />
3803-
<link rel="modulepreload" href="quux" />
3804-
<link rel="modulepreload" href="corge" />
3805-
<link rel="modulepreload" href="grault" integrity="garply" />
3826+
<link rel="preload" fetchpriority="low" href="foo" as="script" />
3827+
<link rel="preload" fetchpriority="low" href="bar" as="script" />
3828+
<link
3829+
rel="preload"
3830+
fetchpriority="low"
3831+
href="baz"
3832+
as="script"
3833+
integrity="qux"
3834+
/>
3835+
<link rel="modulepreload" fetchpriority="low" href="quux" />
3836+
<link rel="modulepreload" fetchpriority="low" href="corge" />
3837+
<link
3838+
rel="modulepreload"
3839+
fetchpriority="low"
3840+
href="grault"
3841+
integrity="garply"
3842+
/>
38063843
</head>
38073844
<body>
38083845
<div>hello world</div>
@@ -3866,14 +3903,27 @@ describe('ReactDOMFizzServer', () => {
38663903
expect(getVisibleChildren(document)).toEqual(
38673904
<html>
38683905
<head>
3869-
<link rel="preload" href="foo" as="script" />
3870-
<link rel="preload" href="bar" as="script" />
3871-
<link rel="preload" href="baz" as="script" crossorigin="" />
3872-
<link rel="preload" href="qux" as="script" crossorigin="" />
3873-
<link rel="modulepreload" href="quux" />
3874-
<link rel="modulepreload" href="corge" />
3906+
<link rel="preload" fetchpriority="low" href="foo" as="script" />
3907+
<link rel="preload" fetchpriority="low" href="bar" as="script" />
3908+
<link
3909+
rel="preload"
3910+
fetchpriority="low"
3911+
href="baz"
3912+
as="script"
3913+
crossorigin=""
3914+
/>
3915+
<link
3916+
rel="preload"
3917+
fetchpriority="low"
3918+
href="qux"
3919+
as="script"
3920+
crossorigin=""
3921+
/>
3922+
<link rel="modulepreload" fetchpriority="low" href="quux" />
3923+
<link rel="modulepreload" fetchpriority="low" href="corge" />
38753924
<link
38763925
rel="modulepreload"
3926+
fetchpriority="low"
38773927
href="grault"
38783928
crossorigin="use-credentials"
38793929
/>

‎packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ describe('ReactDOMFizzServerBrowser', () => {
8484
);
8585
const result = await readResult(stream);
8686
expect(result).toMatchInlineSnapshot(
87-
`"<link rel="preload" href="init.js" as="script"/><link rel="modulepreload" href="init.mjs"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
87+
`"<link rel="preload" href="init.js" as="script" fetchpriority="low"/><link rel="modulepreload" href="init.mjs" fetchpriority="low"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
8888
);
8989
});
9090

@@ -500,7 +500,7 @@ describe('ReactDOMFizzServerBrowser', () => {
500500
);
501501
const result = await readResult(stream);
502502
expect(result).toMatchInlineSnapshot(
503-
`"<link rel="preload" href="init.js" as="script" nonce="R4nd0m"/><link rel="modulepreload" href="init.mjs" nonce="R4nd0m"/><div>hello world</div><script nonce="${nonce}">INIT();</script><script src="init.js" nonce="${nonce}" async=""></script><script type="module" src="init.mjs" nonce="${nonce}" async=""></script>"`,
503+
`"<link rel="preload" href="init.js" as="script" fetchpriority="low" nonce="R4nd0m"/><link rel="modulepreload" href="init.mjs" fetchpriority="low" nonce="R4nd0m"/><div>hello world</div><script nonce="${nonce}">INIT();</script><script src="init.js" nonce="${nonce}" async=""></script><script type="module" src="init.mjs" nonce="${nonce}" async=""></script>"`,
504504
);
505505
});
506506
});

‎packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ describe('ReactDOMFizzServerNode', () => {
9898
pipe(writable);
9999
jest.runAllTimers();
100100
expect(output.result).toMatchInlineSnapshot(
101-
`"<link rel="preload" href="init.js" as="script"/><link rel="modulepreload" href="init.mjs"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
101+
`"<link rel="preload" href="init.js" as="script" fetchpriority="low"/><link rel="modulepreload" href="init.mjs" fetchpriority="low"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
102102
);
103103
});
104104

‎packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ describe('ReactDOMFizzStaticBrowser', () => {
8484
});
8585
const prelude = await readContent(result.prelude);
8686
expect(prelude).toMatchInlineSnapshot(
87-
`"<link rel="preload" href="init.js" as="script"/><link rel="modulepreload" href="init.mjs"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
87+
`"<link rel="preload" href="init.js" as="script" fetchpriority="low"/><link rel="modulepreload" href="init.mjs" fetchpriority="low"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
8888
);
8989
});
9090

‎packages/react-dom/src/__tests__/ReactDOMFizzStaticNode-test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ describe('ReactDOMFizzStaticNode', () => {
8686
);
8787
const prelude = await readContent(result.prelude);
8888
expect(prelude).toMatchInlineSnapshot(
89-
`"<link rel="preload" href="init.js" as="script"/><link rel="modulepreload" href="init.mjs"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
89+
`"<link rel="preload" href="init.js" as="script" fetchpriority="low"/><link rel="modulepreload" href="init.mjs" fetchpriority="low"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
9090
);
9191
});
9292

‎packages/react-server-dom-fb/src/__tests__/ReactDOMServerFB-test.internal.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ describe('ReactDOMServerFB', () => {
5959
});
6060
const result = readResult(stream);
6161
expect(result).toMatchInlineSnapshot(
62-
`"<link rel="preload" href="init.js" as="script"/><link rel="modulepreload" href="init.mjs"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
62+
`"<link rel="preload" href="init.js" as="script" fetchpriority="low"/><link rel="modulepreload" href="init.mjs" fetchpriority="low"/><div>hello world</div><script>INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
6363
);
6464
});
6565

0 commit comments

Comments
 (0)