[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)
facebook · Aug 12, 2023 · 6c0314d · 6c0314d
1 parent 2c0c9e7
commit 6c0314d
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 35 deletions.
diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-4e3618ae41669c95a3377ae615c727f74f89d141
+1a001dac6220a64d98ae33a28e89dde78100d6c5
diff --git a/compiled/facebook-www/ReactDOMServer-dev.classic.js b/compiled/facebook-www/ReactDOMServer-dev.classic.js
@@ -19,7 +19,7 @@ if (__DEV__) {
 var React = require("react");
 var ReactDOM = require("react-dom");
 
-var ReactVersion = "18.3.0-www-classic-fa9bab35";
+var ReactVersion = "18.3.0-www-classic-a46bb872";
 
 // This refers to a WWW module.
 var warningWWW = require("warning");
@@ -4518,16 +4518,33 @@ function getImagePreloadKey(href, imageSrcSet, imageSizes) {
 }
 
 function pushImg(target, props, resources) {
+  var src = props.src,
+    srcSet = props.srcSet;
+
   if (
     props.loading !== "lazy" &&
-    typeof props.src === "string" &&
-    props.fetchPriority !== "low"
+    (typeof src === "string" || typeof srcSet === "string") &&
+    props.fetchPriority !== "low" && // We exclude data URIs in src and srcSet since these should not be preloaded
+    !(
+      typeof src === "string" &&
+      src[4] === ":" &&
+      (src[0] === "d" || src[0] === "D") &&
+      (src[1] === "a" || src[1] === "A") &&
+      (src[2] === "t" || src[2] === "T") &&
+      (src[3] === "a" || src[3] === "A")
+    ) &&
+    !(
+      typeof srcSet === "string" &&
+      srcSet[4] === ":" &&
+      (srcSet[0] === "d" || srcSet[0] === "D") &&
+      (srcSet[1] === "a" || srcSet[1] === "A") &&
+      (srcSet[2] === "t" || srcSet[2] === "T") &&
+      (srcSet[3] === "a" || srcSet[3] === "A")
+    )
   ) {
     // We have a suspensey image and ought to preload it to optimize the loading of display blocking
     // resources.
-    var src = props.src,
-      srcSet = props.srcSet,
-      sizes = props.sizes;
+    var sizes = props.sizes;
     var key = getImagePreloadKey(src, srcSet, sizes);
     var resource = resources.preloadsMap.get(key);
 

diff --git a/compiled/facebook-www/ReactDOMServer-dev.modern.js b/compiled/facebook-www/ReactDOMServer-dev.modern.js
@@ -19,7 +19,7 @@ if (__DEV__) {
 var React = require("react");
 var ReactDOM = require("react-dom");
 
-var ReactVersion = "18.3.0-www-modern-5b01b01a";
+var ReactVersion = "18.3.0-www-modern-d9bd2d78";
 
 // This refers to a WWW module.
 var warningWWW = require("warning");
@@ -4518,16 +4518,33 @@ function getImagePreloadKey(href, imageSrcSet, imageSizes) {
 }
 
 function pushImg(target, props, resources) {
+  var src = props.src,
+    srcSet = props.srcSet;
+
   if (
     props.loading !== "lazy" &&
-    typeof props.src === "string" &&
-    props.fetchPriority !== "low"
+    (typeof src === "string" || typeof srcSet === "string") &&
+    props.fetchPriority !== "low" && // We exclude data URIs in src and srcSet since these should not be preloaded
+    !(
+      typeof src === "string" &&
+      src[4] === ":" &&
+      (src[0] === "d" || src[0] === "D") &&
+      (src[1] === "a" || src[1] === "A") &&
+      (src[2] === "t" || src[2] === "T") &&
+      (src[3] === "a" || src[3] === "A")
+    ) &&
+    !(
+      typeof srcSet === "string" &&
+      srcSet[4] === ":" &&
+      (srcSet[0] === "d" || srcSet[0] === "D") &&
+      (srcSet[1] === "a" || srcSet[1] === "A") &&
+      (srcSet[2] === "t" || srcSet[2] === "T") &&
+      (srcSet[3] === "a" || srcSet[3] === "A")
+    )
   ) {
     // We have a suspensey image and ought to preload it to optimize the loading of display blocking
     // resources.
-    var src = props.src,
-      srcSet = props.srcSet,
-      sizes = props.sizes;
+    var sizes = props.sizes;
     var key = getImagePreloadKey(src, srcSet, sizes);
     var resource = resources.preloadsMap.get(key);
 

diff --git a/compiled/facebook-www/ReactDOMServer-prod.classic.js b/compiled/facebook-www/ReactDOMServer-prod.classic.js
@@ -1303,14 +1303,26 @@ function pushStartInstance(
         target$jscomp$0.push("\n");
       return children$jscomp$6;
     case "img":
+      var src = props.src,
+        srcSet = props.srcSet;
       if (
         "lazy" !== props.loading &&
-        "string" === typeof props.src &&
-        "low" !== props.fetchPriority
+        ("string" === typeof src || "string" === typeof srcSet) &&
+        "low" !== props.fetchPriority &&
+        ("string" !== typeof src ||
+          ":" !== src[4] ||
+          ("d" !== src[0] && "D" !== src[0]) ||
+          ("a" !== src[1] && "A" !== src[1]) ||
+          ("t" !== src[2] && "T" !== src[2]) ||
+          ("a" !== src[3] && "A" !== src[3])) &&
+        ("string" !== typeof srcSet ||
+          ":" !== srcSet[4] ||
+          ("d" !== srcSet[0] && "D" !== srcSet[0]) ||
+          ("a" !== srcSet[1] && "A" !== srcSet[1]) ||
+          ("t" !== srcSet[2] && "T" !== srcSet[2]) ||
+          ("a" !== srcSet[3] && "A" !== srcSet[3]))
       ) {
-        var src = props.src,
-          srcSet = props.srcSet,
-          sizes = props.sizes,
+        var sizes = props.sizes,
           key$jscomp$1 = getImagePreloadKey(src, srcSet, sizes),
           resource$jscomp$1 = resources.preloadsMap.get(key$jscomp$1);
         resource$jscomp$1 ||
@@ -4115,4 +4127,4 @@ exports.renderToString = function (children, options) {
     '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'
   );
 };
-exports.version = "18.3.0-www-classic-93cba403";
+exports.version = "18.3.0-www-classic-ac75653d";
diff --git a/compiled/facebook-www/ReactDOMServer-prod.modern.js b/compiled/facebook-www/ReactDOMServer-prod.modern.js
@@ -1302,14 +1302,26 @@ function pushStartInstance(
         target$jscomp$0.push("\n");
       return children$jscomp$6;
     case "img":
+      var src = props.src,
+        srcSet = props.srcSet;
       if (
         "lazy" !== props.loading &&
-        "string" === typeof props.src &&
-        "low" !== props.fetchPriority
+        ("string" === typeof src || "string" === typeof srcSet) &&
+        "low" !== props.fetchPriority &&
+        ("string" !== typeof src ||
+          ":" !== src[4] ||
+          ("d" !== src[0] && "D" !== src[0]) ||
+          ("a" !== src[1] && "A" !== src[1]) ||
+          ("t" !== src[2] && "T" !== src[2]) ||
+          ("a" !== src[3] && "A" !== src[3])) &&
+        ("string" !== typeof srcSet ||
+          ":" !== srcSet[4] ||
+          ("d" !== srcSet[0] && "D" !== srcSet[0]) ||
+          ("a" !== srcSet[1] && "A" !== srcSet[1]) ||
+          ("t" !== srcSet[2] && "T" !== srcSet[2]) ||
+          ("a" !== srcSet[3] && "A" !== srcSet[3]))
       ) {
-        var src = props.src,
-          srcSet = props.srcSet,
-          sizes = props.sizes,
+        var sizes = props.sizes,
           key$jscomp$1 = getImagePreloadKey(src, srcSet, sizes),
           resource$jscomp$1 = resources.preloadsMap.get(key$jscomp$1);
         resource$jscomp$1 ||
@@ -4013,4 +4025,4 @@ exports.renderToString = function (children, options) {
     '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'
   );
 };
-exports.version = "18.3.0-www-modern-ff434910";
+exports.version = "18.3.0-www-modern-85743cda";
diff --git a/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js b/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js
@@ -4525,16 +4525,33 @@ function getImagePreloadKey(href, imageSrcSet, imageSizes) {
 }
 
 function pushImg(target, props, resources) {
+  var src = props.src,
+    srcSet = props.srcSet;
+
   if (
     props.loading !== "lazy" &&
-    typeof props.src === "string" &&
-    props.fetchPriority !== "low"
+    (typeof src === "string" || typeof srcSet === "string") &&
+    props.fetchPriority !== "low" && // We exclude data URIs in src and srcSet since these should not be preloaded
+    !(
+      typeof src === "string" &&
+      src[4] === ":" &&
+      (src[0] === "d" || src[0] === "D") &&
+      (src[1] === "a" || src[1] === "A") &&
+      (src[2] === "t" || src[2] === "T") &&
+      (src[3] === "a" || src[3] === "A")
+    ) &&
+    !(
+      typeof srcSet === "string" &&
+      srcSet[4] === ":" &&
+      (srcSet[0] === "d" || srcSet[0] === "D") &&
+      (srcSet[1] === "a" || srcSet[1] === "A") &&
+      (srcSet[2] === "t" || srcSet[2] === "T") &&
+      (srcSet[3] === "a" || srcSet[3] === "A")
+    )
   ) {
     // We have a suspensey image and ought to preload it to optimize the loading of display blocking
     // resources.
-    var src = props.src,
-      srcSet = props.srcSet,
-      sizes = props.sizes;
+    var sizes = props.sizes;
     var key = getImagePreloadKey(src, srcSet, sizes);
     var resource = resources.preloadsMap.get(key);
 

diff --git a/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js b/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js
@@ -1332,14 +1332,26 @@ function pushStartInstance(
         target$jscomp$0.push("\n");
       return children$jscomp$6;
     case "img":
+      var src = props.src,
+        srcSet = props.srcSet;
       if (
         "lazy" !== props.loading &&
-        "string" === typeof props.src &&
-        "low" !== props.fetchPriority
+        ("string" === typeof src || "string" === typeof srcSet) &&
+        "low" !== props.fetchPriority &&
+        ("string" !== typeof src ||
+          ":" !== src[4] ||
+          ("d" !== src[0] && "D" !== src[0]) ||
+          ("a" !== src[1] && "A" !== src[1]) ||
+          ("t" !== src[2] && "T" !== src[2]) ||
+          ("a" !== src[3] && "A" !== src[3])) &&
+        ("string" !== typeof srcSet ||
+          ":" !== srcSet[4] ||
+          ("d" !== srcSet[0] && "D" !== srcSet[0]) ||
+          ("a" !== srcSet[1] && "A" !== srcSet[1]) ||
+          ("t" !== srcSet[2] && "T" !== srcSet[2]) ||
+          ("a" !== srcSet[3] && "A" !== srcSet[3]))
       ) {
-        var src = props.src,
-          srcSet = props.srcSet,
-          sizes = props.sizes,
+        var sizes = props.sizes,
           key$jscomp$1 = getImagePreloadKey(src, srcSet, sizes),
           resource$jscomp$1 = resources.preloadsMap.get(key$jscomp$1);
         resource$jscomp$1 ||
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		4e3618ae41669c95a3377ae615c727f74f89d141
		1a001dac6220a64d98ae33a28e89dde78100d6c5