Skip to content

Commit 6c0314d

Browse files
gnoffgnoff
committed
[Fizz][Float] When src or srcSet is a data URI we should not preload the image (#27218)
Data URI's in images can't effectively be preloaded (the URI contains the data so preloading only duplicates the data in the stream. If we encounter an image with this protocol in the src attribute we should avoid preloading it. DiffTrain build for [1a001da](1a001da)
1 parent 2c0c9e7 commit 6c0314d

File tree

7 files changed

+122
-35
lines changed

7 files changed

+122
-35
lines changed

‎compiled/facebook-www/REVISION‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
4e3618ae41669c95a3377ae615c727f74f89d141
1+
1a001dac6220a64d98ae33a28e89dde78100d6c5

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

Lines changed: 23 additions & 6 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-fa9bab35";
22+
var ReactVersion = "18.3.0-www-classic-a46bb872";
2323

2424
// This refers to a WWW module.
2525
var warningWWW = require("warning");
@@ -4518,16 +4518,33 @@ function getImagePreloadKey(href, imageSrcSet, imageSizes) {
45184518
}
45194519

45204520
function pushImg(target, props, resources) {
4521+
var src = props.src,
4522+
srcSet = props.srcSet;
4523+
45214524
if (
45224525
props.loading !== "lazy" &&
4523-
typeof props.src === "string" &&
4524-
props.fetchPriority !== "low"
4526+
(typeof src === "string" || typeof srcSet === "string") &&
4527+
props.fetchPriority !== "low" && // We exclude data URIs in src and srcSet since these should not be preloaded
4528+
!(
4529+
typeof src === "string" &&
4530+
src[4] === ":" &&
4531+
(src[0] === "d" || src[0] === "D") &&
4532+
(src[1] === "a" || src[1] === "A") &&
4533+
(src[2] === "t" || src[2] === "T") &&
4534+
(src[3] === "a" || src[3] === "A")
4535+
) &&
4536+
!(
4537+
typeof srcSet === "string" &&
4538+
srcSet[4] === ":" &&
4539+
(srcSet[0] === "d" || srcSet[0] === "D") &&
4540+
(srcSet[1] === "a" || srcSet[1] === "A") &&
4541+
(srcSet[2] === "t" || srcSet[2] === "T") &&
4542+
(srcSet[3] === "a" || srcSet[3] === "A")
4543+
)
45254544
) {
45264545
// We have a suspensey image and ought to preload it to optimize the loading of display blocking
45274546
// resources.
4528-
var src = props.src,
4529-
srcSet = props.srcSet,
4530-
sizes = props.sizes;
4547+
var sizes = props.sizes;
45314548
var key = getImagePreloadKey(src, srcSet, sizes);
45324549
var resource = resources.preloadsMap.get(key);
45334550

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

Lines changed: 23 additions & 6 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-5b01b01a";
22+
var ReactVersion = "18.3.0-www-modern-d9bd2d78";
2323

2424
// This refers to a WWW module.
2525
var warningWWW = require("warning");
@@ -4518,16 +4518,33 @@ function getImagePreloadKey(href, imageSrcSet, imageSizes) {
45184518
}
45194519

45204520
function pushImg(target, props, resources) {
4521+
var src = props.src,
4522+
srcSet = props.srcSet;
4523+
45214524
if (
45224525
props.loading !== "lazy" &&
4523-
typeof props.src === "string" &&
4524-
props.fetchPriority !== "low"
4526+
(typeof src === "string" || typeof srcSet === "string") &&
4527+
props.fetchPriority !== "low" && // We exclude data URIs in src and srcSet since these should not be preloaded
4528+
!(
4529+
typeof src === "string" &&
4530+
src[4] === ":" &&
4531+
(src[0] === "d" || src[0] === "D") &&
4532+
(src[1] === "a" || src[1] === "A") &&
4533+
(src[2] === "t" || src[2] === "T") &&
4534+
(src[3] === "a" || src[3] === "A")
4535+
) &&
4536+
!(
4537+
typeof srcSet === "string" &&
4538+
srcSet[4] === ":" &&
4539+
(srcSet[0] === "d" || srcSet[0] === "D") &&
4540+
(srcSet[1] === "a" || srcSet[1] === "A") &&
4541+
(srcSet[2] === "t" || srcSet[2] === "T") &&
4542+
(srcSet[3] === "a" || srcSet[3] === "A")
4543+
)
45254544
) {
45264545
// We have a suspensey image and ought to preload it to optimize the loading of display blocking
45274546
// resources.
4528-
var src = props.src,
4529-
srcSet = props.srcSet,
4530-
sizes = props.sizes;
4547+
var sizes = props.sizes;
45314548
var key = getImagePreloadKey(src, srcSet, sizes);
45324549
var resource = resources.preloadsMap.get(key);
45334550

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

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1303,14 +1303,26 @@ function pushStartInstance(
13031303
target$jscomp$0.push("\n");
13041304
return children$jscomp$6;
13051305
case "img":
1306+
var src = props.src,
1307+
srcSet = props.srcSet;
13061308
if (
13071309
"lazy" !== props.loading &&
1308-
"string" === typeof props.src &&
1309-
"low" !== props.fetchPriority
1310+
("string" === typeof src || "string" === typeof srcSet) &&
1311+
"low" !== props.fetchPriority &&
1312+
("string" !== typeof src ||
1313+
":" !== src[4] ||
1314+
("d" !== src[0] && "D" !== src[0]) ||
1315+
("a" !== src[1] && "A" !== src[1]) ||
1316+
("t" !== src[2] && "T" !== src[2]) ||
1317+
("a" !== src[3] && "A" !== src[3])) &&
1318+
("string" !== typeof srcSet ||
1319+
":" !== srcSet[4] ||
1320+
("d" !== srcSet[0] && "D" !== srcSet[0]) ||
1321+
("a" !== srcSet[1] && "A" !== srcSet[1]) ||
1322+
("t" !== srcSet[2] && "T" !== srcSet[2]) ||
1323+
("a" !== srcSet[3] && "A" !== srcSet[3]))
13101324
) {
1311-
var src = props.src,
1312-
srcSet = props.srcSet,
1313-
sizes = props.sizes,
1325+
var sizes = props.sizes,
13141326
key$jscomp$1 = getImagePreloadKey(src, srcSet, sizes),
13151327
resource$jscomp$1 = resources.preloadsMap.get(key$jscomp$1);
13161328
resource$jscomp$1 ||
@@ -4115,4 +4127,4 @@ exports.renderToString = function (children, options) {
41154127
'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'
41164128
);
41174129
};
4118-
exports.version = "18.3.0-www-classic-93cba403";
4130+
exports.version = "18.3.0-www-classic-ac75653d";

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

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1302,14 +1302,26 @@ function pushStartInstance(
13021302
target$jscomp$0.push("\n");
13031303
return children$jscomp$6;
13041304
case "img":
1305+
var src = props.src,
1306+
srcSet = props.srcSet;
13051307
if (
13061308
"lazy" !== props.loading &&
1307-
"string" === typeof props.src &&
1308-
"low" !== props.fetchPriority
1309+
("string" === typeof src || "string" === typeof srcSet) &&
1310+
"low" !== props.fetchPriority &&
1311+
("string" !== typeof src ||
1312+
":" !== src[4] ||
1313+
("d" !== src[0] && "D" !== src[0]) ||
1314+
("a" !== src[1] && "A" !== src[1]) ||
1315+
("t" !== src[2] && "T" !== src[2]) ||
1316+
("a" !== src[3] && "A" !== src[3])) &&
1317+
("string" !== typeof srcSet ||
1318+
":" !== srcSet[4] ||
1319+
("d" !== srcSet[0] && "D" !== srcSet[0]) ||
1320+
("a" !== srcSet[1] && "A" !== srcSet[1]) ||
1321+
("t" !== srcSet[2] && "T" !== srcSet[2]) ||
1322+
("a" !== srcSet[3] && "A" !== srcSet[3]))
13091323
) {
1310-
var src = props.src,
1311-
srcSet = props.srcSet,
1312-
sizes = props.sizes,
1324+
var sizes = props.sizes,
13131325
key$jscomp$1 = getImagePreloadKey(src, srcSet, sizes),
13141326
resource$jscomp$1 = resources.preloadsMap.get(key$jscomp$1);
13151327
resource$jscomp$1 ||
@@ -4013,4 +4025,4 @@ exports.renderToString = function (children, options) {
40134025
'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'
40144026
);
40154027
};
4016-
exports.version = "18.3.0-www-modern-ff434910";
4028+
exports.version = "18.3.0-www-modern-85743cda";

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

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4525,16 +4525,33 @@ function getImagePreloadKey(href, imageSrcSet, imageSizes) {
45254525
}
45264526

45274527
function pushImg(target, props, resources) {
4528+
var src = props.src,
4529+
srcSet = props.srcSet;
4530+
45284531
if (
45294532
props.loading !== "lazy" &&
4530-
typeof props.src === "string" &&
4531-
props.fetchPriority !== "low"
4533+
(typeof src === "string" || typeof srcSet === "string") &&
4534+
props.fetchPriority !== "low" && // We exclude data URIs in src and srcSet since these should not be preloaded
4535+
!(
4536+
typeof src === "string" &&
4537+
src[4] === ":" &&
4538+
(src[0] === "d" || src[0] === "D") &&
4539+
(src[1] === "a" || src[1] === "A") &&
4540+
(src[2] === "t" || src[2] === "T") &&
4541+
(src[3] === "a" || src[3] === "A")
4542+
) &&
4543+
!(
4544+
typeof srcSet === "string" &&
4545+
srcSet[4] === ":" &&
4546+
(srcSet[0] === "d" || srcSet[0] === "D") &&
4547+
(srcSet[1] === "a" || srcSet[1] === "A") &&
4548+
(srcSet[2] === "t" || srcSet[2] === "T") &&
4549+
(srcSet[3] === "a" || srcSet[3] === "A")
4550+
)
45324551
) {
45334552
// We have a suspensey image and ought to preload it to optimize the loading of display blocking
45344553
// resources.
4535-
var src = props.src,
4536-
srcSet = props.srcSet,
4537-
sizes = props.sizes;
4554+
var sizes = props.sizes;
45384555
var key = getImagePreloadKey(src, srcSet, sizes);
45394556
var resource = resources.preloadsMap.get(key);
45404557

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

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1332,14 +1332,26 @@ function pushStartInstance(
13321332
target$jscomp$0.push("\n");
13331333
return children$jscomp$6;
13341334
case "img":
1335+
var src = props.src,
1336+
srcSet = props.srcSet;
13351337
if (
13361338
"lazy" !== props.loading &&
1337-
"string" === typeof props.src &&
1338-
"low" !== props.fetchPriority
1339+
("string" === typeof src || "string" === typeof srcSet) &&
1340+
"low" !== props.fetchPriority &&
1341+
("string" !== typeof src ||
1342+
":" !== src[4] ||
1343+
("d" !== src[0] && "D" !== src[0]) ||
1344+
("a" !== src[1] && "A" !== src[1]) ||
1345+
("t" !== src[2] && "T" !== src[2]) ||
1346+
("a" !== src[3] && "A" !== src[3])) &&
1347+
("string" !== typeof srcSet ||
1348+
":" !== srcSet[4] ||
1349+
("d" !== srcSet[0] && "D" !== srcSet[0]) ||
1350+
("a" !== srcSet[1] && "A" !== srcSet[1]) ||
1351+
("t" !== srcSet[2] && "T" !== srcSet[2]) ||
1352+
("a" !== srcSet[3] && "A" !== srcSet[3]))
13391353
) {
1340-
var src = props.src,
1341-
srcSet = props.srcSet,
1342-
sizes = props.sizes,
1354+
var sizes = props.sizes,
13431355
key$jscomp$1 = getImagePreloadKey(src, srcSet, sizes),
13441356
resource$jscomp$1 = resources.preloadsMap.get(key$jscomp$1);
13451357
resource$jscomp$1 ||

0 commit comments

Comments
 (0)