我记得曾经读到过一种可以让浏览器预加载页面的元标签，那个标签是什么来着？
5个回答
62
预取在W3C规范中被称为资源提示。它已经在Firefox、Chrome、IE 11、Edge、Opera 12.1之后以及Android浏览器4.4.4以上版本中实现，有关更多和最新细节，请参见caniuse预取页面。
此外，有关相关技术的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 浏览器之外的所有浏览器）
lazyload，Microsoft试图将其纳入规范，但目前尚未成功。据称iCab是第一个实现预取的浏览器，尽管这种行为是自动的，而非由标记控制的。
历史背景
Mozilla应用套件和后来的Firefox实现了规范（实际上该规范基于Mozilla早期的预取实现，该实现在RFC 2068中指定了Link:头部，现已被RFC 2616所取代[该规范不再引用Link:头部]。请参阅文档的旧版本（）以获取更多详细信息）。根据MDN文档（）的说明：
链接预获取是一种浏览器机制，利用浏览器空闲时间下载或预获取用户可能在不久的将来访问的文档。
浏览器查找具有关系类型为
next或prefetch的HTML<link>或HTTPLink:头部。
因此，语法如下：
<link rel="prefetch" href="/path/to/prefetch" />
您还可以使用HTTP头中的
Link:。Link: </page/to/prefetch>; rel=prefetch
或者使用<meta>来模拟相同的HTTP头：
<meta http-equiv="Link" content="</page/to/prefetch>; rel=prefetch">
注意，
next 关系也可以使用，但其主要功能是指示导航中的“下一页”，因此您不应将其用于资源或不相关的信息。预取也在 HTTPS 连接上执行。iCab 似乎在 2001 年左右实现了早期预取。 iCab 显然预取了所有内容页面的链接（而不是资源），不遵循开发人员在标记中留下的任何提示。
- Félix Saparelli
5
7
有几种方法可以预加载网页：
- DNS 预取 告诉浏览器需要一些来自另一个域的资源，因此它可以尽快解析域名。要执行此操作，您必须在文档的
<head>中添加<link rel="dns-prefetch" href="//example.com">。如果您需要使用第三方元素，则可能会有所帮助。 - Preconnect 更进一步，不仅解析域名，还进行了 TCP 握手。如果您预连接到 HTTPS，请进行 TLS 协商。在头部中，您必须添加
<link rel="preconnect" href="https://example.com/"> - Prefetch 下载资源并将其存储在浏览器缓存中以便日后使用。您可以执行
<link rel="prefetch" href="imgs/image.png">。请注意，浏览器决定是否下载资源（可能会忽略您） - Prerender 是最强大的选项。它告诉浏览器请求 URL 并下载所有资产。
<link rel="prerender" href="http://example.com/page">。您应该非常确定该人将打开页面，否则将浪费他的带宽。
- Salvador Dali
2
2需要注意的一点是，预渲染（prerender）的支持非常低（https://caniuse.com/#feat=link-rel-prerender），并且假定谷歌浏览器很快会弃用它：https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/0nSxuuv9bBw/EMfaclV-AwAJ。可能是因为它容易被滥用和浪费用户的带宽。 - Null
@Null 这真奇怪，到了现在他们几乎是唯一支持它的主要浏览器。 - undefined
3
一些用户代理可能会在此时选择预加载，但您不能保证它。
<link rel="next" href="http://www.example.com/link-reference">
- Syntax Error
1
这篇帖子将会提高这个问题在谷歌搜索结果中的排名，因为Stack Overflow被大量索引并获得了惊人的页面排名。根据本站的一个目标，如果信息只存在于互联网上的一次性网站或网页上，放在这里会更好。 - Stefan Kendall
2
这可能不是一个好的问题答案，但是只是提供信息，InstantClick.js 可以在您实际点击链接之前预加载链接。
它是如何工作的
在访问者单击链接之前，他们会将鼠标悬停在该链接上。在这两个事件之间，通常会经过200毫秒到300毫秒的时间。InstantClick利用这段时间来预加载页面，以便在您单击时页面已经存在。
- RSK
1
在FLASH或HTML5项目中，预加载资源是最困难和最简单的任务之一，因为我们已经完成了FLASH到HTML5转换项目。
最简单的预加载程序是静态预加载程序，用于加载它们所存在的电影。对于这些预加载程序，您只需要在预加载屏幕上停止电影，通常是电影的第一帧，并将其保留在那里，直到您能够确定电影已完全加载到Flash播放器中。
预加载程序还可以防止更改Web页面上未缓存的图像时出现闪烁或延迟，因为每次需要显示相同的图像时都必须从服务器下载。
我们在我们的Web应用程序（HTML5）中使用了 jQuery HMTL5 Loader，您可以在此处查看 Github Repo。
这个插件需要一个 JSON 文件来获取需要预加载的文件，它可以预加载图片、 HTML5 视频和音频资源、脚本和文本文件。除此之外，它还有不同类型的加载器（圆形、线形、大计数器等）和其他附加功能。
实现方式如下。
<script>
var loaderAnimation = $("#html5Loader").LoaderAnimation();
$.html5Loader({getFilesToLoadJSON:'json file',
onUpdate: loaderAnimation.update,
debugMode:false
});
</script>
它在不同的浏览器（包括 Chrome、FireFox、Safari、Opera 等）以及移动浏览器中都能完美工作。
注意：我们已将其用于我们的 HTML5 网页应用程序，该应用程序可以在包括 Android 和 iOS 在内的不同平台上运行。
- Tony Jose
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
<link>标签，这样做是否有效？ - Aruna Tebel