什么是prefetching？

通过提前加载用户可能访问的下一个页面（）可以加速web页面加载速度，我们称之为prefetching。在某些情况下，这可以让接下来的导航交互立即加载。

现在化的prefetching可以使用很多种方式实现。通常使用浏览器的<link rel=prefetch>Resource Hint来完成，它是通过HTML声明性工作…

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

或通过一个HTTP header：Link: </js/chat-widget.js>; rel=prefetch。

Webpack也支持prefetching（详见Webpack中的prefetch/preload）：

<!-- 没有prefetching -->
import("ChatWidget");

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

一旦页面父级chunk加载完成，Webpack的运行时将在该页面中注入正确的预获取生命。在上面的例子中，<link rel="prefetch" href="chat-widget.js">。

每个CanIUse特性，<link rel=prefetch>有相当好的跨浏览器的支持。

如果Chrome中的一个资源使用<link ref="prefetch">来预加载，它将被以一个低优先级加载，并且会被保留五分钟。这将持续直到资源被使用，在这一点上，资源正常的cache-control规则将会应用。

不确定你网站的哪些页面值得考虑使用prefetching？看一下我们为建议的“最佳下一页”（基于你的分析）准备的实验性帮助工具：

“Prefetching”几乎还可以使用Service Workers来实现（详见prefetching during registration）fetch()或XHR。但请注意，不是所有这些机制都有相同的<link rel=prefetch>这样的“低优先级”fetch行为。

今天谁还在使用prefetching？

你可能已经知道的几个在生产环境中使用prefetching的品牌：

• Netflix需要提前时间为接下来的导航预加载JavaScript包
• IndieGogo在未页面中的信用卡处理预加载Stripe的JavaScript库
• Craigslist在搜索结果页预加载他们的JS包
• Heineken在出生日期校验页面预加载可能需要的JS和CSS块页面

prefetching的挑战有哪些？

当用户处在一个受限网络连接或一个限制的流量套餐中，每个字节都应该考虑进去。为哪些有强WiFi连接的用户提前预加载很多个页面，是很有帮助的，但还是要考虑那些网络情况不好的情况。你肯定不想浪费任何人的流量套餐。

你可以使用navigator.connection.effectiveTypeAPI（NetInfo中的部分），只有当用户处在一个有效的4G连接事才预加载页面。

使用prefetch还需要注意的一个事情是，如果在一个导航被启动的时候，预加载的请求还没有结束，已经发出去的预加载请求会被取消。这以为着流浪的浪费，所以要确保在使用这个功能时，用户真的可能体验到它的价值。

实例学习

当日本出版公司Nikkei确信用户将导航至特殊的页面，用户迫不及待地想要看到页面显示。

他们使用<link rel=prefetch>在用户点击链接之前就预加载了下一页。下面我们可以看到等待网络和服务器上面传递一个页面（耗时~880ms）。与prefetching相比，几乎没有进行中的请求，且页面立即切换完成（~37ms）。

更多关于Nikkei的最近的学习实例可以在这里看到。

什么是预测性的prefetching？

通常，使用prefetching的网站对于哪个高级别的页面或资源是用户将要访问的有很好的想法，可以手动给她们添加<link rel=prefetch>标签。这种手动添加的过程，对于大型网站来说，实现的难度会随网站变大变得更难。只要你经历了多个层级的深入，会很难分辨出什么是“最好”的下一页，也不能用非手写的方式来操作。

预测性prefetching使用额外的数据（比如：分析学）来预测哪个文档的用户倾向于访问网站上给定的任何URL。这些数据可以用于<link rel=prefetch>那些页面，提升随后页面的加载时间。随意地使用机器学习来提升这些预测，确保被访问的最高更改的页面被提前预加载。

尽管这里没有具体的细节，Google Analytics有一个Reporting API刚好能提供足够的信息来为网站构建预测性的prefetching。我和Minko Gechev，Katie Hempenius利用这个特性构建了一个项目，叫做Guess.js，它对以下两点提供解决方案：

1. 为对应页面提供预测性的prefetching
2. 为那些页面预测性地构建和预加载可能需要的正确的JavaScript资源（通过webpack）

我可以在哪里学到更多关于预测性prefetching的内容？

我和Rick Viscomi及Katie Hempenius关于这个话题做了深入的探讨，如果有兴趣，请访问这个视频（需要搭梯子访问）。

我们打算继续探索在web上发展prefetching的机会和可能。最近，我们已经探索了使用Sined Exchange的隐私保护，是一个新兴的网络包规范的子集。

PS：留意快速链接 - 我正在发布的一个小于1kb的库，致力于在空闲时间使用prefetching预加载视图内的链接来开启更快的下一页导航：）。

感谢Yoav Weiss关于<link rel=prefetch>是怎么在Chrome屏幕后面工作的的帮助。