preload图片必须满足三个硬性条件：as="image"必须显式写出且不可替换、href必须为静态绝对路径无JS变量、必须置于<head>最前紧贴<meta charset>后；任一缺失则Network中Initiator显示(Other)、Priority为Low。
preload 图片必须满足三个硬性条件
浏览器对 rel="preload" 的图片不是“写了就生效”，漏掉任一条件，Network 面板里 Initiator 显示为 (Other)，Priority 是 Low，和没写一样。
-
as="image"必须显式写出，且只能是"image"（"img"、"picture"、"fetch"全部无效） -
href必须是静态字符串路径，不能含 JS 变量、模板字面量或表达式，例如href="/assets/${name}.webp"会静默失败 - 必须放在
<head>最前面，紧贴<meta charset>后或<title>前；用 JS 动态插入（如document.createElement('link')）完全不触发预加载
首屏关键图必须 preload，但别全图都 preload
首屏大图（比如 banner、登录头像、LCP 主体）若等 DOM 解析到 <img src="hero.webp"> 才发起请求，可能已延迟 400–800ms，LCP 直接拉胯。而 preload 能在 HTML parser 还在读 <head> 时就抢跑下载。
- 只对真正影响 LCP 的 1–2 张图做 preload，通常是首屏最大可视图
- preload 会抢占主文档、CSS 和字体的带宽，全图加会导致渲染阻塞，反而更慢
- 路径必须和后续
<img>的src完全一致（大小写、斜杠、查询参数都不能差），否则缓存不命中，二次请求
复杂图片（WebP/AVIF + srcset）怎么 preload 才不白忙
preload 不支持响应式逻辑，as="image" 只能指定一个确定 URL，无法根据 DPR 或视口宽度自动选图。所以它只适合「兜底主图」，不能替代 <picture>。
- 如果用了
<picture>+<source media="(min-width:768px)" srcset="hero-1200w.avif">，preload 应指向最常用版本，比如桌面端主图：href="hero-1200w.avif" - 不要对
srcset中的每个变体都写 preload —— 浏览器不会按条件匹配，只会全部下载 - AVIF/WebP 格式需确保服务器 MIME 类型正确（
image/avif/image/webp），否则 preload 后解码失败，onload不触发
preload 后图片怎么真正显示出来
rel="preload" 只负责下载并进内存缓存，它不创建 DOM、不触发渲染、不调用 onload。你得自己保证后续 <img> 正确引用它。
立即学习“前端免费学习笔记（深入）”；
- preload 的
href和<img src>必须字节级一致（包括协议、域名、路径、后缀、大小写） - 不要依赖
loading="lazy"来“配合”preload —— 首图必须禁用 lazy，否则仍会延迟解码 - 如果图片需渐入或占位图过渡，应在
img.onload或img.decode()后再操作 class 或 opacity，避免闪动
./images/banner.avif，上线后 CDN 路径变成 https://cdn.example.com/images/banner.avif，但 preload 写的还是相对路径，结果缓存不复用，白 preload 了。 
