目录
我们使用每一个技巧来加速我们的网站：优化图像、CDN、GZIP、缓存，但随着网站变得更加复杂并且页面重量增加，仅对用户交互作出反应性响应是不够的。我们需要积极主动——我们需要预测用户想要什么，甚至在他们提出要求之前为他们准备好内容。
通过资源提示和指令，您可以做到这一点 – 告诉浏览器提前获取页面的资源，以获得更好的实际和可感知的网站性能。这种技术称为预浏览。
在这篇文章中，我们将探讨三个关键的资源提示：预加载、预取和预连接，以及它们的工作原理、优点以及如何使用它们。
什么是预浏览？
Steve Souders 在 2013 年创造了“预浏览”一词。
预浏览就是在用户实际需要之前预测用户操作并在网站上准备他们可能需要的内容。正如 A List Apart 的 Santiago Valdarrama 在他的文章《领先一步：通过预浏览提高性能》中所写，这一概念是迈向更快互联网的一步：
“浏览器已经在幕后工作，在我们的网站中寻找可行方式以尽可能快地进行导航。预浏览的基础是：我们可以将我们在自己页面上获得的洞察力与对用户模式的进一步分析结合起来。通过帮助浏览器做得更好，我们加快并改善了用户的体验。”
您可能会想，“这不是缓存的用途吗？” 嗯，是。浏览器缓存对于页面的快速加载至关重要。但有时缓存需要一些帮助：
- 首次网站访问：用户第一次访问网站时，他们的浏览器尚未缓存任何静态资源。
- 清除浏览器数据：清除浏览器缓存的用户下次访问您的网站时将不再拥有您的资源副本。
- 过期的浏览器数据：根据 HTTP Archive，69% 的资源没有任何缓存标头或可缓存时间少于一天。如果用户重新访问这些页面并且浏览器确定资源已过期，则需要 HTTP 请求来检查更新。即使响应表明缓存的资源仍然有效，这些网络延迟仍然会使页面加载速度更慢，尤其是在移动设备上。
- 旧浏览器数据：即使用户缓存了上次访问的内容，网站也可能已更改或使用新资源进行了更新。
幸运的是，浏览技术可以帮助您解决这些问题。
1. 预加载
您是否曾想在不延迟页面加载事件的情况下告诉浏览器有关重要字体或脚本的信息？
通过preload，您就可以做到这一点。该指令告诉浏览器当前导航需要某个资源，并且应该尽快开始获取该资源。
正如参与该 Web 标准的 Akamai 首席架构师Yoav Weiss所解释的那样：
“[Preload] 为 Web 开发人员提供更精细的加载控制。它使开发人员能够自定义加载逻辑，而不会遭受基于脚本被动加载的资源加载器带来的性能损失。”
当您通过预加载指定需要某个资源时，它会作为优先级下载并存储在浏览器中，等待在 DOM、JavaScript 或 CSS 中引用它。
as 属性告诉浏览器将下载什么类型的资源，以便正确处理。如果没有它，浏览器将不会使用预加载的资源。可能的值包括：
- “字体”
- “脚本”
- “样式”
- “图像”
- “媒体”
- “文档”
<link rel=”preload”> 取代了 <link rel=”subresource”>，根据 Google 的说法，它有明显的错误和缺点。它从未在 Chrome 以外的浏览器中实现。因此，Chrome 50 于 2016 年 3 月取消了对其的支持。
同样重要的是要知道预加载是对浏览器的强制指令。与我们将在本文中看到的其他资源提示不同，预加载是浏览器必须执行的操作，而不是可选的。
Weiss 在 Chrome 中发布之前发布了一份明确的预加载指南。如果有兴趣学习如何有效地使用此资源提示，强烈建议阅读他的指南。
不要忘记预加载对于优化最大内容绘制分数也很有用。
2. 预取
您认为您可以预测用户下一步将点击什么或与之交互吗？
预取资源提示与预加载有些不同。它并不试图让关键的事情更快地发生，相反，它试图让一些非关键的事情更早的发生——如果有机会的话。
通过预取，您可以告诉浏览器在用户执行您期望的操作时获取您认为用户稍后可能需要的资源，作为未来导航或交互的一部分。当当前页面加载完成并且有可用带宽时，这些资源将以最低优先级在浏览器中获取。
这意味着预取最适合用于预测用户的下一步操作并为其做好准备，例如检索必要的脚本或图像。
预取有 3 种类型，我上面描述的通常称为链接预取。
根据 Mozilla 的 MDN链接预取网络文档：
“……浏览器加载完页面后，它开始默默地预取指定的文档并将它们存储在缓存中。当用户访问预取的文档之一时，可以从浏览器的缓存中快速提供该文档。”
对于这种类型的预取，浏览器会在 HTML <link> 或 HTTP Link: 标头中查找预取。这是使用链接标签的示例：
<link rel="prefetch" href="page-2.html">这是使用HTTP Link: header 的相同链接预取提示：
Link: </page-2.html>; rel=prefetch其他类型的预取是DNS 预取和预渲染。
DNS预取
DNS 预取可让您告诉浏览器在用户浏览时在后台对页面执行DNS 查找。因此，当用户按预期单击链接时，DNS 查找已经发生，从而减少了延迟。
通过将 rel=”dns-prefetch” 标签添加到链接属性，可以将 DNS 预取添加到特定 URL。例如：
<link rel="dns-prefetch" href="//fonts.googleapis.com">Mozilla 的 MDN 网络文档DNS 预取条目解释说：
“就带宽而言，DNS 请求非常小，但延迟可能相当高，尤其是在移动网络上。通过推测性地预取 DNS 结果，可以在某些时间显着减少延迟，例如当用户单击链接时。在某些情况下，延迟可以减少一秒。”
预渲染
预渲染将事情提升了一个档次，让您告诉浏览器下载整个页面。
举例来说，您绝对确定（因为您检查了分析并且这是一种常见的使用模式）用户将登陆您的主页，然后继续访问 services.html，因为这是最流行的导航。您可以给浏览器一个资源提示：
<link rel="prerender" href="http://example.com/services.html">下载主页后，浏览器将在后台下载 services.html，并在用户请求时立即为用户准备好。当他们最终单击“服务”链接时，预渲染的页面将立即加载。
但是，如果用户没有点击访问您的“服务”页面而是导航到“关于”页面怎么办？不得不说，预渲染是一种有风险的技术，因为你正在押注用户的下一步行动。
如果你是对的，你将节省下载整个其他页面的时间。但如果你错了，可能会导致严重的带宽浪费，这对移动用户尤其不利。
什么是预连接？
第三方资源确实会降低页面速度，这在很大程度上要归功于浏览器实际开始下载资源之前所需的往返次数。这些往返包括 DNS 查找、TCP 握手和 HTTPS 的 TLS 协商。
根据页面和网络条件，这些往返可能会增加数百毫秒或更多的延迟，如果您从多个不同的主机请求资源，延迟会迅速增加。例如，您的页面可能连接到 Twitter 和 Facebook 以进行社交共享、Gravatar 以进行评论以及 Google Analytics。
但是，如果您可以消除其中一些往返并加快感知性能和实际加载时间呢？
预连接可让您告诉浏览器您的页面打算建立与外部资源的连接，并且您希望该过程尽快启动。以下是如何使用此资源提示的示例：
<link rel=”preconnect” href=”https://example.com”>假设您想加快 Google Fonts 网络字体在页面上的显示速度。由于 Google 的全球 CDN，该服务非常可靠且速度通常很快。但由于在浏览器发出 Webfont 请求之前必须首先在 CSS 文件中发现 @font-face 规则，因此在页面渲染期间可能会出现明显的无样式内容 (FOUC) 闪烁。
使用预连接，您可以通过添加以下预连接提示来大大减少这种延迟：
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>正如 Viget 高级前端开发人员 Jeremy Frank 在他的预连接提示指南中所写，添加预连接在他的测试中消除了关键渲染路径中的 3 个往返，并减少了超过半秒的延迟：
这个特定示例的优点在于，使用预连接有助于减少渲染阻塞并缩短绘制时间（再次包括 LCP）。
根据 Google 网络性能工程师Ilya Grigorik 的说法：
“预连接是优化工具箱中的一个重要工具……它可以消除请求路径中许多成本高昂的往返，在某些情况下，可以将请求延迟减少数百甚至数千毫秒。”
发表回复