Skip to content

Commit 089c36c

Browse files
gnoffgnoff
committed
[Fizz][Float] <img> inside <picture> should not preload during SSR (#27346)
img tags inside picture tags should not automatically be preloaded because usually the img is a fallback. We will consider a more comprehensive way of preloading picture tags which may require a technique like using an inline script to construct the image in the browser but for now we simply omit the preloads to avoid harming load times by loading fallbacks. DiffTrain build for [3566de5](3566de5)
1 parent 5b220d1 commit 089c36c

8 files changed

Lines changed: 222 additions & 195 deletions

‎compiled/facebook-www/REVISION‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
953cb02f6de2a9f3eb52456b263e11f839584bc6
1+
3566de59e2046e7e8478462375aaa71716f1095b

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

Lines changed: 49 additions & 43 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-12c31f96";
22+
var ReactVersion = "18.3.0-www-classic-605a9ce6";
2323

2424
// This refers to a WWW module.
2525
var warningWWW = require("warning");
@@ -2189,13 +2189,22 @@ var HTML_TABLE_BODY_MODE = 6;
21892189
var HTML_TABLE_ROW_MODE = 7;
21902190
var HTML_COLGROUP_MODE = 8; // We have a greater than HTML_TABLE_MODE check elsewhere. If you add more cases here, make sure it
21912191
// still makes sense
2192-
// Lets us keep track of contextual state and pick it back up after suspending.
21932192

2194-
function createFormatContext(insertionMode, selectedValue, noscriptTagInScope) {
2193+
var NO_SCOPE =
2194+
/* */
2195+
0;
2196+
var NOSCRIPT_SCOPE =
2197+
/* */
2198+
1;
2199+
var PICTURE_SCOPE =
2200+
/* */
2201+
2; // Lets us keep track of contextual state and pick it back up after suspending.
2202+
2203+
function createFormatContext(insertionMode, selectedValue, tagScope) {
21952204
return {
21962205
insertionMode: insertionMode,
21972206
selectedValue: selectedValue,
2198-
noscriptTagInScope: noscriptTagInScope
2207+
tagScope: tagScope
21992208
};
22002209
}
22012210

@@ -2206,95 +2215,86 @@ function createRootFormatContext(namespaceURI) {
22062215
: namespaceURI === "http://www.w3.org/1998/Math/MathML"
22072216
? MATHML_MODE
22082217
: ROOT_HTML_MODE;
2209-
return createFormatContext(insertionMode, null, false);
2218+
return createFormatContext(insertionMode, null, NO_SCOPE);
22102219
}
22112220
function getChildFormatContext(parentContext, type, props) {
22122221
switch (type) {
22132222
case "noscript":
2214-
return createFormatContext(HTML_MODE, null, true);
2223+
return createFormatContext(
2224+
HTML_MODE,
2225+
null,
2226+
parentContext.tagScope | NOSCRIPT_SCOPE
2227+
);
22152228

22162229
case "select":
22172230
return createFormatContext(
22182231
HTML_MODE,
22192232
props.value != null ? props.value : props.defaultValue,
2220-
parentContext.noscriptTagInScope
2233+
parentContext.tagScope
22212234
);
22222235

22232236
case "svg":
2237+
return createFormatContext(SVG_MODE, null, parentContext.tagScope);
2238+
2239+
case "picture":
22242240
return createFormatContext(
2225-
SVG_MODE,
2241+
HTML_MODE,
22262242
null,
2227-
parentContext.noscriptTagInScope
2243+
parentContext.tagScope | PICTURE_SCOPE
22282244
);
22292245

22302246
case "math":
2231-
return createFormatContext(
2232-
MATHML_MODE,
2233-
null,
2234-
parentContext.noscriptTagInScope
2235-
);
2247+
return createFormatContext(MATHML_MODE, null, parentContext.tagScope);
22362248

22372249
case "foreignObject":
2238-
return createFormatContext(
2239-
HTML_MODE,
2240-
null,
2241-
parentContext.noscriptTagInScope
2242-
);
2250+
return createFormatContext(HTML_MODE, null, parentContext.tagScope);
22432251
// Table parents are special in that their children can only be created at all if they're
22442252
// wrapped in a table parent. So we need to encode that we're entering this mode.
22452253

22462254
case "table":
2247-
return createFormatContext(
2248-
HTML_TABLE_MODE,
2249-
null,
2250-
parentContext.noscriptTagInScope
2251-
);
2255+
return createFormatContext(HTML_TABLE_MODE, null, parentContext.tagScope);
22522256

22532257
case "thead":
22542258
case "tbody":
22552259
case "tfoot":
22562260
return createFormatContext(
22572261
HTML_TABLE_BODY_MODE,
22582262
null,
2259-
parentContext.noscriptTagInScope
2263+
parentContext.tagScope
22602264
);
22612265

22622266
case "colgroup":
22632267
return createFormatContext(
22642268
HTML_COLGROUP_MODE,
22652269
null,
2266-
parentContext.noscriptTagInScope
2270+
parentContext.tagScope
22672271
);
22682272

22692273
case "tr":
22702274
return createFormatContext(
22712275
HTML_TABLE_ROW_MODE,
22722276
null,
2273-
parentContext.noscriptTagInScope
2277+
parentContext.tagScope
22742278
);
22752279
}
22762280

22772281
if (parentContext.insertionMode >= HTML_TABLE_MODE) {
22782282
// Whatever tag this was, it wasn't a table parent or other special parent, so we must have
22792283
// entered plain HTML again.
2280-
return createFormatContext(
2281-
HTML_MODE,
2282-
null,
2283-
parentContext.noscriptTagInScope
2284-
);
2284+
return createFormatContext(HTML_MODE, null, parentContext.tagScope);
22852285
}
22862286

22872287
if (parentContext.insertionMode === ROOT_HTML_MODE) {
22882288
if (type === "html") {
22892289
// We've emitted the root and is now in <html> mode.
2290-
return createFormatContext(HTML_HTML_MODE, null, false);
2290+
return createFormatContext(HTML_HTML_MODE, null, parentContext.tagScope);
22912291
} else {
22922292
// We've emitted the root and is now in plain HTML mode.
2293-
return createFormatContext(HTML_MODE, null, false);
2293+
return createFormatContext(HTML_MODE, null, parentContext.tagScope);
22942294
}
22952295
} else if (parentContext.insertionMode === HTML_HTML_MODE) {
22962296
// We've emitted the document element and is now in plain HTML mode.
2297-
return createFormatContext(HTML_MODE, null, false);
2297+
return createFormatContext(HTML_MODE, null, parentContext.tagScope);
22982298
}
22992299

23002300
return parentContext;
@@ -4070,14 +4070,15 @@ function getImagePreloadKey(href, imageSrcSet, imageSizes) {
40704070
return getResourceKey("image", uniquePart);
40714071
}
40724072

4073-
function pushImg(target, props, resumableState) {
4073+
function pushImg(target, props, resumableState, pictureTagInScope) {
40744074
var src = props.src,
40754075
srcSet = props.srcSet;
40764076

40774077
if (
40784078
props.loading !== "lazy" &&
40794079
(typeof src === "string" || typeof srcSet === "string") &&
4080-
props.fetchPriority !== "low" && // We exclude data URIs in src and srcSet since these should not be preloaded
4080+
props.fetchPriority !== "low" &&
4081+
pictureTagInScope === false && // We exclude data URIs in src and srcSet since these should not be preloaded
40814082
!(
40824083
typeof src === "string" &&
40834084
src[4] === ":" &&
@@ -4778,7 +4779,7 @@ function pushStartInstance(
47784779
props,
47794780
renderState,
47804781
formatContext.insertionMode,
4781-
formatContext.noscriptTagInScope
4782+
!!(formatContext.tagScope & NOSCRIPT_SCOPE)
47824783
);
47834784

47844785
case "link":
@@ -4789,7 +4790,7 @@ function pushStartInstance(
47894790
renderState,
47904791
textEmbedded,
47914792
formatContext.insertionMode,
4792-
formatContext.noscriptTagInScope
4793+
!!(formatContext.tagScope & NOSCRIPT_SCOPE)
47934794
);
47944795

47954796
case "script":
@@ -4799,7 +4800,7 @@ function pushStartInstance(
47994800
resumableState,
48004801
textEmbedded,
48014802
formatContext.insertionMode,
4802-
formatContext.noscriptTagInScope
4803+
!!(formatContext.tagScope & NOSCRIPT_SCOPE)
48034804
);
48044805

48054806
case "style":
@@ -4810,7 +4811,7 @@ function pushStartInstance(
48104811
renderState,
48114812
textEmbedded,
48124813
formatContext.insertionMode,
4813-
formatContext.noscriptTagInScope
4814+
!!(formatContext.tagScope & NOSCRIPT_SCOPE)
48144815
);
48154816

48164817
case "meta":
@@ -4820,7 +4821,7 @@ function pushStartInstance(
48204821
renderState,
48214822
textEmbedded,
48224823
formatContext.insertionMode,
4823-
formatContext.noscriptTagInScope
4824+
!!(formatContext.tagScope & NOSCRIPT_SCOPE)
48244825
);
48254826
// Newline eating tags
48264827

@@ -4830,7 +4831,12 @@ function pushStartInstance(
48304831
}
48314832

48324833
case "img": {
4833-
return pushImg(target, props, resumableState);
4834+
return pushImg(
4835+
target,
4836+
props,
4837+
resumableState,
4838+
!!(formatContext.tagScope & PICTURE_SCOPE)
4839+
);
48344840
}
48354841
// Omitted close tags
48364842

0 commit comments

Comments
 (0)