超大图不能靠preload硬塞，需服务端生成多档jpeg/avif并用srcset+sizes响应式加载；new image()前须检测设备像素比与格式支持，避免静默失败或带宽过载。
大尺寸图片不能靠 link rel="preload" 硬塞
170MB 的 TIFF 或未压缩 PNG，哪怕加了 <link rel="preload" as="image" href="huge.tiff">，浏览器也会卡死甚至崩溃——预加载不是“让浏览器更努力下载”，而是“让浏览器更聪明地调度”。对超大图，它只会提前触发一个无法完成的请求，拖垮整个页面。
真正要做的，是服务端先降维：必须生成多档 JPEG/AVIF，并在 HTML 中用 srcset + sizes 告诉浏览器“这张图实际占多宽”，否则它默认按 100vw 拿最高分辨率版本，手机用户直接加载 4K 图。
- 错误写法：
<img src="huge.tiff" style="max-width:90%">—— 浏览器仍下载全量 170MB - 正确前提：服务端已用 ImageMagick 或类似工具生成
768w.jpg、1920w.jpg、3840w.avif等文件 - 必须配
sizes，例如：sizes="(max-width: 768px) 100vw, 50vw"，否则srcset形同虚设
new Image() 加载前必须检查尺寸和格式支持
运行时预加载大图（比如用户 hover 后加载高清版），不能直接 img.src = "huge.avif" 就完事。现代浏览器虽支持 AVIF，但部分安卓 WebView 或旧版 Safari 会静默失败；而用户带宽也未必撑得住单张 20MB 的图。
建议在调用 new Image() 前做两层判断：
- 用
matchMedia或window.devicePixelRatio过滤是否真需要高清资源（比如 DPR - 用
document.createElement('avif').canPlayType('image/avif')检查格式支持， fallback 到 WebP 或 JPEG - 赋值
src前先绑定onload/onerror，并检查img.complete—— 缓存命中时事件不会触发，需手动处理
WebP/AVIF 预加载必须带 fallback，且不能只靠 link
<link rel="preload" as="image" href="hero.avif"> 在不支持 AVIF 的浏览器里会 404，且无降级路径。这不是 bug，是设计如此：preload 不参与格式协商。
安全做法是双轨声明：
<picture><source type="image/avif" srcset="/assets/hero.avif"></source><source type="image/webp" srcset="/assets/hero.webp"></source> @@##@@ </picture>
再额外加一条 preload（仅针对主格式）：
<link rel="preload" as="image" href="/assets/hero.avif" fetchpriority="high">
注意：href 必须与 <source></source> 中完全一致，否则缓存不命中；旧浏览器忽略 preload 无副作用，但 fallback 必须存在。
懒加载和预加载在大图场景下必须隔离使用
首屏 banner 如果是 5MB 的 AVIF，既不能加 loading="lazy"（会导致白屏），也不能裸写 preload（没 fallback 会炸）。它们是互斥策略，不能混用。
典型错误配置：
@@##@@ <link rel="preload" as="image" href="hero.avif">
这会让 Chrome 一边延迟请求，一边又试图提前请求，结果可能发两次请求，或其中一次被取消，浪费带宽还不可控。
正确分工：
- 首屏关键大图：删掉
loading="lazy"，用<picture></picture>+<link preload>（带 fallback） - 非首屏大图（如画廊第二页）：只用
loading="lazy"，不 preload —— 否则用户根本没打算看，你却提前占满带宽 - 用户交互触发的大图（如点击查看原图）：用
new Image()按需加载，且加超时和失败回退
最易被忽略的一点：大图预加载成功后，如果后续用 <img src="/assets/hero.jpg" alt="hero"> 渲染，必须确保 src 路径与 preload 的 href 完全一致（包括大小写、斜杠、查询参数），否则浏览器不会复用缓存，等于白忙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
