资源提示 Resource Hints
preload、prefetch、preconnect 和 dns-prefetch 等资源提示的作用与使用边界。
#tech / dev / frontend
#type / concept
#status / growing
[!info] related notes
资源提示 Resource Hints
资源提示的本质，是提前告诉浏览器“哪些资源可能重要，你可以更聪明地准备”。
一句话定义
preload、prefetch、preconnect、dns-prefetch 都是在告诉浏览器提前做一部分准备工作，但它们准备的内容和时机并不一样。
四种常见提示
preload
- 提前加载当前页面很快就会用到的关键资源
- 更偏“当前导航马上要用”
prefetch
- 提前拉取未来可能会用到的资源
- 更偏“下一个页面或后续交互也许会用”
preconnect
- 提前建立到目标源的连接准备
- 可能包括 DNS、TCP、TLS 这些准备动作
dns-prefetch
- 只提前做 DNS 解析
- 成本更低，也更轻量
怎么区分更实用
- 当前页面立刻要用的关键文件：先考虑
preload - 未来可能跳转到的资源：先考虑
prefetch - 第三方域名资源很快就要请求：考虑
preconnect - 只是想先把域名解析好：考虑
dns-prefetch
常见误区
- 把
preload当成一切资源都该加的加速按钮 - 把
prefetch误当成当前页面关键资源优化手段 - 忽略资源提示本身也会占用带宽和调度优先级
最短记忆方式
preload 先拿资源，prefetch 先备未来，preconnect 先建连接，dns-prefetch 先查地址。
面试要点
来自 preload-vs-prefetch-vs-preconnect-vs-dns-prefetch-interview-question 的面试视角整理。
一句话回答
preload 是为当前页面关键资源提前加载，prefetch 是为未来可能访问的资源做预取，preconnect 是提前建立到目标源的连接准备，dns-prefetch 则只是提前完成 DNS 解析。
最稳的回答主线
preload：当前就快用到prefetch：以后可能会用到preconnect：先把连接准备好dns-prefetch：先把域名解析好
最短记忆方式
当前资源看 preload，未来资源看 prefetch，连接准备看 preconnect，域名准备看 dns-prefetch。