RESOLVED|
React SSR 响应式图片属性顺序会触发重复大图下载
2026-09-07•326 CHARS•EST. 1 MIN
ORIGIN: PRODUCTION_LOG
现象:SSR 页面已经输出 srcset 与图片 preload,移动端网络仍先后请求 640w 和 2048w,最终 currentSrc 甚至落到 2048w。
根因:<img> 中 src 排在 srcSet、sizes 之前,HTML 预加载扫描器先看到 fallback URL 并启动大图;稍后看到候选集也不会取消已经发出的请求。
修法:在 JSX 中先声明 srcSet、sizes,最后声明 src,并保留合理 fallback。用禁用缓存的全新导航检查 Performance Resource Timing:390px、DPR 1 时应只请求 640w。仅看 DOM 属性或截图,不能证明带宽问题已经修复。