必须置于且带as="image"，否则浏览器忽略或降级为low优先级；href需绝对/根相对路径，url须与后续完全一致，否则缓存失效。
预加载图片不是加个 loading="eager" 就完事，真要提前下载进缓存，必须用 <link rel="preload"> 或 new Image() 主动触发——其他写法基本无效或起反作用。
为什么 <link rel="preload"> 必须写在 as="image"
浏览器只在 HTML 解析早期处理 中的 <link rel="preload">，放 里会被忽略。不写 as="image" 时，浏览器按普通 fetch 处理，无法复用图片缓存策略、不走解码优化路径，甚至可能被 Lighthouse 判为“无效预加载”。
-
href必须是绝对路径或根相对路径（如/assets/hero.webp），不能是./hero.webp—— 否则 HTML 在子目录下会 404 -
fetchpriority="high"在 Chrome 109+ 有效，能压过部分 CSS/JS 请求；旧版忽略，无副作用 - 不能和
loading="lazy"同时用：逻辑冲突，浏览器可能直接跳过preload - 不支持
srcset或动态模板，href="/assets/${name}.webp"会被当字面量请求
new Image() 预加载必须先绑事件再赋值 src
顺序错了就收不到回调：缓存命中的图片会同步触发 onload，如果还没绑定就赋值 src，事件直接丢失。这不是 bug，是规范行为。
- 务必先设
img.onload和img.onerror，再写img.src = url - 加载前检查
img.complete === true：为true说明已缓存，需立刻走成功逻辑 - 别写
new Image().src = url一行流——失败不可知，也无法await - 并发控制很关键：同域通常只有 6–8 个连接，批量预加载建议用 Promise 队列，每次最多 4 个
哪些图该预加载？哪些绝对不该
预加载是“抢带宽”，不是“图省事”。乱用反而拖慢首屏，尤其对弱网用户。
- 该预加载：首屏立即可见的关键图（banner、logo、登录框主图），且 URL 与后续
<img src>完全一致（含大小写、query 参数） - 不该预加载：所有
loading="lazy"的图、折叠面板内未展开的图、轮播图非相邻页、带用户交互才触发的图（这些该用new Image()按需加载） - 特别注意：Webpack/Vite 构建后文件名带 hash，
href必须同步更新，硬编码路径会失效 - WebP 预加载需 fallback：只预加载 WebP 版本，但
<img>标签中得确保实际使用它（比如用srcset+type切换）
最容易被忽略的是 URL 一致性：预加载的 href 和最终 <img src> 差一个斜杠、一个大小写、一个 query 参数，缓存就完全失效，等于白跑两次请求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
