perf: cache measurements across layout param changes (#13)

Author: RostiMelk

src/hooks/useLogoSoup.ts

@@ -9,6 +9,7 @@ import {
 } from "../constants";
 import type {
   LogoSource,
+  MeasurementResult,
   NormalizedLogo,
   UseLogoSoupOptions,
   UseLogoSoupResult,
@@ -24,6 +25,12 @@ import {
   normalizeSource,
 } from "../utils/normalize";
 
+interface CachedEntry {
+  img: HTMLImageElement;
+  measurement: MeasurementResult;
+  blobUrl?: string;
+}
+
 type State = {
   isLoading: boolean;
   normalizedLogos: NormalizedLogo[];
@@ -59,6 +66,22 @@ const INITIAL_STATE: State = {
   error: null,
 };
 
+function clearCache(cache: Map<string, CachedEntry>) {
+  for (const entry of cache.values()) {
+    if (entry.blobUrl) URL.revokeObjectURL(entry.blobUrl);
+  }
+  cache.clear();
+}
+
+function pruneCache(cache: Map<string, CachedEntry>, activeSrcs: Set<string>) {
+  for (const [src, entry] of cache) {
+    if (!activeSrcs.has(src)) {
+      if (entry.blobUrl) URL.revokeObjectURL(entry.blobUrl);
+      cache.delete(src);
+    }
+  }
+}
+
 export function useLogoSoup(options: UseLogoSoupOptions): UseLogoSoupResult {
   const {
     logos,
@@ -78,48 +101,111 @@ export function useLogoSoup(options: UseLogoSoupOptions): UseLogoSoupResult {
   }
   const stableLogos = logosRef.current;
 
+  const cacheRef = useRef(new Map<string, CachedEntry>());
+  const cacheKeyRef = useRef({
+    contrastThreshold: NaN,
+    densityAware: false,
+  });
+
+  useEffect(() => {
+    return () => clearCache(cacheRef.current);
+  }, []);
+
   useEffect(() => {
     if (stableLogos.length === 0) {
       dispatch({ type: "empty" });
       return;
     }
 
-    let cancelled = false;
-    const blobUrls: string[] = [];
-    dispatch({ type: "loading" });
+    const cache = cacheRef.current;
+    const prevKey = cacheKeyRef.current;
+
+    if (
+      prevKey.contrastThreshold !== contrastThreshold ||
+      prevKey.densityAware !== densityAware
+    ) {
+      clearCache(cache);
+      cacheKeyRef.current = { contrastThreshold, densityAware };
+    }
 
     const sources: LogoSource[] = stableLogos.map(normalizeSource);
+    const activeSrcs = new Set(sources.map((s) => s.src));
+    pruneCache(cache, activeSrcs);
+
+    const allCached = sources.every((s) => cache.has(s.src));
+    const needsCrop =
+      cropToContent &&
+      sources.some((s) => {
+        const entry = cache.get(s.src);
+        return entry && !entry.blobUrl && entry.measurement.contentBox;
+      });
+
+    if (allCached && !needsCrop) {
+      const effectiveDensityFactor = densityAware ? densityFactor : 0;
+      const results = sources.map((source) => {
+        const entry = cache.get(source.src)!;
+        const normalized = createNormalizedLogo(
+          source,
+          entry.measurement,
+          baseSize,
+          scaleFactor,
+          effectiveDensityFactor,
+        );
+        if (cropToContent && entry.blobUrl) {
+          normalized.croppedSrc = entry.blobUrl;
+        }
+        return normalized;
+      });
+      dispatch({ type: "success", normalizedLogos: results });
+      return;
+    }
+
+    let cancelled = false;
+    if (!allCached) {
+      dispatch({ type: "loading" });
+    }
 
     Promise.allSettled(
       sources.map(async (source) => {
-        const img = await loadImage(source.src);
+        let entry = cache.get(source.src);
 
-        if (cancelled) throw new Error("cancelled");
+        if (!entry) {
+          const img = await loadImage(source.src);
+          if (cancelled) throw new Error("cancelled");
 
-        const measurement = measureWithContentDetection(
-          img,
-          contrastThreshold,
-          densityAware,
-        );
+          const measurement = measureWithContentDetection(
+            img,
+            contrastThreshold,
+            densityAware,
+          );
+          entry = { img, measurement };
+          cache.set(source.src, entry);
+        }
 
         const effectiveDensityFactor = densityAware ? densityFactor : 0;
 
         const normalized = createNormalizedLogo(
           source,
-          measurement,
+          entry.measurement,
           baseSize,
           scaleFactor,
           effectiveDensityFactor,
         );
 
-        if (cropToContent && measurement.contentBox) {
-          const url = await cropToBlobUrl(img, measurement.contentBox);
+        if (cropToContent && entry.measurement.contentBox && !entry.blobUrl) {
+          const url = await cropToBlobUrl(
+            entry.img,
+            entry.measurement.contentBox,
+          );
           if (cancelled) {
             URL.revokeObjectURL(url);
             throw new Error("cancelled");
           }
-          blobUrls.push(url);
-          normalized.croppedSrc = url;
+          entry.blobUrl = url;
+        }
+
+        if (cropToContent && entry.blobUrl) {
+          normalized.croppedSrc = entry.blobUrl;
         }
 
         return normalized;
@@ -150,9 +236,6 @@ export function useLogoSoup(options: UseLogoSoupOptions): UseLogoSoupResult {
 
     return () => {
       cancelled = true;
-      for (const url of blobUrls) {
-        URL.revokeObjectURL(url);
-      }
     };
   }, [
     stableLogos,

tests/bench/run.ts

@@ -188,6 +188,20 @@ const benchMount20Baseline = () => {
   }
 };
 
+const benchReNormalize20 = () => {
+  for (let i = 0; i < 20; i++) {
+    const idx = i % allLogos.length;
+    const logo = createNormalizedLogo(
+      sources[idx]!,
+      realMeasurements[idx]!,
+      DEFAULT_BASE_SIZE,
+      DEFAULT_SCALE_FACTOR,
+      DEFAULT_DENSITY_FACTOR,
+    );
+    blackhole(getVisualCenterTransform(logo, DEFAULT_ALIGN_BY));
+  }
+};
+
 const keyBenchmarks: Record<string, () => void> = {
   "content detection (1 logo)": benchMeasure,
   "render pass (20 logos)": benchGetVCT20,
@@ -247,6 +261,17 @@ const abComparisons: ABComparison[] = [
       fn: () => {},
     },
   },
+  {
+    name: "layout update: full mount vs cached",
+    a: {
+      label: "full mount",
+      fn: benchMount20,
+    },
+    b: {
+      label: "cached re-normalize",
+      fn: benchReNormalize20,
+    },
+  },
 ];
 
 console.log();