preload是高优先级预加载当前页面必用资源，浏览器一解析即发起请求，需准确指定as属性；prefetch是低优先级预取未来页面可能用的资源，仅在空闲时加载，不参与当前渲染。
preload 和 prefetch 不是可互换的“加速开关”，它们触发时机、优先级、适用场景完全不同；混用会导致首屏卡顿或带宽浪费。
preload 是高优先级“马上就要用”，浏览器一解析到就发请求
它解决的是「浏览器发现资源太晚」的问题，比如 CSS 里引用的字体、JS 动态 import 的模块、首屏必须的图片。但前提是：这个资源在当前页面导航中一定会被用到，且默认加载顺序下会延迟渲染。
- 必须写
as属性，且类型要准：as="font"才启用 CORS 检查，as="style"才允许后续<link rel="stylesheet">复用缓存 - 跨域字体必须加
crossorigin，漏掉会导致字体加载失败但无报错，文本直接 FOIT - Chrome DevTools Network 面板里看 Priority 应为
high，如果不是，大概率是as写错或路径 404 - 别对
main.js这类已用defer的入口脚本再preload——属于冗余调度，白占 HTTP/2 流
prefetch 是低优先级“可能下一页用”，空闲时才加载
它不参与当前页面渲染流程，只用于推测性优化，比如用户从首页跳转到商品详情页前，预取 product-detail.js 或评论组件。
- 浏览器只在空闲时（CPU、网络带宽有余）才尝试下载，Priority 显示为
low - 适合用在路由切换频繁的 SPA 中，由构建工具（如 Webpack 的
/* webpackPrefetch: true */）自动注入 - 不能替代
preload解决首屏字体/关键图加载慢的问题；误把prefetch当preload用，首屏可能卡住 - 注意缓存策略：prefetch 资源走常规 HTTP 缓存，若目标资源没设
Cache-Control，下次导航时仍要重下
常见错误现象和验证方法
加了 preload 却没效果？先看这几个点：
- Network 面板里请求的
Initiator列不是preload，而是script或css→ 说明浏览器没走预加载逻辑，可能是as错或路径错 - 字体还是闪、文本空白 → 检查是否漏
crossorigin，以及 CSS 中是否配了font-display: swap或optional -
preload的 JS 在 Coverage 面板里显示“未执行” → 白加，删掉，说明代码路径根本没走到import() - 同一资源写了两个
preload，但as不一致（一个as="style"，一个as="fetch"）→ 浏览器视为不同资源，重复下载
as 属性写错等于没写，而且更危险
as 不只是语义标签，它直接决定浏览器怎么处理这个请求：MIME 类型判断、CORS 策略、缓存复用逻辑、甚至是否允许提前解析。
-
as="font"：强制开启 CORS，且只接受font/woff2等字体 MIME，写成as="font/woff2"会失效 -
as="image"：支持srcset/sizes匹配，否则可能加载错误尺寸的图 -
as="script"：下载后进缓存但不执行，等真正<script src></script>出现时才执行；写成as="fetch"就降为普通请求，Priority 变low -
as="style"：高优先级下载，且后续同 href 的<link rel="stylesheet">会复用该响应体，避免二次请求
最常被忽略的一点：preload 只改变“开始下载时间”，不改变资源体积、服务器响应时间、或执行时机。如果一个字体文件本身要 800ms 才返回，preload 只能把它从“CSS 解析完后才发起”提前到“HTML 解析阶段”，但无法让它变快。真正要压的，是字体子集化、CDN 响应、Brotli 压缩这些底层环节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
