使用资源提示优化性能
已发表: 2022-03-10现代网络浏览器使用各种技术通过猜测用户接下来可能会做什么来帮助提高页面加载性能。 但是，浏览器对我们的网站或整个应用程序知之甚少，而且关于用户可能会做什么的最佳见解通常来自我们，即开发人员。
以分页内容为例，例如相册。 我们知道，如果用户正在查看相册中的照片，他们点击“下一个”链接以查看相册中以下图像的机会非常高。 然而，浏览器并不真正知道页面上的所有链接中用户最有可能点击的链接。 对于浏览器来说，所有这些链接都具有相同的权重。
如果浏览器能够以某种方式知道用户下一步要去哪里，并且可以提前获取下一页，那么当用户点击链接时，页面加载速度会快很多，快得多？ 这就是资源提示的主要内容。 它们是开发人员告诉浏览器未来可能发生的事情的一种方式，以便浏览器可以将其纳入其加载资源的选择中。
所有这些资源提示都使用<link>元素的rel属性，您将熟悉在 HTML 文档的<head>中找到该属性。 在本文中，我们将了解资源提示的主要类型以及我们可以在页面中何时何地使用它们。 我们将从小而微妙的提示到最后的大枪。
DNS 预取
DNS 查找是将人类友好的域名（如example.com ）转换为机器友好的 IP 地址（如123.54.92.4 ）的过程，该地址实际上是获取资源所需的。
每次您在浏览器地址栏中键入 URL，点击页面中的链接，甚至从不同域加载资源（如图像）时，浏览器都需要进行 DNS 查找以找到保存我们所拥有资源的服务器请求。 对于具有大量外部资源的繁忙页面（例如可能包含大量广告和跟踪器的新闻网站），每个页面可能需要进行数十次 DNS 查找。
浏览器缓存这些查找的结果，但它们可能很慢。 一种性能优化技术是通过将资源组织到更少的域来减少所需的 DNS 查找次数。 如果无法做到这一点，您可以使用dns-prefetch资源提示警告浏览器需要查找的域。
<link rel="dns-prefetch" href="https://images.example.com"> 当浏览器遇到这个提示时，它可以尽快开始解析images.example.com域名，即使它还不知道它会被如何使用。 这使浏览器能够领先于游戏并并行执行更多工作，从而减少整体加载时间。
我什么时候应该使用dns-prefetch ？
当您的页面使用来自不同域的资源时，请使用dns-prefetch ，以使浏览器领先一步。 浏览器支持真的很棒，但是如果浏览器不支持它，那么也没有什么坏处——预取就不会发生。
不要预取任何您不使用的域，如果您发现自己想要预取大量域，您最好看看为什么需要所有这些域，以及是否可以采取任何措施来减少数量。
预连接
DNS 预取的一个步骤是预连接到服务器。 建立与托管资源的服务器的连接需要几个步骤：
- DNS 查找（正如我们刚刚讨论过的）；
- TCP 握手
浏览器和服务器之间的简短“对话”以创建连接。 - HTTPS 站点上的 TLS 协商
这将验证证书信息对于连接是否有效且正确。
这通常会在每台服务器上发生一次，并且会占用宝贵的时间——尤其是在服务器离浏览器很远且网络延迟很高的情况下。 （这就是全球分布式 CDN 真正有用的地方！）与预取 DNS 可以帮助浏览器在看到即将发生的事情之前领先于游戏一样，预连接到服务器可以确保浏览器何时到达该部分在需要资源的页面中，建立连接的缓慢工作已经发生，线路已打开并准备就绪。
<link rel="preconnect" href="https://scripts.example.com"> 我什么时候应该使用preconnect ？
同样，浏览器支持很强大，如果浏览器不支持预连接也没有什么坏处——结果将和以前一样。 当您确定将要访问资源并且想要取得成功时，请考虑使用预连接。
注意不要预先连接然后不要使用连接，因为这会减慢您的页面速度并占用您连接的服务器上的少量资源。
预取下一页
到目前为止，我们看到的两个提示主要集中在正在加载的页面中的资源上。 例如，它们可能有助于帮助浏览器在图像、脚本或字体方面取得领先。 接下来的几个提示更多地涉及导航和预测用户在当前正在加载的页面之后可能会去哪里。
其中第一个是预取，它的链接标签可能如下所示：
<link rel="prefetch" href="https://example.com/news/?page=2" as="document">这告诉浏览器它可以继续并在后台获取页面，以便在请求时准备好运行。 这里有一点赌注，因为您必须抢占您认为用户接下来将导航的位置。 做对了，下一页可能看起来加载得很快。 弄错了，你就浪费了时间和资源来下载一些不会被使用的东西。 如果用户使用的是计量连接（例如有限的手机套餐），您实际上可能会花费他们真金白银。
当发生预取时，浏览器会进行 DNS 查找并建立我们在前两种提示中看到的服务器连接，但随后会更进一步，实际请求并下载文件。 但是，它会在该点停止，并且文件不会被解析或执行，并且它们绝不会应用于当前页面。 他们只是被要求并做好准备。
您可能认为预取有点像将文件添加到浏览器的缓存中。 当用户点击链接时，不需要去服务器下载它，文件可以从内存中提取出来并更快地使用。
as属性
在上面的示例中，您可以看到我们将as属性设置为as="document" 。 这是一个可选属性，它告诉浏览器我们正在获取的内容应该作为文档（即网页）处理。 这使浏览器能够设置相同类型的请求标头和安全策略，就好像我们刚刚点击了指向新页面的链接一样。
通过使浏览器能够以适当的方式处理不同类型的预取， as属性有很多可能的值。
as的值 | 资源类型 |
|---|---|
audio | 声音和音乐文件 |
video | 视频 |
Track | 视频或音频 WebVTT 轨道 |
script | JavaScript 文件 |
style | CSS 样式表 |
font | 网页字体 |
image | 图片 |
fetch | XHR 和 Fetch API 请求 |
worker | 网络工作者 |
embed | 多媒体<embed>请求 |
object | 多媒体<object>请求 |
document | 网页 |
可用于使用as属性指定资源类型的不同值。
我什么时候应该使用prefetch ？
再次prefetch具有很好的浏览器支持。 如果您认为加快导航速度会对用户体验产生积极影响，那么您应该在有合理程度的确定用户可能会浏览您的网站时使用它。 这应该与通过可能获取未使用的资源而浪费资源的风险进行权衡。
预渲染下一页
使用prefetch ，我们已经看到浏览器如何在后台下载准备使用的文件，但也注意到此时没有对它们进行任何其他操作。 预渲染更进一步并执行文件，几乎完成了显示页面所需的所有工作，除了实际显示它。
这可能包括解析任何子资源（例如 JavaScript 文件和图像）的资源并预取这些资源。
<link rel="prerender" href="https://example.com/news/?page=2">这确实可以使以下页面加载感觉是即时的，具有您在点击浏览器的后退按钮时可能会看到的那种快速加载性能。 然而，这里的赌注更大，因为您不仅要花时间请求和下载文件，还要与任何 JavaScript 等一起执行它们。 这可能会耗尽内存和 CPU（以及电池），如果他们最终不请求页面，用户将看不到这些好处。
我什么时候应该使用prerender ？
浏览器对prerender的支持目前非常有限，实际上只有 Chrome 和旧 IE（不是 Edge）提供对该选项的支持。 除非您碰巧专门针对 Chrome，否则这可能会限制其用途。 这又是一个“没有伤害，没有犯规”的案例，因为用户不会看到好处，但如果没有，也不会给他们带来任何问题。
使用资源提示
我们已经看到了如何使用<link>标签在 HTML 文档的<head>中使用资源提示。 这可能是最方便的方法，但您也可以使用Link: HTTP 标头实现相同的目的。
例如，使用 HTTP 标头预取：
Link: <https://example.com/logo.png>; rel=prefetch; as=image;您还可以使用 JavaScript 动态应用资源提示，也许是为了响应使用交互。 要使用 W3C 规范文档中的示例：
var hint = document.createElement("link"); hint.rel = "prefetch"; hint.as = "document"; hint.href = "/article/part3.html"; document.head.appendChild(hint);这开辟了一些有趣的可能性，因为它可能更容易根据用户与页面的交互方式来预测用户下一步可能导航的位置。
注意事项
我们已经研究了四种更激进的预加载资源的方法，从最简单的解析 DNS 到在后台准备好完整的页面。 重要的是要记住这些提示就是这样； 它们暗示了浏览器可以优化性能的方式。 它们不是指令。 浏览器可以接受我们的建议并使用其最佳判断来决定如何响应。
这可能意味着在繁忙或过度使用的设备上，浏览器根本不会尝试响应提示。 例如，如果浏览器知道它在计量连接上，它可能会预取 DNS，但不会预取全部资源。 如果内存不足，浏览器可能会再次决定在当前页面被卸载之前不值得获取下一页。
现实情况是，在桌面浏览器上，提示可能会按照开发人员的建议全部遵循，但请注意，在每种情况下都取决于浏览器。
维护的重要性
如果您已经使用网络超过几年，您就会熟悉这样一个事实：如果页面上的某些内容是看不见的，那么它通常会被忽略。 隐藏的元数据（例如页面描述）就是一个很好的例子。 如果维护站点的人不能轻易看到数据，那么它很容易被忽视和过时。
这是资源提示的真正风险。 由于代码被隐藏起来并且在使用中几乎未被检测到，因此页面很容易更改并且任何资源提示都不会更新。 说，预取您不使用的页面的结果意味着您为提高网站性能而设置的工具正在积极地损害它。 因此，制定良好的程序来更新您的资源提示变得非常非常重要。
资源
- “资源提示规范”，W3C
- “通过预取加快下一页导航，”Addy Osmani