link rel="preload"是唯一真正预加载的原生方案，必须写在最前、指定as="image"、用静态路径，仅适用于首屏立即显示的关键图片，不执行也不触发事件。
link rel="preload" 是唯一真正算“预加载”的原生方案，其他方式要么是伪预加载、要么是懒加载反向操作。编辑器本身不参与预加载逻辑，它只负责输出符合规范的 HTML 或 JS 代码。
用 link rel="preload" 在
这是最轻量、浏览器支持最好、Lighthouse 能识别的方式，适用于 banner、logo、首屏主图这类你确定“一打开就要立刻显示”的资源。
- 必须写在
最前面，紧贴<meta charset>后，不能动态插入（document.createElement('link')无效） -
as="image"缺一不可 —— 写成as="img"或漏掉，浏览器就当普通 fetch 处理，Priority 显示为 Low，Network 面板 Initiator 是 (Other) -
href必须是静态路径：不能有${name}、url('/assets/${id}.webp')这类模板，也不能靠 JS 变量拼接；相对路径要基于 HTML 文件位置，比如页面在/user/profile.html，那就该写href="/assets/hero.jpg"，不是./assets/hero.jpg - 可加
fetchpriority="high"（Chrome 101+），旧版忽略无副作用；但别和loading="lazy"同时用，逻辑冲突
示例：
<meta charset="utf-8"><link rel="preload" as="image" href="/assets/logo.webp" fetchpriority="high"><link rel="preload" as="image" href="/assets/banner.jpg">
用 new Image() 实现运行时条件预加载
当你需要根据用户行为（比如 hover 某按钮）、设备像素比（window.devicePixelRatio）、或模块加载完成后再触发预加载时，JS 的 Image 对象是唯一可控选择。
- 顺序不能错：先绑定
onload/onerror，再赋值src；否则缓存命中时事件同步触发，回调直接跳过 - 检查
img.complete：如果为true，说明已缓存，需立刻执行成功逻辑，不能等事件 - 避免密集创建：浏览器并发请求数通常 6~8 个，大量预加载建议加队列或限制并发（如每次最多 4 个）
- 别把
new Image().src = url当一行写法用 —— 它无法捕获失败，也没法await
基础封装示例：
const preloadImage = (url) => {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = () => reject(new Error(`Failed to load ${url}`));
img.src = url; // ⚠️ 这行必须在事件绑定之后
});
};
别把 loading="lazy" 或 display: none 当预加载用
这是最常踩的坑：加了 loading="lazy" 的首屏图，Chrome 仍可能等到滚动前 500px 才发请求 —— 和预加载目标完全相反。
-
loading="eager"是默认行为，显式写出来只是“不懒”，不等于“提前” -
decoding="async"只影响解码时机（防主线程卡顿），和下载时机无关 - 用
display: none或opacity: 0的<img>不是预加载：它会占布局、触发渲染流程、增加主线程负担，某些 WebView 下甚至跳过解码 - CSS background 伪预加载（
background: url(...) no-repeat -9999px -9999px）同样无效：图片随页面一起加载，没抢跑，还可能被 Lighthouse 判定为“隐藏但关键资源”扣分
WebP 预加载必须配 fallback，且路径要严格一致
预加载 WebP 后，<img src="/assets/logo.webp"> 要能命中缓存，否则白忙一场。
-
<link rel="preload">的href和最终<img>的src必须完全一致：大小写、斜杠方向、是否带前导/全部要对上 - WebP 不被 Safari 13 前或 IE 支持，所以
<picture></picture>+<source type="image/webp"></source>+<img src="logo.jpg">是标准 fallback；但预加载只应针对你确定会用到的格式（比如 Chrome 用户），不要同时 preload .webp 和 .jpg - 如果用了
srcset，预加载只对其中某一项有效 —— 选最可能被匹配到的那个 URL，别乱写
最容易被忽略的一点：预加载只管“下载进缓存”，不管“何时展示”。它不创建 DOM、不触发 onload、也不自动替换任何 <img> 的 src。你得确保后续真实使用的图片 URL 和 preload 的 URL 字节级一致，否则浏览器照样重新请求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
