<link rel="preload">是最简单可靠的图片预加载方式，必须置于<head>开头、指定as="image"、路径与<img src>完全一致，否则失效。
直接用 <link rel="preload"> 声明关键图，是最简单、最可靠、浏览器原生支持的预加载实例——不需要 JS、不干扰渲染、Lighthouse 能识别，但必须写对位置和参数，否则白写。
必须把 <link rel="preload"> 放在 <head> 里
它只在 HTML 解析早期生效，一旦写到 <body> 或动态插入，浏览器直接忽略。
- ✅ 正确：放在
<head>开头，越靠前越好 - ❌ 错误：写在
<body>里、用 JSdocument.head.appendChild()动态加、或放在 CSS/JS 标签后面 - ⚠️ 注意：
as="image"缺了就失效——浏览器当普通 fetch 处理，不走图片缓存策略，优先级也降档
href 路径必须静态且与最终 <img src> 完全一致
预加载不是“随便下一张图”，而是“把这张图提前放进缓存，等 <img> 用时直接复用”。路径差一个字符（大小写、斜杠、query 参数），缓存就不命中。
- ✅ 正确：
href="/assets/banner.webp"，且对应<img src="/assets/banner.webp"> - ❌ 错误：
href="./banner.webp"（相对路径易错位）、href="/assets/banner.webp?v=1"但<img src="/assets/banner.webp"（少 query） - ⚠️ 注意：Webpack/Vite 构建后带哈希的文件名（如
logo.a1b2c3.webp），href必须同步更新，硬编码/assets/logo.webp会 404
轮播图预加载要分批，别一次全拉
轮播图有 10 张图，不代表一上来就 new Image() 10 次——浏览器同域并发请求通常只有 6~8 个，密集触发会阻塞关键资源。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐：初始化时只预加载当前页 + 相邻 1–2 张（如 index=2，预载 1/2/3）
- ✅ 切换后立刻补预载新相邻图（滑到第 5 张，马上预载 4/5/6）
- ⚠️ 注意：
new Image()必须先绑onload/onerror，再赋值src；否则缓存命中时事件不触发，你根本不知道它“其实已经好了” - ⚠️ 注意：URL 带设备像素比（如
@2x）或 WebP fallback 时，预加载的 URL 必须和最终<img src>实际取到的那个完全一致
最容易被忽略的是缓存一致性——预加载写了，<img> 却用了另一份 URL，结果图片下两遍；还有就是把 loading="lazy" 和 preload 同时用，逻辑冲突，浏览器可能直接丢弃 preload 指令。
