标准答案
- preload、prefetch、preconnect、dns-prefetch 都是资源提示，但它们解决的是不同阶段的问题。
- preload 用来提前加载当前页面马上会用到的关键资源，比如首屏字体、首屏大图、关键 CSS 或关键脚本。
- prefetch 面向未来导航，适合在浏览器空闲时提前拉取下一页可能用到的资源，不适合当前首屏关键路径。
- preconnect 是提前建立跨域连接，包括 DNS、TCP 和 TLS；dns-prefetch 只提前做 DNS 解析，成本更低。
- 这些提示不是越多越好。preload 会抢带宽，preconnect 会占连接资源，是否使用要看瀑布图、LCP 和跨域连接耗时。
题目解析
- preload：适合首屏字体、首屏大图、关键 CSS 或关键脚本，但必须真的会被当前页面使用。
- prefetch：适合下一页路由资源，不适合当前首屏关键资源。
- preconnect：适合重要跨域源，例如 CDN、字体域名、接口域名，但数量要少。
- dns-prefetch：适合较低优先级跨域源，只做域名解析准备。
preload 会提高资源优先级，滥用会挤占真正关键资源的带宽。preconnect 会占用连接资源，跨域源太多会浪费浏览器并发和移动端电量。
判断是否该加资源提示，要看瀑布图和核心指标，而不是看到资源慢就全部 preload。
代码示例
关键字体可以 preload，重要跨域 CDN 可以 preconnect。
HTML
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="preload" href="/fonts/site.woff2" as="font" type="font/woff2" crossorigin>
<link rel="prefetch" href="/assets/next-page.js" as="script">常见误区
- 把未来页面资源写成 preload，导致当前页面带宽被抢。
- preload 字体忘记 crossorigin，浏览器可能重复下载。
- 对几十个域名都 preconnect，连接成本超过收益。