shan chu tupian yuchong xiazai, chidu gengxin an zhen he bing

web/src/app/batch/components/image-results.tsx

@@ -6,7 +6,7 @@ import { Clock3, Download, LoaderCircle, Pencil, RotateCcw, ScanSearch, Sparkles
 import { ImageShareEvidenceDialog } from "@/app/batch/components/image-share-evidence-dialog";
 import { ChatGptIcon } from "@/components/chatgpt-icon";
 import { Button } from "@/components/ui/button";
-import { downloadImageSrc, normalizeImageUrl, warmImageBlob } from "@/lib/image-url";
+import { downloadImageSrc, normalizeImageUrl } from "@/lib/image-url";
 import { cn } from "@/lib/utils";
 import type { ImageConversation, ImageTurnStatus, StoredImage, StoredReferenceImage } from "@/store/image-conversations";
 
@@ -395,9 +395,9 @@ export function ImageResults({
                                     event.currentTarget.naturalWidth,
                                     event.currentTarget.naturalHeight,
                                   );
-                                  if (image.url && !image.b64_json) {
-                                    warmImageBlob(image.url);
-                                  }
+                                  // ⚠️ 同 image-results.tsx：不要在这里 warmImageBlob。
+                                  // 跨域直链会被 fetch 的 CORS 拦下并回落到后端 /api/images/proxy，
+                                  // 让容器替每个访客把整张图重下一遍，图片反而更慢。
                                 }}
                               />
                               {shareEvidenceEnabled && image.conversationId ? (

web/src/app/batch/page.tsx

@@ -48,7 +48,7 @@ import {
   type RedeemCode,
   type ThirdPartyImageModelOption,
 } from "@/lib/api";
-import { fetchImageBlob, releaseImageBlob, warmImageBlob } from "@/lib/image-url";
+import { fetchImageBlob, releaseImageBlob } from "@/lib/image-url";
 import { formatChinaDateTime, formatChinaShortDateTime } from "@/lib/time";
 import { useAuthGuard } from "@/lib/use-auth-guard";
 import { Input } from "@/components/ui/input";
@@ -541,11 +541,8 @@ function taskDataToStoredImages(image: StoredImage, task: ImageTask): StoredImag
         durationMs: task.duration_ms,
       }];
     }
