Question

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

Answer 1

预取包含在W3C spec under the name Resource Hints中。它在Firefox，Chrome，IE 11，Edge，12.1之后的Opera以及4.4.4的Android浏览器中实现，请参阅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:标头。现已取代RFC 2616 [未引用Link:标题]。有关详细信息，请参阅this old version of the docs（）。）按照the documentation on MDN（{ {3}}）：

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

浏览器会查找关键字类型为<link>或Link:的HTML next或HTTP prefetch标头。

所以语法是：

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

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

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

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

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

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

因为iCab

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

Answer 2

有些用户代理可能会选择预先加载，但你不能赌它。

<link rel="next" href="http://www.example.com/link-reference">

Answer 3

这可能不是一个很好的答案，但只是信息InstantClick.js可以在您实际点击之前预先加载链接。

如何运作

在访问者点击链接之前，他们将鼠标悬停在该链接上。在这两个事件之间，通常经过200毫秒到300毫秒。 InstantClick利用该时间来预加载页面，以便在您单击时页面已经存在。

Answer 4

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

DNS prefetching告诉浏览器需要来自其他域的一些资源，因此它可以尽快解析DNS。为此，您必须在文档中添加<link rel="dns-prefetch" href="//example.com">。如果您需要使用第三方元素，这可能会有所帮助。
Preconnect更进一步，它不仅可以解析DNS，还可以进行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">。你应该非常确定这个人会打开这个页面，否则你只会浪费他的带宽。

Answer 5

预先对资产进行预编码是FLASH或HTML5项目中最难也是最简单的任务之一，因为我们已经完成了FLASH到HTML5的转换项目。

最简单的预加载器类型是静态预加载器，用于加载它们存在的电影。对于这些预加载器，您需要做的就是在预加载器屏幕上停止播放电影，通常是电影的第一帧，并将其保留在那里直到您能够确定电影已完全加载到Flash播放器中。

预加载器还可以在更改网页上的未缓存图像时停止任何闪烁或延迟，因为每次需要显示时都必须从服务器下载相同的图像。

我们在网络应用中使用了jQuery HMTL5 Loader（HTML5），您可以在此处看到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。

如何使用HTML5预加载页面？

5 个答案:

历史背景

因为iCab