[Fizz] Preload "suspensey" images (#27191)

Eventually we will treat images without `loading="lazy"` as suspensey
meaning we will coordinate the reveal of boundaries when these images
have loaded and ideally decoded. As a step in that direction this change
prioritizes these images for preloading to ensure the highest chance
that they are loaded before boundaries reveal (or initial paint). every
img rendered that is non lazy loading will emit a preload just behind
fonts.

This change implements a new resource queue for high priority image
preloads

There are a number of scenarios where we end up putting a preload in
this queue

1. If you render a non-lazy image and there are fewer than 10 high
priority image preloads
2. if you render a non-lazy image with fetchPriority "high"
3. if you preload as "image" with fetchPriority "high"

This means that by default we won't overrsaturate this queue with every
img rendered on the page but the earlier encountered ones will go first.
Essentially this is React's own implementation of fetchPriority="auto".

If however you specify that the fetchPriority is higher then in theory
an unlimited number of images can preload in this queue. This gives
users some control over queuing while still providing a good default
that does not require any opting into

Additionally we use fetchPriority "low" as a signal that an image does
not require preloading. This may end up being pointless if not using
lazy (which also opts out of preloading) because it might delay initial
paint but we'll start with this hueristic and consider changes in the
future when we have more information

DiffTrain build for [f359f9b](f359f9b)

Author: gnoff

compiled/facebook-www/REVISION

@@ -1 +1 @@
-201becd3d294b38824930a818e3412c6e04ba2eb
+f359f9b41ac1a8127f5ba505e0c04675eee0d310

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-94960c5b";
+var ReactVersion = "18.3.0-www-classic-328214ad";
 
 // This refers to a WWW module.
 var warningWWW = require("warning");
@@ -4501,6 +4501,80 @@ function pushStyleContents(target, props) {
   return;
 }
 
+function getImagePreloadKey(href, imageSrcSet, imageSizes) {
+  var uniquePart = "";
+
+  if (typeof imageSrcSet === "string" && imageSrcSet !== "") {
+    uniquePart += "[" + imageSrcSet + "]";
+
+    if (typeof imageSizes === "string") {
+      uniquePart += "[" + imageSizes + "]";
+    }
+  } else {
+    uniquePart += "[][]" + href;
+  }
+
+  return getResourceKey("image", uniquePart);
+}
+
+function pushImg(target, props, resources) {
+  if (
+    props.loading !== "lazy" &&
+    typeof props.src === "string" &&
+    props.fetchPriority !== "low"
+  ) {
+    // We have a suspensey image and ought to preload it to optimize the loading of display blocking
+    // resources.
+    var src = props.src,
+      imageSrcSet = props.imageSrcSet,
+      imageSizes = props.imageSizes;
+    var key = getImagePreloadKey(src, imageSrcSet, imageSizes);
+    var resource = resources.preloadsMap.get(key);
+
+    if (!resource) {
+      resource = {
+        type: "preload",
+        chunks: [],
+        state: NoState,
+        props: {
+          rel: "preload",
+          as: "image",
+          // There is a bug in Safari where imageSrcSet is not respected on preload links
+          // so we omit the href here if we have imageSrcSet b/c safari will load the wrong image.
+          // This harms older browers that do not support imageSrcSet by making their preloads not work
+          // but this population is shrinking fast and is already small so we accept this tradeoff.
+          href: imageSrcSet ? undefined : src,
+          imageSrcSet: imageSrcSet,
+          imageSizes: imageSizes,
+          crossOrigin: props.crossOrigin,
+          integrity: props.integrity,
+          type: props.type,
+          fetchPriority: props.fetchPriority,
+          referrerPolicy: props.referrerPolicy
+        }
+      };
+      resources.preloadsMap.set(key, resource);
+
+      {
+        markAsRenderedResourceDEV(resource, props);
+      }
+
+      pushLinkImpl(resource.chunks, resource.props);
+    }
+
+    if (
+      props.fetchPriority === "high" ||
+      resources.highImagePreloads.size < 10
+    ) {
+      resources.highImagePreloads.add(resource);
+    } else {
+      resources.bulkPreloads.add(resource);
+    }
+  }
+
+  return pushSelfClosing(target, props, "img");
+}
+
 function pushSelfClosing(target, props, tag) {
   target.push(startChunkForTag(tag));
 
@@ -5249,6 +5323,10 @@ function pushStartInstance(
     case "pre": {
       return pushStartPreformattedElement(target, props, type);
     }
+
+    case "img": {
+      return pushImg(target, props, resources);
+    }
     // Omitted close tags
 
     case "base":
@@ -5257,7 +5335,6 @@ function pushStartInstance(
     case "col":
     case "embed":
     case "hr":
-    case "img":
     case "keygen":
     case "param":
     case "source":
@@ -6279,14 +6356,16 @@ function writePreamble(
 
   preconnectChunks.length = 0;
   resources.fontPreloads.forEach(flushResourceInPreamble, destination);
-  resources.fontPreloads.clear(); // Flush unblocked stylesheets by precedence
+  resources.fontPreloads.clear();
+  resources.highImagePreloads.forEach(flushResourceInPreamble, destination);
+  resources.highImagePreloads.clear(); // Flush unblocked stylesheets by precedence
 
   resources.precedences.forEach(flushAllStylesInPreamble, destination);
   resources.bootstrapScripts.forEach(flushResourceInPreamble, destination);
   resources.scripts.forEach(flushResourceInPreamble, destination);
   resources.scripts.clear();
-  resources.explicitPreloads.forEach(flushResourceInPreamble, destination);
-  resources.explicitPreloads.clear(); // Write embedding preloadChunks
+  resources.bulkPreloads.forEach(flushResourceInPreamble, destination);
+  resources.bulkPreloads.clear(); // Write embedding preloadChunks
 
   var preloadChunks = responseState.preloadChunks;
 
@@ -6334,16 +6413,18 @@ function writeHoistables(destination, resources, responseState) {
 
   preconnectChunks.length = 0;
   resources.fontPreloads.forEach(flushResourceLate, destination);
-  resources.fontPreloads.clear(); // Preload any stylesheets. these will emit in a render instruction that follows this
+  resources.fontPreloads.clear();
+  resources.highImagePreloads.forEach(flushResourceInPreamble, destination);
+  resources.highImagePreloads.clear(); // Preload any stylesheets. these will emit in a render instruction that follows this
   // but we want to kick off preloading as soon as possible
 
   resources.precedences.forEach(preloadLateStyles, destination); // bootstrap scripts should flush above script priority but these can only flush in the preamble
   // so we elide the code here for performance
 
   resources.scripts.forEach(flushResourceLate, destination);
   resources.scripts.clear();
-  resources.explicitPreloads.forEach(flushResourceLate, destination);
-  resources.explicitPreloads.clear(); // Write embedding preloadChunks
+  resources.bulkPreloads.forEach(flushResourceLate, destination);
+  resources.bulkPreloads.clear(); // Write embedding preloadChunks
 
   var preloadChunks = responseState.preloadChunks;
 
@@ -6822,12 +6903,13 @@ function createResources() {
     // cleared on flush
     preconnects: new Set(),
     fontPreloads: new Set(),
+    highImagePreloads: new Set(),
     // usedImagePreloads: new Set(),
     precedences: new Map(),
     stylePrecedences: new Map(),
     bootstrapScripts: new Set(),
     scripts: new Set(),
-    explicitPreloads: new Set(),
+    bulkPreloads: new Set(),
     // like a module global for currently rendering boundary
     boundaryResources: null
   };
@@ -7033,19 +7115,7 @@ function preload(href, options) {
       // by varying the href. this is an edge case but it is the most correct behavior.
       var imageSrcSet = options.imageSrcSet,
         imageSizes = options.imageSizes;
-      var uniquePart = "";
-
-      if (typeof imageSrcSet === "string" && imageSrcSet !== "") {
-        uniquePart += "[" + imageSrcSet + "]";
-
-        if (typeof imageSizes === "string") {
-          uniquePart += "[" + imageSizes + "]";
-        }
-      } else {
-        uniquePart += "[][]" + href;
-      }
-
-      key = getResourceKey(as, uniquePart);
+      key = getImagePreloadKey(href, imageSrcSet, imageSizes);
     } else {
       key = getResourceKey(as, href);
     }
@@ -7139,8 +7209,10 @@ function preload(href, options) {
 
     if (as === "font") {
       resources.fontPreloads.add(resource);
+    } else if (as === "image" && options.fetchPriority === "high") {
+      resources.highImagePreloads.add(resource);
     } else {
-      resources.explicitPreloads.add(resource);
+      resources.bulkPreloads.add(resource);
     }
 
     flushResources(request);