搜索内容：
时间：2019-08-13
编辑:网站制作公司
705
0
现代Web浏览器使用各种技术通过猜测用户下一步可能做什么来帮助提高页面加载性能。尽管如此，浏览器对我们的网站或应用程序的了解并不多，而且通常关于用户可能做什么的最佳见解来自我们，即开发人员。
杭州网站建设以分页内容为例，比如相册。我们知道，如果用户正在查看相册中的照片，则他们点击“下一个”链接以查看相册中的以下图像的可能性非常高。然而，浏览器并不真正知道页面上的所有链接，即用户最有可能点击的链接。对于浏览器，所有这些链接都具有相同的权重。
如果浏览器能够以某种方式知道用户下一步的位置并且可以提前获取下一页，那么当用户点击链接时页面加载会更快，更快？这是资源提示的主要内容。它们是开发人员告诉浏览器未来可能发生的事情的一种方式，以便浏览器可以将其纳入其加载资源的选择中。
所有这些资源提示都使用您在HTML文档中找到rel的<link>元素属性<head>。在本文中，我们将介绍资源提示的主要类型以及我们在页面中何时何地使用它们。我们将从细微的暗示到最后的大枪。
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预取的一个步骤是预连接到服务器。建立与托管资源的服务器的连接需要几个步骤：
DNS查找（正如我们刚刚讨论的那样）;
TCP握手 浏览器和服务器之间的简短“对话”以创建连接。
HTTPS站点上的TLS协商 此验证证书信息对连接有效且正确。
这通常每个服务器发生一次并占用宝贵的时间 - 特别是如果服务器离浏览器很远并且网络延迟很高。（这是全球分布式CDN真正有用的地方！）就像预取DNS可以帮助浏览器在看到即将发生的事情之前领先于游戏一样，预先连接到服务器可以确保当浏览器到达部分时在需要资源的页面中，已经进行了建立连接的缓慢工作，并且该线路已打开并准备就绪。
<link rel="preconnect" href="https://scripts.example.com">
复制
同样，浏览器支持很强，如果浏览器不支持预连接也没有坏处 - 结果就像以前一样。当您确定要访问资源并希望获得成功时，请考虑使用预连接。
注意不要预先连接，然后不要使用连接，因为这会降低页面速度并在连接的服务器上占用少量资源。
到目前为止我们看过的两个提示主要集中在正在加载的页面内的资源上。例如，它们可能有助于浏览器在图像，脚本或字体方面取得成功。接下来的几个提示更关注导航和预测用户可能在当前正在加载的页面之后的位置。
第一个是预取，其链接标记可能如下所示：
<link rel="prefetch" href="https://example.com/news/?page=2" as="document">
复制
这告诉浏览器它可以继续在后台获取页面，以便在请求时准备就绪。这里有一点赌博，因为你必须抢占你认为用户下次导航的位置。做对了，下一页看起来可能很快加载。弄错了，你浪费了时间和资源来下载一些不会被使用的东西。如果用户使用有限的移动电话计划等计量连接，您实际上可能会花费真金白银。
当发生预取时，浏览器执行DNS查找并建立我们在前两种类型的提示中看到的服务器连接，但后来更进一步实际请求并下载文件。但是，它会在此时停止，并且文件不会被解析或执行，并且它们不会应用于当前页面。他们只是被要求并准备好了。
您可能会认为预取有点像将文件添加到浏览器的缓存中。当用户点击链接时，不需要去服务器并下载它，而是可以将文件拉出内存并更快地使用。
在上面的示例中，您可以看到我们正在将as属性设置为as="document"。这是一个可选属性，告诉浏览器我们要提取的内容应该作为文档（即网页）处理。这使浏览器能够设置相同类型的请求标头和安全策略，就像我们只是按照指向新页面的链接一样。
as通过使浏览器以适当的方式处理不同类型的预取，该属性有许多可能的值。
| 的价值 as | 资源类型 |
|---|---|
| audio | 声音和音乐文件 |
| video | 视频 |
| Track | 视频或音频WebVTT曲目 |
| script | JavaScript文件 |
| style | CSS样式表 |
| font | Web字体 |
| image | 图片 |
| fetch | XHR和Fetch API请求 |
| worker | 网络工作者 |
| embed | 多媒体<embed>请求 |
| object | 多媒体<object>请求 |
| document | 网页 |
可用于使用该as属性指定资源类型的不同值。
再次prefetch有很好的浏览器支持。如果您认为加快导航速度会对用户体验产生积极影响，那么当您有合理数量的用户确定性可能会通过您的网站时，您应该使用它。应该通过获取未使用的资源来权衡浪费资源的风险。
有了prefetch，我们已经看到了浏览器如何在后台准备使用下载文件，但同时也注意到在这一点上没有更多的内容。预渲染更进一步并执行文件，除了实际显示页面外，几乎完成了显示页面所需的所有工作。
这可能包括解析任何子资源（如JavaScript文件和图像）的资源并预取这些资源。
<link rel="prerender" href="https://example.com/news/?page=2">
复制
这真的可以使下面的页面加载感觉瞬间，当您点击浏览器的后退按钮时可能会看到一种快速的加载性能。然而，这里的赌博甚至更大，因为你不仅花时间请求和下载文件，而且还要执行它们以及任何JavaScript等。这可能会耗尽内存和CPU（以及电池），如果用户最终没有请求页面，则用户将无法获益。
浏览器支持了prerender目前非常有限，与真的只有Chrome和IE老（不EDGE）提供的选项支持。这可能会限制其实用性，除非您恰好专门针对Chrome。再次，这是一个“没有伤害，没有犯规”的情况，因为用户不会看到好处，但如果没有，它不会给他们带来任何问题。
我们已经看到了如何<head>使用<link>标记在HTML文档中使用资源提示。这可能是最方便的方法，但您也可以使用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但不是整个资源。如果内存不足，浏览器可能会再次确定在卸载当前内存之前不值得获取下一页。
实际情况是，在桌面浏览器上，可能会按照开发人员的建议来遵循提示，但请注意，在每种情况下都取决于浏览器。
如果你已经在网上工作了两年多，你会熟悉这样一个事实，即如果页面上的某些内容是看不见的话，那么它往往会被忽略。隐藏的元数据（例如页面描述）就是一个很好的例子。如果照顾网站的人不能轻易看到数据，那么它很容易被忽视并且过时。
这是资源提示的真正风险。由于代码被隐藏起来并且在使用中几乎未检测到，因此页面很容易更改并且任何资源提示都不会更新。结果是，预取一个你不使用的页面，意味着你为提高网站性能而设置的工具会对它产生积极的伤害。因此，拥有良好的程序来确定最新的资源提示是非常非常重要的。
杭州网站建设
3
s后返回登录
3
s后返回登录
