rel="preload"加速首屏图片需同时满足：as="image"、静态href、置于head最前且URL与img完全一致，否则退化为Low优先级fetch。
rel="preload" 能加快首屏图片渲染，但必须满足三个硬性条件，缺一不可；否则它就退化成普通 fetch，Network 面板里 Initiator 显示为 (Other)，Priority 是 Low，和没写一样。
为什么写了 rel="preload" 图片还是延迟加载？
常见错误是只加了标签，却漏掉关键约束：
-
as="image"必须显式写出，as="img"或as="picture"全部无效 -
href必须是静态路径，不能含变量、模板字符串或表达式（例如href="/assets/${name}.jpg"会静默失败） - 必须放在
<head>最前面，紧贴<meta charset>后或<title>前；动态插入（如document.createElement('link')）完全不触发预解析 - 预加载路径与实际
<img src>的 URL 必须**字面完全一致**：大小写、斜杠、协议、查询参数都不能差——/logo.webp和logo.webp就算同域也会触发二次请求
rel="preload" 和 loading="lazy" 能一起用吗？
能，但必须分清用途：前者抢跑下载，后者控制加载时机。首屏图绝不能加 loading="lazy"，否则浏览器直接跳过请求，LCP 暴涨。
- 首屏关键图：只用
<link rel="preload" href="hero.jpg" as="image">+ 对应的<img src="hero.jpg">（不加loading属性） - 非首屏图：不用 preload，统一用
loading="lazy"，且所有<img>都要带width/height或aspect-ratio，防 CLS - 不要对同一张图既 preload 又 lazy —— preload 已确保资源就位，lazy 只会干扰首屏调度
预加载后图片怎么真正显示出来？
rel="preload" 只负责下载进内存缓存，它不创建 DOM、不触发渲染、不调用 onload。你得靠真实 <img> 标签来驱动展示。
立即学习“前端免费学习笔记（深入）”；
- 确保
<img>的src与 preload 的href字符串完全相同（包括协议、域名、路径、大小写） - 如果用了
srcset，preload 只能针对其中某一个具体分辨率源，不能写通配符 - 不要指望 preload 自动替换占位图或触发 JS 回调；它只是让浏览器在解析到
<img>时，能立刻从缓存取图解码，跳过网络等待
最容易被忽略的是路径一致性——哪怕只是多了一个尾部斜杠，或 HTTP/HTTPS 协议不匹配，都会导致两次请求。验证时别只看标签写了没，得盯 Network 面板里 Initiator 是不是 Preloader，以及是否真复用了缓存。
