预加载图片仅在满足三个硬性条件时才提升lcp：as="image"、href为静态字符串且与img src完全一致、标签置于head最前；否则无效，且仅应预加载1–2张首屏核心图。
预加载图片本身不直接“提高页面打开速度”，它只让关键图片下载更早、更靠前；真正起效的前提是：你 preload 的那张图，恰好是影响 LCP（最大内容绘制）的首屏核心图，且写法完全正确。错一点，rel="preload" 就等于没写。
为什么写了 rel="preload" 图片还是没快起来
常见失效原因不是浏览器不支持，而是三个硬性条件缺一不可：
-
as="image"必须写，且只能是"image"——"img"、"picture"、"icon"全部无效 -
href值必须是静态字符串，不能含变量、模板语法或运行时拼接（如href="/img/${name}.webp"会静默失败） - 标签必须放在
最前面，紧贴<meta charset>后或<title></title>前；用 JS 动态插入（document.createElement('link')）完全不触发预加载
href 路径和 <img src> 必须完全一致
浏览器不会做路径归一化处理。哪怕只差一个斜杠、大小写或后缀名，就会导致两次请求：
- 错误示例：
<link rel="preload" href="hero.webp" as="image">+<img src="/hero.webp">→ 实际发起两个请求 - 正确做法：确保两个 URL 字符串逐字节相同，建议统一用小写、无前导斜杠、带完整扩展名
- 验证方式：打开 Chrome DevTools → Network 面板 → 看该图片的 Initiator 是否为
preload，Priority 是否为Highest；如果是(Other)和Low，说明预加载已退化
只 preload 影响 LCP 的那 1–2 张图
预加载会抢占主文档、CSS 和字体的网络带宽，滥用反而拖慢首屏渲染：
- 必须 preload 的：首屏 Banner、登录页头像、核心产品图（即 LCP 元素本身）
- 绝对不要 preload 的：轮播图其余帧、列表页瀑布流图片、
loading="lazy"的图、background-image中的图（它不走 img 加载流程） - 替代方案：对非首屏图，用
loading="lazy"+srcset+ 固定width/height更安全有效
最容易被忽略的一点：预加载只管下载进内存缓存，不负责渲染。它不会自动把图塞进 <img>，也不会触发 onload。你仍需保留原 <img src="..."> 标签——唯一作用就是等资源就位后立刻显示，别指望它“自动生效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
