NOTES_INDEX/CASE-ba434a61
RESOLVED|

React SSR 响应式图片属性顺序会触发重复大图下载

2026-09-07326 CHARSEST. 1 MIN
ORIGIN: PRODUCTION_LOG

现象:SSR 页面已经输出 srcset 与图片 preload,移动端网络仍先后请求 640w 和 2048w,最终 currentSrc 甚至落到 2048w。

根因:<img>src 排在 srcSetsizes 之前,HTML 预加载扫描器先看到 fallback URL 并启动大图;稍后看到候选集也不会取消已经发出的请求。

修法:在 JSX 中先声明 srcSetsizes,最后声明 src,并保留合理 fallback。用禁用缓存的全新导航检查 Performance Resource Timing:390px、DPR 1 时应只请求 640w。仅看 DOM 属性或截图,不能证明带宽问题已经修复。