preload 是浏览器提示机制，用于提前加载当前页关键资源以优化lcp等指标；必须置于中、带正确as值及必要属性（如font需crossorigin），否则被忽略。
什么是 Resource-hints 中的 preload？
preload 是一种浏览器提示机制，告诉它“这个资源我马上就要用”，让浏览器提前发起请求、解析甚至执行，避免渲染阻塞。它不是强制加载，也不改变资源加载优先级逻辑本身，而是把原本靠 HTML 解析顺序触发的下载，提前到 HTML parser 阶段甚至更早。
常见错误现象：font-display: swap 仍出现 FOIT（闪白），critical CSS 加载完后才开始拉取首屏图片，LCP 指标卡在图片上——这些往往不是资源没写对，而是没用 preload 把关键路径“提”上来。
- 只对当前页面明确需要的资源生效，不跨页缓存复用
- 必须配合
as属性，否则浏览器无法判断资源类型，会降级为低优先级 fetch - 不能用于跨域未带
access-Control-Allow-Origin的资源（比如字体、脚本），否则预加载会失败且无提示
preload 的 as 值怎么选？
as 不是可选项，是决定预加载是否生效的关键参数。浏览器靠它判断资源类型、设置正确 MIME 类型、分配合理优先级和 CORS 策略。填错就等于没写。
典型使用场景：首屏大图、WebFont、关键 js/CSS、fetch() 用到的 json 接口。
-
as="image"→ 适用于<img alt="元信息中的resource-hints标签如何用_预加载资源的链接设定方法【步骤】" >对应的 src 或背景图 URL；注意：CSS 中的url()无法被preload覆盖，得用link[rel=preload][as=image]单独声明 -
as="font"→ 必须加crossorigin，哪怕字体同源；否则浏览器拒绝预加载（静默失败） -
as="script"或as="style"→ 仅适用于异步或非阻塞关键资源，比如defer脚本的依赖模块 -
as="fetch"→ 用于fetch()请求的 API 地址，需配crossorigin（若跨域）和type="application/json"（可选，帮助预解析）
怎么写才不会被浏览器忽略？
很多 preload 标签写了但 DevTools Network 里看不到请求，不是浏览器 bug，是规则没对上。
最容易踩的坑集中在三处：位置、属性缺失、路径错误。
- 必须放在
内，越靠前越好；放在或 JS 动态插入，多数浏览器直接跳过 -
href值必须是绝对路径或根相对路径（如/fonts/inter.woff2），不能是文档相对路径（如../fonts/inter.woff2），否则解析失败 - 没有
as，或者as值拼错（比如写成font而非font—— 实际没错，但常有人写fonts或woff2） - http/2 Server Push 已废弃，别再和
preload混用；两者逻辑冲突，Push 可能覆盖甚至取消 preload 请求
预加载字体时 crossorigin 为什么非加不可？
浏览器对字体资源有严格隔离策略：即使同源，只要没显式声明 crossorigin，就按“匿名跨域”处理，而 preload 阶段不支持匿名跨域字体加载。结果就是控制台没报错，Network 里没请求，字体照常 fallback。
这不是兼容性问题，是 Chromium/firefox 的统一行为，safari 也已对齐。
- 写法必须是
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>（crossorigin是布尔属性，不用赋值） -
type属性虽非必需，但加上能帮浏览器跳过 MIME 探测，尤其对未配好服务器Content-Type的字体文件很关键 - 如果字体文件实际返回了
Access-Control-Allow-Origin: *，但标签漏了crossorigin，照样不加载
复杂点在于：同一字体多个格式（woff2/woff）要分别 preload，且每个都得带 crossorigin；漏一个，那个格式就回退到自然加载节奏。这事容易被忽略，因为视觉上看不出差别，但 LCP 和字体渲染时间会悄悄变差。