利用预取加快下一页导航速度

什么是预取？

通过预先获取用户可能访问的下一个页面（或下一个页面的资源集），可以加快网页加载速度。我们称之为预取。在某些情况下，预取可以使后续的页面导航看起来像是瞬间加载完成。

现代预取可以通过多种方式实现。最常见的是使用浏览器的资源提示（Resource Hint），它通过 HTML 以声明式的方式工作。<link rel=prefetch>

<!-- HTML -->
<link rel="prefetch" href="/pages/next-page.html">
<link rel="prefetch" href="/js/chat-widget.js">

或者 HTTP 标头：

Link: </js/chat-widget.js>; rel=prefetch

Webpack 也支持预取（参见Webpack 中的 prefetch/preload）。

<!-- Without prefetching -->
import("ChatWidget");

<!-- With prefetching -->
import(/* webpackPrefetch: true */ "ChatWidget");

Webpack 运行时会在父代码块加载完成后，将正确的预取语句注入到页面中。在上述示例中，<link rel="prefetch" href="chat-widget.js">.

根据CanIUse 的说法，<link rel=prefetch>它具有不错的跨浏览器支持。

如果 Chrome 浏览器中使用 `--prefetch` 参数预取了某个资源<link rel=prefetch>，该资源将以低优先级加载并保留5 分钟。此过程持续到资源被使用完毕，届时将应用该资源的正常缓存控制规则。

不确定您网站上的哪些页面值得预取？不妨试试我们这款实验性的辅助工具，它会根据您的分析数据，为您推荐“最热门的下一页”：

“预取”通常也可以使用Service Workers [参见注册期间的预取]/fetch() 或 XHR来实现。但请注意，并非所有这些机制都像<link rel=prefetch>.

现在还有谁在使用预取功能？

你可能听说过一些品牌在生产环境中使用预取技术：

• Netflix会提前预取后续导航所需的 JavaScript 包。
• IndieGogo会预先加载 Stripe 的 JavaScript 库，以便在后续页面上进行信用卡处理。
• Craigslist会预先加载其 JS 包以用于搜索结果页面。
• 喜力啤酒可能会在出生日期验证页面之后预取 JS 和 CSS 包页面。

预取面临哪些挑战？

当用户使用受限的网络连接或有限的数据流量时，每一字节都至关重要。虽然对于网络连接良好的用户来说，提前预加载一些页面是合理的，但对于网络状况不佳的用户来说，则需要格外注意。毕竟，谁也不想浪费任何人的数据流量。

您可以使用navigator.connection.effectiveType API（NetInfo 的一部分）仅在用户处于有效的 4G 连接时才预取页面。

使用预取功能时需要注意的一点是，如果导航开始时请求尚未完成，则正在进行的预取请求将被取消。这可能会造成数据浪费，因此在使用此功能时，务必确保用户能够真正从预取的数据中获得价值。

案例研究

当日本出版商日经新闻确信用户会浏览到特定页面时，他们并没有等待用户进行浏览。

他们利用预<link rel=prefetch>取技术在用户点击链接前预先加载下一页。下图展示了等待网络和服务器开销加载页面（总共约 880 毫秒）的影响。相比之下，预取几乎没有请求开销，页面可以立即跳转（约 37 毫秒）。

有关日经指数的更多信息，请参阅这篇最新的案例研究。

什么是预测性预取？

使用预取功能的网站通常能够准确预测用户将要访问的顶级页面或资源，并可以手动添加<link rel=prefetch>标签。然而，对于规模庞大的网站来说，这种手动操作会变得难以实现。一旦页面层级深入，就很难确定“最佳”的下一页是什么，也很难在不手动操作的情况下实现这一点。

预测性预取利用额外数据（例如分析数据）来预测用户在给定网站 URL 的情况下可能访问的文档。然后，这些数据可以用于优化<link rel=prefetch>这些页面，从而缩短后续页面的加载时间。此外，还可以选择使用机器学习来改进预测结果，确保只提前获取访问概率最高的页面。

虽然这里没有专门介绍这方面的内容，但 Google Analytics 的报告 API包含的信息足以构建网站的预测性预取功能。Minko Gechev、Katie Hempenius 和我最近利用这一点开发了一个名为Guess.js的项目，该项目提供了以下解决方案：1）预测性预取相关页面；2）预测性地打包并预取这些页面可能需要的正确 JavaScript 资源（通过 webpack）。

哪里可以了解更多关于预测性预取的信息？

如果您有兴趣了解更多，可以阅读里克·维斯科米与凯蒂·亨佩纽斯和我深入探讨的这个话题：

我们将继续探索在网络上发展预取技术的各种机会。最近，我们探索了使用签名交换（Signed Exchanges，新兴网络打包规范的一个子集）来实现保护隐私的预取技术。

PS：敬请关注quicklink——一个我即将发布的小于 1KB 的库，它旨在通过在空闲时间预取视口内的链接来实现更快的下一页导航 :)

感谢 Yoav Weiss 为我们提供<link rel=prefetch>关于 Chrome 底层工作原理的宝贵意见。