企业官网建设流程全解析

性能优化预取浏览器缓存什么是预取（Prefetch）？

预取（Prefetch）指的是在后台推测性地（speculatively）获取文档或子资源（subresources）的做法，这些资源对应的是用户很可能在不久的将来会导航到的页面。如果用户确实选择了访问这些页面，这种做法可以显著减少预取页面的加载时间。

例如，预取可以用于获取“下一页（Next）”按钮所链接的页面或其子资源，也可以用于获取用户鼠标悬停时弹出的链接（link popup），或者搜索结果页面。通过提前将这些资源放入浏览器缓存，当用户真正点击时，资源已经就绪，从而大幅缩短等待时间。

预取的实际应用场景

预取的核心思想是“用带宽换时间”。在用户尚未明确点击之前，浏览器就利用空闲时间下载资源。常见的应用场景包括：

• 分页浏览：在阅读文章列表时，提前预取下一页的内容，让翻页体验更流畅。
• 悬停链接：当用户鼠标悬停在一个链接上时，预取该链接指向的页面，减少点击后的等待。
• 搜索结果：预取搜索结果中排名靠前的几个页面，让用户点击后能立即看到内容。

需要注意的是，预取与预连接（preconnect）和预渲染（prerender）不同。预取只负责下载资源（如 HTML、CSS、JavaScript 文件），而不会执行页面脚本或渲染页面。预渲染则更进一步，会在后台完全渲染页面，但消耗的资源也更大。

如何实现预取

在 Web 开发中，最常用的预取方式是通过<link>标签的rel="prefetch"属性来声明。例如：

<link rel="prefetch" href="/next-page.html">

这段代码告诉浏览器，在空闲时间可以提前下载/next-page.html这个文档。对于子资源（如图片、脚本），也可以使用同样的方式：

<link rel="prefetch" href="/images/hero.jpg">

此外，开发者还可以通过 JavaScript 的fetch()API 或XMLHttpRequest手动触发预取，但使用<link>标签更简洁，且能更好地利用浏览器的调度机制。

预取的注意事项

预取虽然能提升性能，但并非没有代价。它会消耗用户的带宽和流量，尤其是在移动网络环境下。因此，开发者应谨慎使用，只预取那些用户真正可能访问的页面，避免过度预取导致资源浪费。同时，预取请求会携带 Cookie，因此对于需要认证的页面，预取可能会带来额外的安全考量。

总之，预取是一种“用空间（带宽）换时间”的优化策略，适合用于用户行为可预测的场景，如分页、轮播图、表单提交后的跳转等。合理使用预取，能显著提升用户体验。

译文来源：MDN Prefetch（CC BY-SA 2.5 (MDN)），由本人翻译整理，转载请注明出处。