Preparation to prefetch image requests in batch mode (#53490)

Summary:
Pull Request resolved: #53490

Changelog: [Internal]

Sending individual image prefetch request on Android over JNI is causing measurable performance regression. The idea here is batch all image prefetch request for a given shadowNodeTree and then flush it all at once - **DONE** in the next change.

Another optimization we should consider is to execute the batch on `n imagePrefetchRequest` off the JavaScript thread `mqt_v_js` and instead on e.g. the UiThread (on which currently Android Image UI initiates image resource downloads)

Reviewed By: lenaic

Differential Revision: D81186916

fbshipit-source-id: f8b24e70f2ded237be96bdb973b72acbbb8b1c20

Author: christophpurrer

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/fabric/FabricUIManager.java

@@ -984,10 +984,9 @@ public void runGuarded() {
    * by an ImageView.
    */
   @UnstableReactNativeAPI
-  public void experimental_prefetchResource(
-      String componentName, int surfaceId, int reactTag, ReadableMapBuffer params) {
-    mMountingManager.experimental_prefetchResource(
-        mReactApplicationContext, componentName, surfaceId, reactTag, params);
+  public void experimental_prefetchResources(String componentName, ReadableMapBuffer params) {
+    mMountingManager.experimental_prefetchResources(
+        mReactApplicationContext, componentName, params);
   }
 
   void setBinding(FabricUIManagerBinding binding) {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/fabric/mounting/MountingManager.kt

@@ -331,23 +331,19 @@ internal class MountingManager(
    *
    * @param reactContext
    * @param componentName
-   * @param surfaceId surface ID
-   * @param reactTag reactTag that should be set as ID of the view instance
    * @param params prefetch request params defined in C++
    */
   @Suppress("FunctionName")
   @AnyThread
   @UnstableReactNativeAPI
-  fun experimental_prefetchResource(
+  fun experimental_prefetchResources(
       reactContext: ReactContext?,
       componentName: String?,
-      surfaceId: Int,
-      reactTag: Int,
       params: MapBuffer?,
   ) {
     viewManagerRegistry
         .get(checkNotNull(componentName))
-        .experimental_prefetchResource(reactContext, surfaceId, reactTag, params)
+        .experimental_prefetchResources(reactContext, params)
   }
 
   fun enqueuePendingEvent(

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewManager.java

@@ -488,13 +488,10 @@ public void onSurfaceStopped(int surfaceId) {
    * ViewManager.
    *
    * @param reactContext {@link com.facebook.react.bridge.ReactContext} used for the view.
-   * @param surfaceId {@link int} surface ID
-   * @param reactTag reactTag that should be set as ID of the view instance
    * @param params {@link MapBuffer} prefetch request params defined in C++
    */
   @UnstableReactNativeAPI
-  public void experimental_prefetchResource(
-      ReactContext reactContext, int surfaceId, int reactTag, MapBuffer params) {
+  public void experimental_prefetchResources(ReactContext reactContext, MapBuffer params) {
     return;
   }
 

packages/react-native/ReactCommon/react/renderer/imagemanager/platform/android/react/renderer/imagemanager/ImageFetcher.cpp

@@ -9,35 +9,31 @@
 
 #include <react/common/mapbuffer/JReadableMapBuffer.h>
 #include <react/renderer/imagemanager/conversions.h>
-#include <utility>
 
 namespace facebook::react {
 
 ImageRequest ImageFetcher::requestImage(
     const ImageSource& imageSource,
     SurfaceId surfaceId,
     const ImageRequestParams& imageRequestParams,
-    Tag tag) const {
+    Tag tag) {
+  items_.emplace_back(ImageRequestItem{
+      .imageSource = imageSource,
+      .surfaceId = surfaceId,
+      .imageRequestParams = imageRequestParams,
+      .tag = tag});
+
   auto fabricUIManager_ =
       contextContainer_->at<jni::global_ref<jobject>>("FabricUIManager");
-  static auto requestImage =
+  static auto prefetchResources =
       fabricUIManager_->getClass()
-          ->getMethod<void(
-              std::string, SurfaceId, Tag, JReadableMapBuffer::javaobject)>(
-              "experimental_prefetchResource");
-
-  auto serializedImageRequest =
-      serializeImageRequest(imageSource, imageRequestParams);
+          ->getMethod<void(std::string, JReadableMapBuffer::javaobject)>(
+              "experimental_prefetchResources");
 
   auto readableMapBuffer =
-      JReadableMapBuffer::createWithContents(std::move(serializedImageRequest));
-
-  requestImage(
-      fabricUIManager_,
-      "RCTImageView",
-      surfaceId,
-      tag,
-      readableMapBuffer.get());
+      JReadableMapBuffer::createWithContents(serializeImageRequests(items_));
+  items_.clear();
+  prefetchResources(fabricUIManager_, "RCTImageView", readableMapBuffer.get());
 
   auto telemetry = std::make_shared<ImageTelemetry>(surfaceId);
 

packages/react-native/ReactCommon/react/renderer/imagemanager/platform/android/react/renderer/imagemanager/ImageFetcher.h

@@ -22,9 +22,10 @@ class ImageFetcher {
       const ImageSource& imageSource,
       SurfaceId surfaceId,
       const ImageRequestParams& imageRequestParams,
-      Tag tag) const;
+      Tag tag);
 
  private:
+  std::vector<ImageRequestItem> items_;
   std::shared_ptr<const ContextContainer> contextContainer_;
 };
 } // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/imagemanager/platform/android/react/renderer/imagemanager/ImageRequestParams.h

@@ -91,4 +91,11 @@ class ImageRequestParams {
   }
 };
 
+struct ImageRequestItem {
+  ImageSource imageSource;
+  SurfaceId surfaceId{};
+  ImageRequestParams imageRequestParams;
+  Tag tag{};
+};
+
 } // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/imagemanager/platform/android/react/renderer/imagemanager/conversions.h

@@ -7,13 +7,13 @@
 
 #pragma once
 
-#include <string>
-
 #include <react/renderer/core/graphicsConversions.h>
 #include <react/renderer/imagemanager/ImageRequestParams.h>
 #include <react/renderer/imagemanager/primitives.h>
 #include <react/renderer/mapbuffer/MapBuffer.h>
 #include <react/renderer/mapbuffer/MapBufferBuilder.h>
+#include <string>
+#include <vector>
 
 namespace facebook::react {
 
@@ -51,6 +51,8 @@ constexpr MapBuffer::Key IS_KEY_FADE_DURATION = 11;
 constexpr MapBuffer::Key IS_KEY_PROGRESSIVE_RENDERING_ENABLED = 12;
 constexpr MapBuffer::Key IS_KEY_LOADING_INDICATOR_SRC = 13;
 constexpr MapBuffer::Key IS_KEY_ANALYTIC_TAG = 14;
+constexpr MapBuffer::Key IS_KEY_SURFACE_ID = 15;
+constexpr MapBuffer::Key IS_KEY_TAG = 16;
 
 inline void serializeImageSource(
     MapBufferBuilder& builder,
@@ -91,14 +93,26 @@ inline void serializeImageRequestParams(
   builder.putString(IS_KEY_ANALYTIC_TAG, imageRequestParams.analyticTag);
 }
 
+inline MapBuffer serializeImageRequest(const ImageRequestItem& item) {
+  auto builder = MapBufferBuilder();
+  serializeImageSource(builder, item.imageSource);
+  serializeImageRequestParams(builder, item.imageRequestParams);
+  builder.putInt(IS_KEY_SURFACE_ID, item.surfaceId);
+  builder.putInt(IS_KEY_TAG, item.tag);
+  return builder.build();
+}
+
 } // namespace
 
-inline MapBuffer serializeImageRequest(
-    const ImageSource& imageSource,
-    const ImageRequestParams& imageRequestParams) {
-  auto builder = MapBufferBuilder();
-  serializeImageSource(builder, imageSource);
-  serializeImageRequestParams(builder, imageRequestParams);
+inline MapBuffer serializeImageRequests(
+    const std::vector<ImageRequestItem>& items) {
+  std::vector<MapBuffer> mapBufferList;
+  mapBufferList.reserve(items.size());
+  for (const auto& item : items) {
+    mapBufferList.emplace_back(serializeImageRequest(item));
+  }
+  MapBufferBuilder builder;
+  builder.putMapBufferList(0, mapBufferList);
   return builder.build();
 }