script 标签加快加载_如何加快网站速度 标签

“ 预见性 ”浏览器是高速互联网冲浪的未来， 即使在我们不想要它们之前 ，也能为我们带来所需的资源。 如今的浏览器已经不时做出一些预测 ，以加快文档的获取和呈现速度。 为了将其进行到下一步，我们只希望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查找可以减少打开站点所需的时间（从而改善用户体验）。

<link rel="dns-prefetch" href="//mysistersite.org">

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

因此，当用户最终单击将其链接到姊妹站点的链接之一时，该站点的DNS解析可能已经完成，浏览器可以立即开始与姊妹站点建立客户端-服务器TCP连接 服务器，从而加快页面加载速度。

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

2.预连接

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

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

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

想象一下，有一个中间站点页面重定向到“ xyzsite ”，下面HTML链接将使浏览器在到达该中间页面时与xyzsite服务器进行预连接。

<link rel="preconnect" href="//xyzsite.com">

自2016年3月起，Chrome，Opera和Firefox中都提供了此功能 。

3.预取

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

如果您确定以后将需要哪些资源，那是事前要预取的资源。 渔获物就在其中。 预取需要猜测 ，如果您猜错了，实际上可能会减慢速度而不是加快站点速度。

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

<link rel="prefetch" href="//xyzsite.com/nextimage.jpg">

4.渲染

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

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

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

截至2016年3月， Chrome，IE和Opera中已提供Prerender。

注意事项

因此， 当浏览器有足够的空闲时间时 ，所有内容都会排队并执行。

即使在加载页面之前，这些资源提示也不一定必须存在于页面中。 稍后可以通过JavaScript添加它们，并且资源提示将照常进行。

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

<link rel="preconnect" href="//xyzsite.com" pr="0.8">
<link rel="prerender" href="//example.com/about.html" pr="0.3">

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

翻译自: https://www.hongkiat.com/blog/html-resource-hints-speed-up-websites/