性能优化预取浏览器缓存什么是预取Prefetch预取Prefetch指的是在后台推测性地speculatively获取文档或子资源subresources的做法这些资源对应的是用户很可能在不久的将来会导航到的页面。如果用户确实选择了访问这些页面这种做法可以显著减少预取页面的加载时间。例如预取可以用于获取“下一页Next”按钮所链接的页面或其子资源也可以用于获取用户鼠标悬停时弹出的链接link popup或者搜索结果页面。通过提前将这些资源放入浏览器缓存当用户真正点击时资源已经就绪从而大幅缩短等待时间。预取的实际应用场景预取的核心思想是“用带宽换时间”。在用户尚未明确点击之前浏览器就利用空闲时间下载资源。常见的应用场景包括分页浏览在阅读文章列表时提前预取下一页的内容让翻页体验更流畅。悬停链接当用户鼠标悬停在一个链接上时预取该链接指向的页面减少点击后的等待。搜索结果预取搜索结果中排名靠前的几个页面让用户点击后能立即看到内容。需要注意的是预取与预连接preconnect和预渲染prerender不同。预取只负责下载资源如 HTML、CSS、JavaScript 文件而不会执行页面脚本或渲染页面。预渲染则更进一步会在后台完全渲染页面但消耗的资源也更大。如何实现预取在 Web 开发中最常用的预取方式是通过link标签的relprefetch属性来声明。例如link relprefetch href/next-page.html这段代码告诉浏览器在空闲时间可以提前下载/next-page.html这个文档。对于子资源如图片、脚本也可以使用同样的方式link relprefetch href/images/hero.jpg此外开发者还可以通过 JavaScript 的fetch()API 或XMLHttpRequest手动触发预取但使用link标签更简洁且能更好地利用浏览器的调度机制。预取的注意事项预取虽然能提升性能但并非没有代价。它会消耗用户的带宽和流量尤其是在移动网络环境下。因此开发者应谨慎使用只预取那些用户真正可能访问的页面避免过度预取导致资源浪费。同时预取请求会携带 Cookie因此对于需要认证的页面预取可能会带来额外的安全考量。总之预取是一种“用空间带宽换时间”的优化策略适合用于用户行为可预测的场景如分页、轮播图、表单提交后的跳转等。合理使用预取能显著提升用户体验。译文来源MDN PrefetchCC BY-SA 2.5 (MDN)由本人翻译整理转载请注明出处。