html - 如何使用 HTML5 预加载页面？

Question

我记得读过有关使浏览器预加载页面的元标记。标签又是什么？

Answer 1

预取包含在 W3C spec under the name Resource Hints 中。它在 Firefox、Chrome、IE 11、Edge、Opera 12.1 之后以及 Android 浏览器 4.4.4 中实现，请参阅 caniuse prefetch page 了解更多和最新的详细信息。

另请参阅相关技术的 caniuse 和规范页面(之后支持的浏览器从 caniuse 检索并更新至 2015 年 9 月):

• 预呈现 caniuse/spec(IE 11、Edge、Chrome、Opera)
• 预连接 caniuse/spec(Firefox、Chrome 46、Opera 33)
• DNS 预取 caniuse/spec(IE9(请参阅下面的注释)、IE10、除了 Opera Mini 以及 iOS Safari 和 Android 浏览器之外的所有其他浏览器)

IE 9 仅实现了 DNS 预取，但将其称为 "prefetch"(注意!)。 Chrome 有一段时间(至少到 2013 年)只进行预渲染和 DNS 预取。 IE11 实现 lazyload ，用于图像；微软曾试图将其纳入规范，但到目前为止还没有。 iCab is stated 是第一个实现预取的浏览器，尽管这种行为是自动的，不受标记控制。

---

历史背景

Mozilla Application Suite 和后来的 Firefox 实现了该规范(该规范实际上基于 Mozilla 的早期预取实现，它在某种程度上基于 RFC 2068 中指定的 Link: header ，现在已被 RFC 2616 取代 [它确实不引用 Link: header ]。有关详细信息，请参阅 this old version of the docs ( 🕔 )。)根据 the documentation on MDN ( 🕔 ):

Link prefetching is a browser mechanism, which utilizes browser idle time to download or prefetch documents that the user might visit in the near future.

The browser looks for either an HTML <link> or an HTTP Link: header with a relation type of either next or prefetch.

所以语法是:

<link rel="prefetch" href="/path/to/prefetch" />

您还可以使用 Link: HTTP header :

Link: </page/to/prefetch>; rel=prefetch

或者一个 <meta> 来模拟相同的 HTTP header :

<meta http-equiv="Link" content="&lt;/page/to/prefetch&gt;; rel=prefetch">

请注意，next 关系也可以使用，但其主要功能是指示导航中的“下一页”，因此您不应将其用于资源或无关信息。还在 HTTPS 连接上执行预取。

出租车

iCab seems to ( 🕔 ) 在 2001 年左右实现了早期预取。iCab 显然预取了所有指向内容页面(而非资源)的链接，没有遵循开发人员会留在标记中的任何提示。