link rel="preload" 仅适用于明确首屏快速显示且不通过 img 渲染的图片，如 CSS background-image 或 JS 动态插入图；必须带 href（绝对或根相对路径）、as="image"，URL 需与实际使用一致，否则失效。
link rel="preload" 是最直接有效的 HTML 图片预加载方式，但不是所有图片都适合用它，尤其不能替代 img 的语义和可访问性。
什么时候该用 link rel="preload" 加载图片
只在明确知道某张图片会在首屏快速显示（比如 banner 背景图、关键头图），且它不通过 img 标签直接渲染时才用。常见场景包括：
- CSS 中的
background-image（浏览器默认延迟加载，preload可提前触发） - JS 动态插入的图片（如轮播图第一帧）
- 需要与关键 JS/CSS 同步就绪的装饰性图片
如果图片本身已用 <img src="...">，再加 preload 会触发两次请求，浪费带宽。
link rel="preload" 必须带的属性
漏掉任意一个都会让预加载失效或降级为普通请求：
立即学习“前端免费学习笔记（深入）”；
-
href：必须是绝对路径或根相对路径（如/images/hero.webp），不能是文档相对路径（如./img/hero.jpg） -
as：必须设为image，否则浏览器无法正确设置请求优先级和 CORS 模式 -
imagesrcset和imagesizes：仅当需响应式预加载时才加，且必须和后续img或 CSS 中实际使用的值一致，否则可能加载错尺寸
示例：
<link rel="preload" href="/assets/hero.avif" as="image" type="image/avif">
和 img loading="eager" 的区别在哪
loading="eager" 只影响 img 元素自身的加载时机，不改变资源发现顺序；而 preload 让浏览器在解析 HTML 头部时就发起请求，比 DOM 构建完成早得多。两者不是互斥关系：
- 若图片由
img渲染，优先用loading="eager"（更轻量、无需额外标签） - 若图片靠 CSS 或 JS 加载，必须用
link rel="preload"，否则浏览器根本“看不见”它 -
preload不会自动插入图片，你仍需在 CSS 或 JS 中显式引用同一 URL
错误示范：
<link rel="preload" href="logo.png" as="image"><div style="background: url(logo2.png)"></div>——URL 不一致，白预加载。
真正容易被忽略的是资源路径一致性与 MIME 类型声明。浏览器对 type 属性虽不强制校验，但加上能避免某些 CDN 或代理的 MIME 推断错误；而路径一旦写成相对路径，不同页面嵌入时极易 404，且无法被 HTTP/2 Server Push 利用。
