preload、prefetch 和 preconnect 等资源提示是什么？

每个提示的作用

• preload — "我在当前页面需要这个资源，现在以高优先级获取。" 用于 parser 晚期发现的关键资源：字体、hero 图像、CSS 引用的资源。需要 as 属性，以便浏览器设置正确的优先级/请求头。

• preconnect — "我很快会连接到这个源；现在进行 DNS 查询 + TCP + TLS 握手。" 在对第三方（API、字体主机、CDN）发起首个请求前节省往返时间。用于少数几个关键源。

• dns-prefetch — preconnect 的轻量版本：仅做 DNS 解析。好的降级方案/用于多个源。

• prefetch — "我可能需要在下一次导航时用这个资源；空闲时以低优先级获取。" 用于可能的下一个页面/资源。缓存供未来使用，不是当前页面。

一个常见的实例：字体

字体被发现得较晚（浏览器必须先解析 CSS），所以预加载它们可以避免不可见文本的延迟。

注意：不要过度提示

预加载所有内容会失去意义 — 它会与真正的关键资源竞争带宽。只提示最重要的那几个。

为什么这很重要

资源提示从关键路径削减延迟：preconnect 消除了第三方的握手延迟，preload 优先处理晚期发现的关键资源（字体、LCP 图像），prefetch 让下一次导航感觉瞬间完成。

精准使用时，它们会显著改进 Core Web Vitals。