如何使用HTML5预加载页面？

Question

如何使用HTML5预加载页面？

Leo*_*ang 31 html5 preload

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

Answer 1

Fél*_*lli 62

预取包含在名为Resource Hints的W3C规范中.它在Firefox,Chrome,IE 11,Edge,12.1之后的Opera和4.4.4的Android浏览器中实现,请参阅caniuse预取页面以获取更多和最新的详细信息.

另请参阅相关技术的caniuse和spec页面(之后支持的浏览器从caniuse和2015年9月的最新版本中检索):

预呈现caniuse/规格(IE 11,边缘,铬,歌剧)
预连接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 被认为是第一个实现预取的浏览器,虽然这种行为是自动的,不受标记控制.

历史背景

Mozilla Application Suite及更高版本的Firefox实现了规范(规范实际上是基于Mozilla早期的预取实现,它有点基于RFC 2068中Link:指定的头,现在已被RFC 2616取代[未引用]的]头.见旧版本的文档中(Link:)更多细节.)根据MDN的文件():

链接预取是一种浏览器机制,它利用浏览器空闲时间来下载或预取用户可能在不久的将来访问的文档.

浏览器查找任一个HTML <link>或HTTP Link:与关系类型的任一标头next或prefetch.

所以语法是:

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

Run Code Online (Sandbox Code Playgroud)

您还可以使用Link:HTTP标头:

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

Run Code Online (Sandbox Code Playgroud)

或者a <meta>来模拟相同的HTTP标头:

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

Run Code Online (Sandbox Code Playgroud)

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

因为iCab

iCab 似乎(已经在2001年左右实现了早期预取.iCab显然预取了内容页面的所有链接(不是资源),没有遵循开发人员在标记中留下的任何暗示.

制作这个社区wiki是因为,尽管我喜欢声誉,但这个话题很复杂,影响深远,真的需要一些比我更了解的人的爱.去吧,贡献! (2认同)

Answer 2

Sal*_*ali 7

有几种方法可以预加载页面：

DNS 预取告诉浏览器需要其他域的某些资源，因此它可以尽快解析该域。为此，您必须<link rel="dns-prefetch" href="//example.com">在<head>文档中添加。如果您需要使用第三方元素，这可能会有所帮助。
Preconnect更进一步，不仅解析域名，还进行 TCP 握手。如果您预连接到 HTTPS，它将进行 TLS 协商。在标题中你必须添加<link rel="preconnect" href="https://example.com/">
Prefetch下载资源并将其存储在浏览器缓存中以供以后使用。你可以做<link rel="prefetch" href="imgs/image.png">。请注意，这由浏览器决定下载资源是否有意义（它可能会忽略您）
预渲染是最强大的选项。它告诉浏览器请求 URL 并下载所有资源。<link rel="prerender" href="http://example.com/page">。您应该非常确定该人会打开该页面，否则您只会浪费他的带宽。

需要注意的一件事是，预渲染的支持率非常低（https://caniuse.com/#feat=link-rel-prerender），假设 Google Chrome 很快就会弃用它：https://groups.google.com/ a/chromium.org/forum/#!msg/blink-dev/0nSxuuv9bBw/EMfaclV-AwAJ。可能是因为很容易滥用和浪费用户带宽。 (2认同)

归档时间：	13 年，10 月前
查看次数：	26485 次
最近记录：	9 年，11 月前