preload仅适用于当前页面立即需要但浏览器可能延迟发现的关键资源，如首屏字体、核心js（含module入口）、关键css、hero图；必须严格匹配as属性（如as="font"需配crossorigin），且只下载不执行，须配合正常link或script标签才能生效。
preload 适合加载哪些资源
不是所有资源都适合 preload，它只该用于当前页面**立即需要、但浏览器可能延迟发现**的关键资源。比如：首屏用到的 font、script（尤其是 type="module" 的入口）、style（特别是内联前需先加载的 CSS）、image（如 hero 图）。对异步加载的 JS、懒加载图片、非首屏字体，加 preload 反而浪费带宽、抢占 HTTP/2 流。
rel="preload" 必须指定 as 属性
漏掉 as 是最常见错误——浏览器无法判断资源类型，就无法正确设置请求优先级和 CORS 策略，甚至可能被忽略。必须按实际资源类型严格填写：
-
as="font"：配合crossorigin（字体总需跨域） -
as="script"：用于 JS 入口，不执行，只下载 -
as="style"：预加载 CSS，后续仍需<link rel="stylesheet">引入 -
as="image"：支持imagesrcset和imagesizes响应式属性
写成 as="fetch" 或 as="other" 无效；as="document" 不被支持。
preload 不等于执行，别指望它替代 script 或 link
preload 只触发下载，不解析、不执行、不应用。比如预加载一个 JS 文件，它不会自动运行；预加载 CSS，也不会生效——你仍得在 HTML 中保留正常的 <link rel="stylesheet" href="main.css"> 或 <script src="app.js"></script>。否则资源白下，页面照样卡。
常见误用：
- 只写
<link rel="preload" href="app.js" as="script">，删掉了原来的<script></script>标签 → JS 不执行 - 用
preload替代preconnect→ DNS 和 TCP 握手没提前建，关键请求仍阻塞 - 对已通过
import()动态导入的模块重复preload→ 可能触发两次请求（尤其未配crossorigin时）
注意 crossorigin 和 referrer-policy 配合
字体、CDN 上的脚本或样式若跨域，preload 必须带 crossorigin 属性，否则浏览器会以匿名模式发起请求，导致字体加载失败（Failed to decode downloaded font）或 JS/CSS 被拒绝解析。同时，若源站设置了严格的 Referrer-Policy（如 no-referrer-when-downgrade），而预加载请求携带了 referrer，也可能被拦截。
稳妥做法：
- 字体：始终加
crossorigin - 同域资源：可省略
crossorigin - 不确定是否跨域时，加
crossorigin="anonymous"更安全 - 必要时显式设
referrerpolicy="no-referrer"
浏览器对 preload 的容错很低——参数错一点，就静默失效，很难从 Network 面板直接看出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
