Skip to content

Commit

Permalink
[Fizz][Float] <img> inside <picture> should not preload during SSR (
Browse files Browse the repository at this point in the history
#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)
  • Loading branch information
gnoff committed Sep 7, 2023
1 parent 5b220d1 commit 089c36c
Show file tree
Hide file tree
Showing 8 changed files with 222 additions and 195 deletions.
2 changes: 1 addition & 1 deletion compiled/facebook-www/REVISION
Original file line number Diff line number Diff line change
@@ -1 +1 @@
953cb02f6de2a9f3eb52456b263e11f839584bc6
3566de59e2046e7e8478462375aaa71716f1095b
92 changes: 49 additions & 43 deletions compiled/facebook-www/ReactDOMServer-dev.classic.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ if (__DEV__) {
var React = require("react");
var ReactDOM = require("react-dom");

var ReactVersion = "18.3.0-www-classic-12c31f96";
var ReactVersion = "18.3.0-www-classic-605a9ce6";

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

function createFormatContext(insertionMode, selectedValue, noscriptTagInScope) {
var NO_SCOPE =
/* */
0;
var NOSCRIPT_SCOPE =
/* */
1;
var PICTURE_SCOPE =
/* */
2; // Lets us keep track of contextual state and pick it back up after suspending.

function createFormatContext(insertionMode, selectedValue, tagScope) {
return {
insertionMode: insertionMode,
selectedValue: selectedValue,
noscriptTagInScope: noscriptTagInScope
tagScope: tagScope
};
}

Expand All @@ -2206,95 +2215,86 @@ function createRootFormatContext(namespaceURI) {
: namespaceURI === "http://www.w3.org/1998/Math/MathML"
? MATHML_MODE
: ROOT_HTML_MODE;
return createFormatContext(insertionMode, null, false);
return createFormatContext(insertionMode, null, NO_SCOPE);
}
function getChildFormatContext(parentContext, type, props) {
switch (type) {
case "noscript":
return createFormatContext(HTML_MODE, null, true);
return createFormatContext(
HTML_MODE,
null,
parentContext.tagScope | NOSCRIPT_SCOPE
);

case "select":
return createFormatContext(
HTML_MODE,
props.value != null ? props.value : props.defaultValue,
parentContext.noscriptTagInScope
parentContext.tagScope
);

case "svg":
return createFormatContext(SVG_MODE, null, parentContext.tagScope);

case "picture":
return createFormatContext(
SVG_MODE,
HTML_MODE,
null,
parentContext.noscriptTagInScope
parentContext.tagScope | PICTURE_SCOPE
);

case "math":
return createFormatContext(
MATHML_MODE,
null,
parentContext.noscriptTagInScope
);
return createFormatContext(MATHML_MODE, null, parentContext.tagScope);

case "foreignObject":
return createFormatContext(
HTML_MODE,
null,
parentContext.noscriptTagInScope
);
return createFormatContext(HTML_MODE, null, parentContext.tagScope);
// Table parents are special in that their children can only be created at all if they're
// wrapped in a table parent. So we need to encode that we're entering this mode.

case "table":
return createFormatContext(
HTML_TABLE_MODE,
null,
parentContext.noscriptTagInScope
);
return createFormatContext(HTML_TABLE_MODE, null, parentContext.tagScope);

case "thead":
case "tbody":
case "tfoot":
return createFormatContext(
HTML_TABLE_BODY_MODE,
null,
parentContext.noscriptTagInScope
parentContext.tagScope
);

case "colgroup":
return createFormatContext(
HTML_COLGROUP_MODE,
null,
parentContext.noscriptTagInScope
parentContext.tagScope
);

case "tr":
return createFormatContext(
HTML_TABLE_ROW_MODE,
null,
parentContext.noscriptTagInScope
parentContext.tagScope
);
}

if (parentContext.insertionMode >= HTML_TABLE_MODE) {
// Whatever tag this was, it wasn't a table parent or other special parent, so we must have
// entered plain HTML again.
return createFormatContext(
HTML_MODE,
null,
parentContext.noscriptTagInScope
);
return createFormatContext(HTML_MODE, null, parentContext.tagScope);
}

if (parentContext.insertionMode === ROOT_HTML_MODE) {
if (type === "html") {
// We've emitted the root and is now in <html> mode.
return createFormatContext(HTML_HTML_MODE, null, false);
return createFormatContext(HTML_HTML_MODE, null, parentContext.tagScope);
} else {
// We've emitted the root and is now in plain HTML mode.
return createFormatContext(HTML_MODE, null, false);
return createFormatContext(HTML_MODE, null, parentContext.tagScope);
}
} else if (parentContext.insertionMode === HTML_HTML_MODE) {
// We've emitted the document element and is now in plain HTML mode.
return createFormatContext(HTML_MODE, null, false);
return createFormatContext(HTML_MODE, null, parentContext.tagScope);
}

return parentContext;
Expand Down Expand Up @@ -4070,14 +4070,15 @@ function getImagePreloadKey(href, imageSrcSet, imageSizes) {
return getResourceKey("image", uniquePart);
}

function pushImg(target, props, resumableState) {
function pushImg(target, props, resumableState, pictureTagInScope) {
var src = props.src,
srcSet = props.srcSet;

if (
props.loading !== "lazy" &&
(typeof src === "string" || typeof srcSet === "string") &&
props.fetchPriority !== "low" && // We exclude data URIs in src and srcSet since these should not be preloaded
props.fetchPriority !== "low" &&
pictureTagInScope === false && // We exclude data URIs in src and srcSet since these should not be preloaded
!(
typeof src === "string" &&
src[4] === ":" &&
Expand Down Expand Up @@ -4778,7 +4779,7 @@ function pushStartInstance(
props,
renderState,
formatContext.insertionMode,
formatContext.noscriptTagInScope
!!(formatContext.tagScope & NOSCRIPT_SCOPE)
);

case "link":
Expand All @@ -4789,7 +4790,7 @@ function pushStartInstance(
renderState,
textEmbedded,
formatContext.insertionMode,
formatContext.noscriptTagInScope
!!(formatContext.tagScope & NOSCRIPT_SCOPE)
);

case "script":
Expand All @@ -4799,7 +4800,7 @@ function pushStartInstance(
resumableState,
textEmbedded,
formatContext.insertionMode,
formatContext.noscriptTagInScope
!!(formatContext.tagScope & NOSCRIPT_SCOPE)
);

case "style":
Expand All @@ -4810,7 +4811,7 @@ function pushStartInstance(
renderState,
textEmbedded,
formatContext.insertionMode,
formatContext.noscriptTagInScope
!!(formatContext.tagScope & NOSCRIPT_SCOPE)
);

case "meta":
Expand All @@ -4820,7 +4821,7 @@ function pushStartInstance(
renderState,
textEmbedded,
formatContext.insertionMode,
formatContext.noscriptTagInScope
!!(formatContext.tagScope & NOSCRIPT_SCOPE)
);
// Newline eating tags

Expand All @@ -4830,7 +4831,12 @@ function pushStartInstance(
}

case "img": {
return pushImg(target, props, resumableState);
return pushImg(
target,
props,
resumableState,
!!(formatContext.tagScope & PICTURE_SCOPE)
);
}
// Omitted close tags

Expand Down
Loading

0 comments on commit 089c36c

Please sign in to comment.