English
devexamples
← 中文资源

简体中文版本

用资源提示预取关键资源

为下一次可能的导航使用 preconnect 与 prefetch 提示，使关键资源在被请求前就已到达。

阅读英文原文

目标

点击后才开始建连与下载，使导航感觉缓慢。本配方在头部为下一步会用到的第三方源添加 preconnect/dns-prefetch，并预取下一个页面的文档，让 DNS、TLS 与下载在空闲时提前完成；提醒提示越多竞争带宽越多，只应对真正关键的源与页面使用。

步骤要点

  1. 为下一步会用到的源添加 preconnect。
  2. 预取下一个页面的文档资源。
  3. 只对真正关键的源与页面加提示。
  4. 用测量确认建连与起播时间下降。
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="preconnect" href="https://fonts.example.com" crossorigin>
<link rel="dns-prefetch" href="//analytics.example.com">

排错提示

  • 过多提示会浪费带宽。
  • 未被使用的预连接会被丢弃。
  • prefetch 不考虑用户流量成本。

适用边界

  • 提示是尽力而为。
  • 过度提示反而拖慢。