网站建设之如何使用标签加快网站速度

“ 预先缓存 ”浏览器是高速互联网冲浪的未来，甚至在我们知道我们想要它们之前就为我们带来了我们想要的资源。今天的浏览器现在已经做出一些预测，以加快文件的获取和渲染速度。为了实现下一步，我们不仅仅是Web开发人员。

开发者有一个相当不错的主意的他们的网站是如何导航，并请求资源最多，因此，他们可以预测未来的某个操作的浏览器应该为网站做。现在所需要的只是让开发人员找到一种方法将这些预测转发给浏览器并充分利用它们。这是一些特殊的“HTML链接”的来源。

重新审视HTTP请求

在查看这些链接之前，是时候刷新内存，了解典型的HTTP请求的文件获取操作是如何发生的。让我们说一个名叫乔的人想要访问一个网站。

接下来会发生什么：

1. Joe在浏览器的地址栏中键入网站的人性可回收地址，然后按“Enter”。
2. 一旦收到该地址，浏览器就会向DNS服务器（ISP的称赞）询问Joe提供的地址的IP地址。
3. DNS服务器有责任。
4. 现在浏览器知道IP地址，它会向网站的服务器发送一条消息（用TCP方言），要求建立连接。
5. 如果服务器处于活动状态，它会发送一个确认浏览器请求的回复，浏览器会响应并确认服务器的消息。（注意：是的，这是客户端和服务器之间TCP握手的极度淡化版本。）
6. 当握手结束时，两者之间建立连接。
7. 现在，浏览器将其方言样式更改为HTTP并向服务器询问网站。
8. 知道网站主页的服务器只返回该内容，浏览器收到该主页，并向在电脑前耐心等待的Joe显示。

典型的HTTP请求遍历所有（以及更多）通过Internet获取文档。因此，如果这些过程中的任何一个可以在可能的情况下快速启动，我们可以减少等待交付所需资源的时间。

HTML链接关系

W3C指定4个HTML链接关系（rel命名为关系）dns-prefetch，preconnect，prefetch，和prerender。它们一起被称为（资源提示）（由W3C提供）。现在，我们将看到他们可以做什么以及可以在哪里使用它们。

1. DNS预取

在DNS预取中，域名解析（也就是从DNS服务器获取匹配的IP地址）是提前完成的。

“就带宽而言，DNS请求非常小，但延迟可能非常高，特别是在移动网络上。通过推测性地预取DNS结果，可以在某些时间显着减少延迟，例如当用户点击链接时。在某些情况下，延迟可以减少一秒。- Mozilla开发者网络 “

假设网站上有一个参考页面，其中有许多参考链接指向其姊妹网站。当用户访问参考页，有一个高概率用户将导航到姊妹网站。因此，对姐妹站点的早期DNS查找可以减少打开站点所需的时间（从而改善用户体验）。

这通过DNS预取等待时间减少可以通过将此代码添加到参照页来完成。

当浏览器在参考页面中处理此代码时，它会将姐妹站点的DNS查找添加到其任务队列中，当它从队列中的其他高优先级任务中解脱时，它将启动DNS解析姐妹网站。

因此，当用户最终单击将其带到姊妹站点的其中一个链接时，该站点的DNS解析可能已经完成，并且浏览器可以立即开始与姊妹站点建立客户端 – 服务器TCP连接 服务器，使页面加载更快。

自2016年3月起，除Safari外，几乎所有现代浏览器均提供此功能。

2.预连接

预连接是远离DNS预取的一步，它建立了与服务器的连接，将来可能会发送请求。

“预连接是优化工具箱中的一个重要工具 ……它可以从您的请求路径中消除许多代价高昂的往返 – 在某些情况下可以将请求延迟减少数百甚至数千毫秒。- lya Grigorik “

W3C列出了预连接的理想用例：重定向。开发人员出于多种原因使用重定向。

在这种情况下，浏览器的下一个请求（重定向站点）是100％可预测的，并且可以预先连接到，以减少导航延迟。

想象一下，有一个重定向到“ xyzsite ” 的中间站点页面，当它到达那个中间页面时，以下HTML链接将使浏览器与xyzsite服务器预先连接。

截至2016年3月，Chrome，Opera和Firefox均提供此功能。

3.预取

对于prefetch资源，浏览器开始实现资源域名的DNS解析，然后执行与资源服务器的TCP连接，发出HTTP请求，最后在浏览器缓存中提取和存储预取资源。

如果您确定以后需要哪些资源，那么这是预先预取的资源; 其中就是捕获物。预取需要猜测，如果你猜错了，你实际上可能会减速而不是加速你的网站。

“这种技术有可能加速许多互动网站，但无法在任何地方使用。对于某些网站来说，猜测用户下一步会做什么太难了。对于其他人来说，如果过早提取数据，数据可能会过时。注意不要过早预取文件也很重要，否则你可能会减慢用户已经看过的页面的速度。 – Google Developers“

对于在线图书，图库或投资组合，如果用户最有可能浏览到下一页，则预取图像等资源可以显着加快速度。这是执行此操作的代码。

Chrome，Firefox和Opera支持预取。

4. Prerender

只有HTML页面才能进行预渲染。预渲染的HTML页面将脱机呈现，并在用户实际需要时绘制到屏幕上。渲染需要更高的计算工作和内存资源 ; 另外，为了呈现页面，浏览器可能需要额外的资源（例如添加到页面的图像），这将导致浏览器的更多后续请求。

因此，prerender必须谨慎使用，而不是过度使用。添加以下代码将预先取消“关于”页面。

<link rel="prerender" href="//example.com/about.html">

“ prerender应用程序可以使用提示来指示下一个可能的HTML导航目标：用户代理将获取并处理指定的资源作为HTML响应。要使用适当的请求标头获取其他内容类型，或者不需要HTML预处理，应用程序可以使用prefetch提示。- W3C “

截至2016年3月， Prerender已经在Chrome，IE和Opera中推出。

有几点需要注意

（1）上述资源提示都没有保证执行和完成请求的不同阶段，因为当浏览器已经忙于处理用户所在的当前页面操作所需的请求时，执行这些优化可以阻碍用户当前的任务。

因此，当浏览器足够自由地执行此操作时，所有内容都会排队并执行。

即使在加载页面之前，这些资源提示也不一定必须存在于页面中。它们可以稍后通过JavaScript添加，资源提示将像往常一样完成它们的工作。

（2） W3C指定的HTML链接属性称为提示概率，pr对这些资源的提示，其可用于提供将在将来提出的请求的概率（具有值0到1）。我还没有看到任何浏览器实现此属性。例如，以下代码表明将来会请求xyzsite的概率为80％，而about页面的概率为30％。

我们还可以将可选的crossorigin属性添加到资源提示中，以通知浏览器链接请求的CORS凭证。