资源提示(Resource hints) 是 <link> 标签,告诉浏览器提前获取或连接资源,从而优化加载性能。每一个都针对不同的时间/优先级需求。
html
preload — "我在当前页面需要这个资源,现在以高优先级获取。" 用于 parser 晚期发现的关键资源:字体、hero 图像、CSS 引用的资源。需要 as 属性,以便浏览器设置正确的优先级/请求头。
preconnect — "我很快会连接到这个源;现在进行 DNS 查询 + TCP + TLS 握手。" 在对第三方(API、字体主机、CDN)发起首个请求前节省往返时间。用于少数几个关键源。
dns-prefetch — preconnect 的轻量版本:仅做 DNS 解析。好的降级方案/用于多个源。
prefetch — "我可能需要在下一次导航时用这个资源;空闲时以低优先级获取。" 用于可能的下一个页面/资源。缓存供未来使用,不是当前页面。
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
字体被发现得较晚(浏览器必须先解析 CSS),所以预加载它们可以避免不可见文本的延迟。
预加载所有内容会失去意义 — 它会与真正的关键资源竞争带宽。只提示最重要的那几个。
资源提示从关键路径削减延迟:preconnect 消除了第三方的握手延迟,preload 优先处理晚期发现的关键资源(字体、LCP 图像),prefetch 让下一次导航感觉瞬间完成。
精准使用时,它们会显著改进 Core Web Vitals。