preload、prefetch、preconnect 和 dns-prefetch 有什么区别？
简化版
preload 是当前页面马上要用的关键资源预加载，prefetch 是未来页面可能用的低优先级预取，preconnect 是提前建立连接，dns-prefetch 只提前解析 DNS。它们都是资源提示，但目的、优先级和误用成本不同。
详细版
区别：
preload：当前页面关键资源，例如首屏字体、关键图片、延迟发现的 JS。prefetch：未来导航可能用的资源，例如下一页脚本。preconnect：提前完成 DNS、TCP、TLS，适合确定会访问的跨域源。dns-prefetch：只提前 DNS 解析，成本低但收益也有限。
注意点：
preload必须资源真的会用，否则浪费带宽。as属性要写对，影响优先级和缓存复用。- 跨域字体等资源要处理
crossorigin。 prefetch不适合首屏关键资源。- 连接提示不要滥用，过多预连接会占连接资源。
完整版教学
一、资源提示解决的是“浏览器发现太晚”
浏览器通常要先解析 HTML，再发现 CSS、JS、图片、字体等资源。有些资源藏得很深：CSS 里引用字体、JS 执行后才创建图片、路由切换后才发现下一页资源。资源提示就是开发者提前告诉浏览器：“这个东西等下要用，可以先准备。”
但提示不是命令，浏览器会结合网络、优先级、缓存和设备情况决定如何执行。正确使用能缩短关键路径，误用则会抢占带宽。
HTML 解析 → 发现资源 → 建连接 → 下载 → 使用
资源提示：把“发现/连接/下载”的部分提前二、preload 面向当前页面关键资源
preload 的语气最强，表示当前页面很快就要用这个资源。它适合首屏关键字体、关键 CSS、LCP 图片或被 JS 动态加载但首屏必须用的资源。它不应该用于“也许会用”的东西。
数字例子：首屏大图本来要等 JS 执行后 800ms 才被发现，下载需要 600ms，则图片可见可能在 1400ms 后。若用 preload 让它在 100ms 时开始下载，理论上可把 LCP 提前数百毫秒。
<link rel="preload" href="/hero.webp" as="image">
<link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin>三、prefetch 面向未来页面
prefetch 优先级较低，通常用于用户接下来可能访问的资源。例如用户在列表页停留时，预取详情页路由 JS；或者在登录成功前预取首页数据框架。它不适合当前首屏，否则会因为优先级低而不及时。
可以把它理解为“闲的时候帮我拿一下”。如果用户真的跳转，资源已在缓存里；如果用户不跳转，最多浪费一点空闲带宽。移动弱网下要更谨慎，避免预取大资源。
四、preconnect 和 dns-prefetch 是提前建路
跨域请求通常要经历 DNS、TCP、TLS。preconnect 可以提前完成这些步骤，适合确定会访问的关键第三方源，例如 CDN、接口域名、字体域名。dns-prefetch 只解析域名，成本更低，收益也更小。
假设 DNS 30ms、TCP 80ms、TLS 120ms，连接建立就要 230ms。如果页面关键资源来自第三方 CDN，提前 preconnect 可以把这段时间从关键路径里挪走。
| 提示 | 提前做什么 | 成本 | 适合 |
|---|---|---|---|
| dns-prefetch | DNS | 低 | 可能访问的域名 |
| preconnect | DNS + TCP + TLS | 中 | 确定访问的关键域名 |
| preload | 当前资源下载 | 高 | 当前页关键资源 |
| prefetch | 未来资源下载 | 低优先级 | 下一页可能资源 |
五、as 和 crossorigin 写错会降低效果
preload 的 as 告诉浏览器资源类型，影响优先级、CSP、缓存复用和请求头。如果字体资源没写 crossorigin，可能导致预加载和实际使用发起两次请求。图片写错类型也可能让优先级不符合预期。
因此 preload 不是“加一行 link 就完事”。要检查 Network 面板里资源是否复用、是否重复下载、优先级是否符合预期。
六、滥用会抢占关键资源
资源提示的风险是抢带宽。首页本来 CSS 和主 JS 最关键，你却 preload 了 5 张轮播图、prefetch 了 3 个未来页面包，弱网用户可能更慢。性能优化不是越早下载越好，而是让关键资源优先。
一个简单原则：首屏必须用且发现晚，用 preload；未来可能用，用 prefetch；确定跨域源很快要连，用 preconnect；只是可能访问域名，用 dns-prefetch。
记忆钩子：preload 是“现在要”，prefetch 是“以后也许要”，preconnect 是“先把路修好”，dns-prefetch 是“先查门牌号”。
七、常见误区与追问
- 误区：preload 可以随便加，越多越快。 preload 优先级高，滥用会抢占真正关键资源。
- 误区：prefetch 可以优化当前首屏。 prefetch 面向未来资源，当前关键资源应考虑 preload。
- 误区：preconnect 没成本。 它会占连接和系统资源，只适合确定要访问的关键源。
- 追问：字体 preload 为什么可能下载两次？ 常见原因是缺少
crossorigin或实际请求属性不一致。 - 追问：怎么验证资源提示有效？ 看 Network 的开始时间、优先级、是否命中缓存和是否重复请求。
- 追问：移动端弱网怎么用 prefetch？ 谨慎预取大资源，可结合网络状态、用户意图和空闲时机。
八、加强记忆
资源提示用“现在资源、未来资源、提前连线、提前解析”四格记。preload 抢当前关键路径，prefetch 利用空闲准备未来，preconnect 提前建跨域连接，dns-prefetch 只做 DNS。优化前先找关键路径，优化后用 Network 面板验证，别把提示写成带宽抢劫。