是预加载缩略图最直接、浏览器原生支持的方式，不渲染、不阻塞dom，须写在中之后、指定as="image"和fetchpriority="high"，路径需静态且准确。
用 <link rel="preload"> 预加载缩略图最直接
浏览器原生支持的预加载方式，不触发渲染、不阻塞 DOM，适合在页面加载早期把小图（比如 10KB 以内的缩略图）提前拉进内存缓存。关键不是“缩略图”本身，而是你明确知道它会在首屏或交互中很快用到。
常见错误是把 rel="preload" 和 rel="prefetch" 混用——后者是低优先级、空闲时才加载，对缩略图没用；还有人误加 as="image" 却漏掉 fetchpriority="high"，导致 Chrome 下实际优先级被降级。
-
<link rel="preload" as="image" fetchpriority="high" href="thumb.jpg">必须写as="image"，否则浏览器不会按图片解码逻辑处理 - 放在
里，越靠前越好，但不要早于<meta charset> - 如果缩略图路径是动态生成的（如 CMS 输出），确保服务端吐出的 HTML 已包含该
<link>，而不是靠 JS 注入——JS 注入的preload大部分浏览器会忽略
用 loading="eager" 配合 decoding="async" 控制加载行为
当缩略图是 <img> 标签直接展示，且你希望它跳过懒加载、立即请求，并减少解码阻塞主线程时，这两个属性组合比单纯靠 CSS 或 JS 强制触发更可靠。
注意：Chrome 115+ 才真正尊重 loading="eager" 对非首屏图的强制作用；而 decoding="async" 在 Safari 上基本无效，但无害。
<img src="thumb.jpg" loading="eager" decoding="async" style="max-width:90%" style="max-width:90%" alt="">- 必须配
width和height，否则decoding="async"可能被忽略（浏览器需要布局信息才能异步解码） - 别和
srcset混用时漏掉sizes，否则 eager 可能失效——浏览器无法判断该加载哪一套资源
避免用 JS 主动 new Image().src 预加载
虽然能发请求，但这种方式绕过了浏览器的资源调度机制：没有 as 类型提示，无法参与优先级队列，不能被 DevTools 的 “Network → Priority” 列正确标记，还可能因跨域缺失 crossorigin 导致缓存失效。
更麻烦的是，如果页面有 CSP 策略限制 img-src，这种 JS 创建的图片请求会被直接拦截，且错误静默——控制台连 Failed to load resource 都不报。
- 真要用 JS 控制，请改用
fetch(url, {mode: 'no-cors'})+cache: 'default'，至少能进 HTTP 缓存 - 或者退一步，用
<link rel="prefetch" as="image" href="...">，虽优先级低，但语义正确、兼容性好
缩略图预加载效果差？先查这三件事
很多“预加载没用”其实是链路断在中间：请求发了，但没进缓存，或进了缓存却没被复用。这时候看 Network 面板比调代码更高效。
- 检查响应头有没有
Cache-Control: public, max-age=31536000—— 缩略图不变的话，强缓存一年没问题 - 在 Network → Size 列看是否显示
from memory cache或from disk cache，不是from service worker（SW 可能绕过预加载） - 右键图片资源 → “Open in Sources tab”，确认 MIME type 是
image/jpeg或image/webp，不是text/html（常见于后端路由 fallback 错误）
预加载缩略图这件事，90% 的问题不在写法，而在路径是否稳定、缓存头是否合理、以及是否误用了懒加载框架覆盖了 eager 行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
