[Fizz][Float] stop preloading stylesheets that are not stylesheet resources (#26873)
We previously preloaded stylesheets that were rendered in Fizz. The idea was we'd get a headstart fetching these resources since we know they are going to be rendered. However to really be effective non-float stylesheets need to rendered in the head and the preload here is not helpful and potentially hurtful to perf in a minor way. This change removes this functionality to make the code smaller and simpler
Josh Story committed
Jun 1, 2023 at 13:23 UTC
5fb2c15a89de844a1dd12a61e7674e55dc0dfa89
3 files changed
+1
-149
packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
-47
@@ -1965,21 +1965,6 @@ function pushLink(
1965
}
1966
}
1967
}
1968
- let resource = resources.preloadsMap.get(key);
1969
- if (!resource) {
1970
- resource = {
1971
- type: 'preload',
1972
- chunks: ([]: Array<Chunk | PrecomputedChunk>),
1973
- state: NoState,
1974
- props: preloadAsStylePropsFromProps(href, props),
1975
- };
1976
- resources.preloadsMap.set(key, resource);
1977
- if (__DEV__) {
1978
- markAsImplicitResourceDEV(resource, props, resource.props);
1979
- }
1980
- }
1981
- pushLinkImpl(resource.chunks, resource.props);
1982
- resources.usedStylesheets.set(key, resource);
1968
return pushLinkImpl(target, props);
1969
} else {
1970
// This stylesheet refers to a Resource and we create a new one if necessary
@@ -4251,21 +4236,6 @@ export function writePreamble(
4236
// Flush unblocked stylesheets by precedence
4237
resources.precedences.forEach(flushAllStylesInPreamble, destination);
4238
4254
- resources.usedStylesheets.forEach((resource, key) => {
4255
- if (resources.stylesMap.has(key)) {
4256
- // The underlying stylesheet is represented both as a used stylesheet
4257
- // (a regular component we will attempt to preload) and as a StylesheetResource.
4258
- // We don't want to emit two preloads for the same href so we defer
4259
- // the preload rules of the StylesheetResource when there is a conflict
4260
- } else {
4261
- const chunks = resource.chunks;
4262
- for (i = 0; i < chunks.length; i++) {
4263
- writeChunk(destination, chunks[i]);
4264
- }
4265
- }
4266
- });
4267
- resources.usedStylesheets.clear();
4268
-
4239
resources.scripts.forEach(flushResourceInPreamble, destination);
4240
resources.scripts.clear();
4241
@@ -4346,21 +4316,6 @@ export function writeHoistables(
4316
// but we want to kick off preloading as soon as possible
4317
resources.precedences.forEach(preloadLateStyles, destination);
4318
4349
- resources.usedStylesheets.forEach((resource, key) => {
4350
- if (resources.stylesMap.has(key)) {
4351
- // The underlying stylesheet is represented both as a used stylesheet
4352
- // (a regular component we will attempt to preload) and as a StylesheetResource.
4353
- // We don't want to emit two preloads for the same href so we defer
4354
- // the preload rules of the StylesheetResource when there is a conflict
4355
- } else {
4356
- const chunks = resource.chunks;
4357
- for (i = 0; i < chunks.length; i++) {
4358
- writeChunk(destination, chunks[i]);
4359
- }
4360
- }
4361
- });
4362
- resources.usedStylesheets.clear();
4363
-
4319
resources.scripts.forEach(flushResourceLate, destination);
4320
resources.scripts.clear();
4321
@@ -4917,7 +4872,6 @@ export type Resources = {
4872
// usedImagePreloads: Set<PreloadResource>,
4873
precedences: Map<string, Set<StyleResource>>,
4874
stylePrecedences: Map<string, StyleTagResource>,
4920
- usedStylesheets: Map<string, PreloadResource>,
4875
scripts: Set<ScriptResource>,
4876
usedScripts: Set<PreloadResource>,
4877
explicitStylesheetPreloads: Set<PreloadResource>,
@@ -4945,7 +4899,6 @@ export function createResources(): Resources {
4899
// usedImagePreloads: new Set(),
4900
precedences: new Map(),
4901
stylePrecedences: new Map(),
4948
- usedStylesheets: new Map(),
4902
scripts: new Set(),
4903
usedScripts: new Set(),
4904
explicitStylesheetPreloads: new Set(),
packages/react-dom/src/__tests__/ReactDOMFloat-test.js
-95
@@ -3881,36 +3881,6 @@ body {
3881
]);
3882
});
3883
3884
- // @gate enableFloat
3885
- it('warns if you pass incompatible options to two `ReactDOM.preload(...)` when an implicit preload already exists with the same href', async () => {
3886
- function Component() {
3887
- ReactDOM.preload('foo', {
3888
- as: 'style',
3889
- crossOrigin: 'use-credentials',
3890
- });
3891
- }
3892
-
3893
- await expect(async () => {
3894
- await act(() => {
3895
- renderToPipeableStream(
3896
- <html>
3897
- <body>
3898
- <link
3899
- rel="stylesheet"
3900
- href="foo"
3901
- integrity="some hash"
3902
- media="print"
3903
- />
3904
- <Component />
3905
- </body>
3906
- </html>,
3907
- );
3908
- });
3909
- }).toErrorDev([
3910
- 'ReactDOM.preload(): For `href` "foo", The options provided conflict with props on a matching <link rel="stylesheet" ... /> element. When the preload options disagree with the underlying resource it usually means the browser will not be able to use the preload when the resource is fetched, negating any benefit the preload would provide. React will preload the resource using props derived from the resource instead and ignore the options provided to the `ReactDOM.preload()` call. In general, preloading is useful when you expect to render a resource soon but have not yet done so. In this case since the underlying resource was already rendered the preload call may be extraneous. Try removing the call, otherwise try adjusting both the props on the <link rel="stylesheet" ... /> and the options passed to `ReactDOM.preload()` to agree.\n "integrity" missing from options, underlying prop value: "some hash"\n "media" missing from options, underlying prop value: "print"\n "crossOrigin" option value: "use-credentials", missing from underlying props',
3911
- ]);
3912
- });
3913
-
3884
it('supports fetchPriority', async () => {
3885
function Component({isServer}) {
3886
ReactDOM.preload(isServer ? 'highserver' : 'highclient', {
@@ -4765,71 +4735,6 @@ body {
4735
);
4736
});
4737
4768
- // @gate enableFloat
4769
- it('preloads stylesheets without a precedence prop when server rendering', async () => {
4770
- await act(() => {
4771
- const {pipe} = renderToPipeableStream(
4772
- <html>
4773
- <head />
4774
- <body>
4775
- <link rel="stylesheet" href="notaresource" />
4776
- <div>hello world</div>
4777
- </body>
4778
- </html>,
4779
- );
4780
- pipe(writable);
4781
- });
4782
-
4783
- expect(getMeaningfulChildren(document)).toEqual(
4784
- <html>
4785
- <head>
4786
- <link rel="preload" as="style" href="notaresource" />
4787
- </head>
4788
- <body>
4789
- <link rel="stylesheet" href="notaresource" />
4790
- <div>hello world</div>
4791
- </body>
4792
- </html>,
4793
- );
4794
- });
4795
-
4796
- // @gate enableFloat
4797
- it('respects attributes defined on the stylesheet element when preloading stylesheets during server rendering', async () => {
4798
- await act(() => {
4799
- const {pipe} = renderToPipeableStream(
4800
- <html>
4801
- <head>
4802
- <link rel="stylesheet" fetchPriority="high" href="foo" />
4803
- </head>
4804
- <body>
4805
- <link rel="stylesheet" fetchPriority="low" href="notaresource" />
4806
- <div>hello world</div>
4807
- </body>
4808
- </html>,
4809
- );
4810
- pipe(writable);
4811
- });
4812
-
4813
- expect(getMeaningfulChildren(document)).toEqual(
4814
- <html>
4815
- <head>
4816
- <link rel="preload" as="style" fetchpriority="high" href="foo" />
4817
- <link
4818
- rel="preload"
4819
- as="style"
4820
- fetchpriority="low"
4821
- href="notaresource"
4822
- />
4823
- <link rel="stylesheet" fetchpriority="high" href="foo" />
4824
- </head>
4825
- <body>
4826
- <link rel="stylesheet" fetchpriority="low" href="notaresource" />
4827
- <div>hello world</div>
4828
- </body>
4829
- </html>,
4830
- );
4831
- });
4832
-
4738
// @gate enableFloat
4739
it('hoists stylesheet resources to the correct precedence', async () => {
4740
await act(() => {
packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js
+1
-7
@@ -245,9 +245,6 @@ describe('ReactDOM HostSingleton', () => {
245
expect(getVisibleChildren(document)).toEqual(
246
<html data-foo="foo">
247
<head data-bar="bar">
248
- <link rel="preload" href="resource" as="style" />
249
- <link rel="preload" href="3rdparty" as="style" />
250
- <link rel="preload" href="3rdparty2" as="style" />
248
<title>a server title</title>
249
<link rel="stylesheet" href="resource" />
250
<link rel="stylesheet" href="3rdparty" />
@@ -842,10 +839,7 @@ describe('ReactDOM HostSingleton', () => {
839
await waitForAll([]);
840
expect(getVisibleChildren(document)).toEqual(
841
<html>
845
- <head>
846
- <link rel="preload" as="style" href="before" />
847
- <link rel="preload" as="style" href="after" />
848
- </head>
842
+ <head />
843
<body>
844
<link rel="stylesheet" href="before" />
845
<link rel="stylesheet" href="after" />