<link rel="preload">必须写在<head>内且越靠前越好；动态插入无效；关键参数仅href、as、crossorigin；href须静态路径；as值错误（如字体漏crossorigin、CSS填错as）会导致静默失效；仅对首屏立即需要的资源使用，避免滥用。
怎么在里写对 link rel="preload"
必须写在 <head> 里，且越靠前越好；浏览器只在 HTML 解析初期识别它，动态插入（比如 JS 创建 link 后 append）基本无效。常见错误是把它塞在 <body> 末尾，或者等 JS 执行完才加——这时 preload 已被忽略。
关键参数只有三个：href、as、必要时加 crossorigin。其他如 type、fetchpriority 是可选增强，不填也不报错，但填错会直接失效。
-
href必须是静态路径，不能含 JS 变量或模板字符串（例如href="/js/app.${hash}.js"会失败） -
as不是提示，是强制声明：填as="script"，浏览器才进 script cache；填错如as="javascript"，标签被静默丢弃 - 字体必须加
crossorigin，哪怕同域——漏了 Safari 和 Chrome 都不加载
哪些资源该用 preload，哪些不该
只对「当前页面首屏立刻需要、且后续 HTML/CSS/JS 确实会用到」的资源用。不是所有 JS 或 CSS 都适合——预加载会抢占带宽，反而拖慢真正关键的渲染流程。
- ✅ 推荐：
/fonts/inter.woff2（首屏文字依赖）、/js/app.xxx.js（主入口脚本）、/images/hero.webp（首屏大图） - ❌ 慎用：
chunk-vendors.xxx.js（通常非首屏必需）、print.css（媒体不匹配）、懒加载模块的 JS（浏览器无法静态分析，preload 白发） - ⚠️ 特别注意：不要对
rel="stylesheet"的 CSS 再preload as="style"——可能触发二次解析，改用media="print" onload="this.media='all'"更稳妥
as 值填错的典型表现和修复
填错 as 是最隐蔽的坑：控制台没报错，Network 面板里请求状态可能是 Pending 或直接消失，DevTools 的 Initiator 列显示为 (Other) 而非 Parser，说明浏览器根本没当 preload 处理。
立即学习“前端免费学习笔记（深入）”；
- CSS 文件 → 必须
as="style"（不是"stylesheet"） - 字体（WOFF2/WOFF）→
as="font"+crossorigin，缺一不可 - JS 脚本 →
as="script"；模块脚本也用这个，不用type="module"配合 - 图片 →
as="image"；as="img"或as="picture"全部无效 - JSON 接口数据 →
as="fetch"，且响应需带Access-Control-Allow-Origin（否则预加载失败）
验证 preload 是否真生效
别信代码写了就有效。打开 Chrome DevTools → Network → 刷新页面 → 找对应资源，看三件事：
- Initiator 列是否为
Parser（不是Script或(Other)） - Timing 标签页里
Start Time是否明显早于同页面其他资源（尤其早于DOMContentLoaded） - Preview/Response 标签页能否看到内容（排除 404、重定向、缓存头
no-store导致预加载结果无法复用）
如果资源返回 404 或服务端没配 Accept-Ranges: bytes（视频场景），preload 请求就算发出去了，浏览器也不会把结果用于后续真实请求——等于白干。
