html预加载图片是让浏览器提前下载并缓存资源，而非触发渲染；必须写在中且as="image"不可省略，url需与完全一致才能复用缓存。
HTML 预加载图片不是“让浏览器提前显示图”，而是“让浏览器提前下载图并放进缓存”——它不创建 DOM、不触发渲染、也不调用 onload，只抢在 HTML 解析器读到 <img> 标签前就把资源拿下来。
为什么写在
浏览器的 HTML parser 是单线程、自上而下扫描的。只有在 parser 阶段（不是 DOM 构建后，更不是 JS 执行时）遇到 <link rel="preload">，才会立即发起网络请求。一旦 parser 进入 或 JS 开始执行，再动态插入的 link 就被完全忽略——Network 面板里 Initiator 显示为 (Other)，Priority 恒为 Low。
- ✅ 正确位置：紧贴
<meta charset>后，或<title></title>前 - ❌ 错误位置：放在
<link rel="stylesheet">后面、塞进、用document.createElement('link')动态添加 - ⚠️ 服务端模板拼错路径（比如变量未渲染成真实 URL）会导致 404，但浏览器不会报错，只会静默失败
as="image" 为什么不能省略
as 属性不是装饰，它直接决定浏览器如何处理这个请求：
- 没写
as或写成as="img"/as="picture"：浏览器按普通fetch()发起，不带Accept: image/webp,*/*头，不走图片专用缓存分区，Priority 降为 Low - 写了
as="image"：请求头自动带上图片 MIME 协商，命中 CDN 和浏览器图片缓存策略，且支持fetchpriority="high"（Chrome 101+） - ⚠️
srcset、sizes、decoding等属性对<link rel="preload">全无效——它只认静态、确定的单个 URL
预加载完的图怎么真正用上
<link rel="preload"> 只负责“下好”，不负责“放好”。你仍需在页面中正常写 <img src="/assets/hero.webp">，且两个 URL 必须**完全一致**（大小写、斜杠、查询参数都不能差）：
- ✅
href="/assets/hero.webp"+src="/assets/hero.webp"→ 缓存命中，无二次请求 - ❌
href="assets/hero.webp"+src="/assets/hero.webp"→ 路径不同，算两个资源，重复下载 - ❌
href="/assets/hero.webp"+src="/assets/hero.jpg"→ 格式不同，无法复用 - ⚠️ WebP 预加载必须配 fallback：如果最终
<img>用<picture></picture>切格式，preload 只能针对你确定会用到的那个格式（比如 Chrome 用户大概率走 WebP），其他格式靠自然加载
最容易被忽略的一点：预加载不是万能加速键。如果 preload 的图根本不在首屏渲染链里（比如藏在 display: none 的模块里，或依赖 JS 才显示），它反而会抢占带宽，拖慢真正关键资源的下载。是否预加载，得看它是不是 LCP 候选元素，而不是“我觉得它重要”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