-    resultItems.forEach((item) => {
-      if (item.url && !item.b64_json) {
-        warmImageBlob(item.url);
-      }
-    });
+    // ⚠️ 同 image/page.tsx：不要在这里预热 warmImageBlob(item.url)。
+    // 预热会与 <img> 抢并发连接，跨域失败还会让容器走 /api/images/proxy 重下一遍。
     return resultItems.map((item, index) => ({
       ...image,
       id: index === 0 ? image.id : `${image.id}-extra-${index}`,

web/src/app/image/components/image-results.tsx

@@ -6,7 +6,7 @@ import { Clock3, Download, LoaderCircle, Pencil, RotateCcw, ScanSearch, Sparkles
 import { ImageShareEvidenceDialog } from "@/app/image/components/image-share-evidence-dialog";
 import { ChatGptIcon } from "@/components/chatgpt-icon";
 import { Button } from "@/components/ui/button";
-import { downloadImageSrc, normalizeImageUrl, warmImageBlob } from "@/lib/image-url";
+import { downloadImageSrc, normalizeImageUrl } from "@/lib/image-url";
 import { cn } from "@/lib/utils";
 import type { ImageConversation, ImageTurnStatus, StoredImage, StoredReferenceImage } from "@/store/image-conversations";
 
@@ -166,6 +166,11 @@ export function ImageResults({
   }, []);
 
   const [imageDimensions, setImageDimensions] = useState<Record<string, string>>({});
+  // 把「每张图 onLoad 各触发一次 setState」合并成「每帧最多一次」。
+  // 一份会话常有几十张结果图，若逐张 setState，每加载完一张就要重渲染整份轮次列表
+  // （几十个子树 diff），主线程被占满，视觉上就是「图一直在转、点哪都迟钝」。
+  const pendingDimensionsRef = useRef<Record<string, string>>({});
+  const dimensionsRafRef = useRef<number | null>(null);
   const [continueEditLoadingImageIds, setContinueEditLoadingImageIds] = useState<string[]>([]);
   const [annotationLoadingImageIds, setAnnotationLoadingImageIds] = useState<string[]>([]);
   const [now, setNow] = useState(() => Date.now());
@@ -186,9 +191,36 @@ export function ImageResults({
 
   const updateImageDimensions = (id: string, width: number, height: number) => {
     const dimensions = formatImageDimensions(width, height);
-    setImageDimensions((current) => current[id] === dimensions ? current : { ...current, [id]: dimensions });
+    pendingDimensionsRef.current[id] = dimensions;
+    if (dimensionsRafRef.current !== null) {
+      return;
+    }
+    dimensionsRafRef.current = window.requestAnimationFrame(() => {
+      dimensionsRafRef.current = null;
+      const pending = pendingDimensionsRef.current;
+      pendingDimensionsRef.current = {};
+      setImageDimensions((current) => {
+        let next: Record<string, string> | null = null;
+        for (const [key, value] of Object.entries(pending)) {
+          if (current[key] !== value) {
+            next = next || { ...current };
+            next[key] = value;
+          }
+        }
+        return next || current;
+      });
+    });
   };
 
+  useEffect(() => {
+    return () => {
+      if (dimensionsRafRef.current !== null) {
+        window.cancelAnimationFrame(dimensionsRafRef.current);
+        dimensionsRafRef.current = null;
+      }
+    };
+  }, []);
+
 
   const continueEdit = async (
     conversationId: string,
@@ -395,9 +427,14 @@ export function ImageResults({
                                     event.currentTarget.naturalWidth,
                                     event.currentTarget.naturalHeight,
                                   );
-                                  if (image.url && !image.b64_json) {
-                                    warmImageBlob(image.url);
-                                  }
+                                  // ⚠️ 这里**不要**再加 `warmImageBlob(image.url)`。
+                                  // 图片是 ChatGPT 官网签名直链（跨域），<img> 已经把它完整下载过一遍；
+                                  // 再 fetch 一次会走 fetchImageBlobUncached，跨域被 CORS 拦下后回落到
+                                  // 后端 `/api/images/proxy`，让只有 2 核的容器替每个访客把整张图重下一遍。
+                                  // 一屏 6~9 张图 ⇒ 雪崩式排队，且浏览器对同域名的 6 条并发连接被这些
+                                  // 无用请求占满，<img> 反而要等——这就是「画图页图片加载慢、右键新标签页
+                                  // 打开却很快」的直接原因（新标签页不跑这段 JS，也不与轮询抢连接）。
+                                  // 下载 / 加入参考都是用户主动点击，届时 fetchImageBlob 自己会取，功能不变。
                                 }}
                               />
                               {shareEvidenceEnabled && image.conversationId ? (

web/src/app/image/page.tsx

@@ -48,7 +48,7 @@ import {
   type RedeemCode,
   type ThirdPartyImageModelOption,
 } from "@/lib/api";
-import { fetchImageBlob, releaseImageBlob, warmImageBlob } from "@/lib/image-url";
+import { fetchImageBlob, releaseImageBlob } from "@/lib/image-url";
 import { formatChinaDateTime, formatChinaShortDateTime } from "@/lib/time";
 import { useAuthGuard } from "@/lib/use-auth-guard";
 import { Input } from "@/components/ui/input";
@@ -534,11 +534,11 @@ function taskDataToStoredImages(image: StoredImage, task: ImageTask): StoredImag
         durationMs: task.duration_ms,
       }];
     }
-    resultItems.forEach((item) => {
-      if (item.url && !item.b64_json) {
-        warmImageBlob(item.url);
-      }
-    });
+    // ⚠️ 这里**不要**再加「任务成功就 warmImageBlob(item.url)」的预热。
+    // 结果图是 ChatGPT 官网签名直链（跨域），预热会与紧接着的 <img> 请求**同时**发车：
+    // 跨域 fetch 被 CORS 拦下后回落到后端 `/api/images/proxy`，等于让容器替每个访客
+    // 把整张图重下一遍，还占掉浏览器对同域名的并发连接。渲染时 <img> 自己会拉，
+    // 用户点「下载 / 加入参考」时 fetchImageBlob 也会拉，预热纯属多余负担。
     return resultItems.map((item, index) => ({
       ...image,
       id: index === 0 ? image.id : `${image.id}-extra-${index}`,

web/src/lib/image-url.ts

@@ -169,9 +169,30 @@ export async function fetchImageBlob(src: string) {
   return entry.promise;
 }
 
+/**
+ * 预取图片为 Blob，供「下载 / 加入参考」等需要字节流的操作用。
+ *
+ * ⚠️⚠️ **绝对不要在图片列表的渲染 / onLoad 路径里批量调用它**（2026-10-16 事故）。
+ * 结果图是 ChatGPT 官网签名直链（跨域），`<img>` 本来就要完整下载一遍；这里再 fetch
+ * 一次，跨域被 CORS 拦下后会回落到后端 `/api/images/proxy`，让只有 2 核的容器替**每个
+ * 访客**把整张图（1~3MB）重下一遍；同时这些无用请求会占满浏览器对同域名仅有的 6 条
+ * 并发连接，`<img>` 反而要排队——症状就是「画图页图片加载慢，右键新标签页打开却很快」。
+ * 下载/加入参考都是用户主动点击，届时 fetchImageBlob 自己会取并缓存，无需预热。
+ *
+ * 保留在飞上限作为兜底：万一将来又被挂到批量路径上，最多只并行 2 个，不会雪崩。
+ */
+const MAX_INFLIGHT_WARMS = 2;
+let inflightWarms = 0;
+
 export function warmImageBlob(src: string) {
   if (!String(src || "").trim()) return;
-  void fetchImageBlob(src).catch(() => undefined);
+  if (inflightWarms >= MAX_INFLIGHT_WARMS) return;
+  inflightWarms += 1;
+  void fetchImageBlob(src)
+    .catch(() => undefined)
+    .finally(() => {
+      inflightWarms = Math.max(0, inflightWarms - 1);
+    });
 }
 
 export function releaseImageBlob(src: string) {