preload、prefetch、preconnect 有什么区别？

详细解析#

几种资源提示#

这些提示都写成 <link rel="..."> 标签，也可以通过 HTTP 的 Link 响应头下发。

• dns-prefetch：只提前完成 DNS 解析，开销很小
• preconnect：提前完成 DNS 解析、TCP 握手和 TLS 握手，适合马上就会请求的第三方源（字体、CDN、接口）。数量不宜多，建立的连接如果一段时间不用会被关闭
• preload：让浏览器尽早发现并下载当前页面马上要用的关键资源，只下载、不执行
  • 必须写 as 属性（style、script、font、image 等），浏览器据此确定优先级和请求方式；缺了或写错，可能导致资源被重复下载
  • 预加载字体还要加 crossorigin，因为字体总是以 CORS 方式请求
  • 资源在页面加载后几秒内没有被使用，Chrome 控制台会给出警告，等于浪费了带宽
• prefetch：在浏览器空闲时以最低优先级下载"下一个页面可能会用到"的资源，放进 HTTP 缓存
• modulepreload：专门用来预加载 ES 模块，下载后还会提前解析

<!-- 马上要用的第三方源：提前建立连接；字体以 CORS 方式请求，要加 crossorigin -->
<link rel="preconnect" href="https://fonts.example.com" crossorigin>
<!-- 可能用到的第三方域名：只做 DNS 解析 -->
<link rel="dns-prefetch" href="https://analytics.example.com">

<!-- 当前页面的关键资源：首屏字体 -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
<!-- LCP 图片写在 CSS 背景里，HTML 解析时发现不了，需要 preload -->
<link rel="preload" href="/img/hero.webp" as="image" fetchpriority="high">

<!-- 下一个页面可能用到的资源 -->
<link rel="prefetch" href="/assets/detail.js">

同样的提示也可以写在响应头里：

Link: </fonts/main.woff2>; rel=preload; as=font; type="font/woff2"; crossorigin

对比#

fetchpriority#

fetchpriority 属性可以调整单个资源的加载优先级，取值 high、low、auto，可以用在 <img>、<link>、<script> 等元素上。常见用法是给 LCP 图片加 fetchpriority="high"，给轮播图里暂时看不到的图片加 fetchpriority="low"。

preload 解决的是资源"发现得晚"，本身不提高优先级；fetchpriority 解决的是"优先级不对"。两者可以配合使用，比如上面 LCP 图片的 preload 就加了 fetchpriority="high"。

构建工具中的用法#

webpack 可以在动态 import() 中用魔法注释生成资源提示：

button.addEventListener('click', async () => {
  // 父代码块加载完后插入 prefetch，空闲时提前下载；用户点击时通常可以直接用上缓存
  const { openLoginModal } = await import(/* webpackPrefetch: true */ './login-modal.js')
  openLoginModal()
})

// webpackPreload：和父代码块并行加载，用于当前页面马上要用的模块
import(/* webpackPreload: true */ './chart.js')

Vite 不需要手动配置：构建时会为入口依赖的代码块生成 modulepreload，执行动态导入时也会并行预加载它依赖的公共代码块。

面试官可能追问#

<script type="speculationrules">
{
  "prerender": [
    { "source": "document", "where": { "href_matches": "/product/*" }, "eagerness": "moderate" }
  ]
}
</script>

易错点#

• preload 字体时忘了加 crossorigin，字体会被下载两次
• preload 不是越多越好，只预加载当前页面马上要用的少数关键资源，否则会互相抢占带宽
• preconnect 只建立连接、不下载资源，而且闲置一段时间后连接会被关闭，只给马上要用的少数几个源使用