Html 如何使用 HTML5 预加载页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7830675/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I preload a page using HTML5?
提问by Leo Jiang
I remember reading about a meta tag that makes the browser preload a page. What's the tag again?
我记得读过有关使浏览器预加载页面的元标记的文章。又是什么牌子？
回答by Félix Saparelli
Prefetching is included in a W3C spec under the name Resource Hints. It is implemented in Firefox, Chrome, IE 11, Edge, Opera after 12.1, and the Android Browser from 4.4.4, see the caniuse prefetch pagefor more and up-to-date details.
预取包含在名为 Resource Hints的W3C 规范中。它在 Firefox、Chrome、IE 11、Edge、Opera 12.1 和 4.4.4 之后的 Android 浏览器中实现，有关更多和最新详细信息，请参阅caniuse 预取页面。
Also see the caniuse and spec pages for related technologies (supported browsers afterwards are retrieved from caniuse and up-to-date as of September 2015):
另请参阅相关技术的 caniuse 和 spec 页面（之后支持的浏览器从 caniuse 中检索，并且是截至 2015 年 9 月的最新版本）：
- Prerendering caniuse/ spec(IE 11, Edge, Chrome, Opera)
- Preconnecting caniuse/ spec(Firefox, Chrome 46, Opera 33)
- DNS Prefetching caniuse/ spec(IE9 (see note below), IE10, every other browser except Opera Mini and perhaps iOS Safari and the Android Browser)
- 预呈现caniuse/规格（IE 11，边缘，铬，歌剧）
- 预连接caniuse/规范（Firefox、Chrome 46、Opera 33）
- DNS Prefetching caniuse/ spec（IE9（见下面的注释），IE10，除 Opera Mini 之外的所有其他浏览器，也许还有 iOS Safari 和 Android 浏览器）
IE 9 implemented DNS prefetching only but called it "prefetch"(caution!). Chrome for a while (at least as far as 2013) only did prerendering and DNS prefetching. IE11 implements lazyload, for images; Microsoft has tried to get it in the spec but so far it isn't. iCab is statedto have been the first browser to implement prefetching, although this behaviour was automatic, not controlled by the markup.
IE 9 仅实现了 DNS 预取，但调用了它"prefetch"（注意！）。Chrome 有一段时间（至少到 2013 年）只做预渲染和 DNS 预取。IE11 实现lazyload, 用于图像；微软试图将其纳入规范，但到目前为止还没有。据说iCab是第一个实现预取的浏览器，尽管这种行为是自动的，不受标记控制。
Historical background
历史背景
The Mozilla Application Suite, and later, Firefox, implement the spec (the spec is actually based on Mozilla's early implementation of prefetching, which was somewhat based on the Link:header specified in RFC 2068which has now been superseeded by RFC 2616[which does not reference the Link:header]. See this old version of the docs() for more detail.) As per the documentation on MDN():
Mozilla 应用程序套件和后来的 Firefox 实现了该规范（该规范实际上是基于 Mozilla 的预取的早期实现，它在某种程度上基于RFC 2068中Link:指定的标头，该标头现在已被RFC 2616[它没有参考的]头。见旧版本的文档中（Link:) 了解更多详细信息。) 根据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 HTTPLink:header with a relation type of eithernextorprefetch.
链接预取是一种浏览器机制，它利用浏览器空闲时间来下载或预取用户在不久的将来可能访问的文档。
浏览器的外观为任一种HTML
<link>或HTTPLink:标头具有关系类型的任一next或prefetch。
So the syntax is:
所以语法是：
<link rel="prefetch" href="/path/to/prefetch" />
You can also use the Link:HTTP header:
您还可以使用Link:HTTP 标头：
Link: </page/to/prefetch>; rel=prefetch
Or a <meta>to simulate that same HTTP header:
或者<meta>模拟相同的 HTTP 标头：
<meta http-equiv="Link" content="</page/to/prefetch>; rel=prefetch">
Note that the nextrelation can also be used, but its main function is to indicate the "next" page in the navigation, so you should not use it for resources or unrelated information. Prefetching is also performed on HTTPS connections.
请注意，next也可以使用关系，但其主要功能是在导航中指示“下一个”页面，因此不应将其用于资源或无关信息。预取也在 HTTPS 连接上执行。
iCab
驾驶室
iCab seems to() have implemented an early prefetching around 2001. iCab apparently prefetched all links to content pages (not resources), not following any hint the developer would have left in the markup.
iCab似乎（) 在 2001 年左右实现了早期预取。iCab 显然预取了所有指向内容页面（不是资源）的链接，没有遵循开发人员在标记中留下的任何提示。
回答by Syntax Error
Some user agents may choose to preload when this is present, but you can't bet on it.
某些用户代理可能会选择在出现这种情况时进行预加载，但您不能对此下注。
<link rel="next" href="http://www.example.com/link-reference">
回答by Salvador Dali
There are a couple of ways how you can preload a page:
有几种方法可以预加载页面：
- DNS prefetchingtells the browser that some of the resources from another domain would be needed, so it can resolve the DNS as quickly as possible. To do this, you have to add
<link rel="dns-prefetch" href="//example.com">in the of the document. This might be helpful if you need to use 3-rd party elements. - Preconnecttakes it a step further and not only it resolves DNS, but also makes a TCP handshake and if you preconnect to https it will do a TLS negotiation. In the header you have to add
<link rel="preconnect" href="https://example.com/"> - Prefetchdownloads the resource and stores it in the browser cache to use it later. You can do
<link rel="prefetch" href="imgs/image.png">. Note that this is up to the browser to decide whether it makes sense to download the resource (it might ignore you) - Prerenderis the most powerful option. It tells the browser to request the url and download all the assets.
<link rel="prerender" href="http://example.com/page">. You should be pretty sure that the person will open the page, otherwise you will just waste his bandwidth.
- DNS 预取告诉浏览器需要来自另一个域的某些资源，因此它可以尽快解析 DNS。为此，您必须
<link rel="dns-prefetch" href="//example.com">在文档中添加。如果您需要使用 3-rd 方元素，这可能会有所帮助。 - PRECONNECT需要它了一步，它不仅解决了DNS，也使得TCP握手，如果你PRECONNECT到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">. 你应该非常确定这个人会打开页面，否则你只会浪费他的带宽。
回答by RSK
This might not be a good answer to the question, but just for the info InstantClick.jscan preload your links before you actually click on it.
这可能不是这个问题的一个很好的答案，但只是为了提供信息InstantClick.js可以在您实际单击它之前预加载您的链接。
How does it work
它是如何工作的
Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by. InstantClick makes use of that time to preload the page, so that the page is already there when you click.
在访问者单击链接之前，他们会将鼠标悬停在该链接上。在这两个事件之间，通常会经过 200 毫秒到 300 毫秒。InstantClick 利用这段时间来预加载页面，以便在您单击时页面已经存在。
回答by Tony Jose
Prealoding the assets, is one of the hardest as well as simplest tasks in a FLASH or HTML5 project because we have done FLASH to HTML5 conversion projects.
预加载资源是 FLASH 或 HTML5 项目中最难也是最简单的任务之一，因为我们已经完成了 FLASH 到 HTML5 的转换项目。
The easiest kinds of preloaders are static preloaders used to load the movie in which they exist. For these preloaders, all you need to do is stop the movie on a preloader screen, usually the first frame of the movie, and keep it there until you are able to determine that the movie has been completely loaded into the Flash player.
最简单的预加载器是静态预加载器，用于加载它们所在的电影。对于这些预加载器，您需要做的就是在预加载器屏幕上停止电影，通常是电影的第一帧，并将其保留在那里，直到您能够确定电影已完全加载到 Flash 播放器中。
The Preloader also stops any flickering or delay when changing uncached images on a web page since the same image has to be downloaded from the server every time it is needed to be displayed.
当更改网页上未缓存的图像时，预加载器还会停止任何闪烁或延迟，因为每次需要显示相同的图像时都必须从服务器下载相同的图像。
We have used jQuery HMTL5 Loaderin our web apps(HTML5), you can see the Github Repohere.
我们在我们的 Web 应用程序（HTML5）中使用了jQuery HMTL5 Loader，您可以在此处查看Github Repo。
This plugin needs a JSON file to get the files that it has to preload, and it can preload images, html5 video and audio sources, script and text files. In addition to this, it has a different type of loaders (circular,line, big counter,etc) and additional features so on.
这个插件需要一个 JSON 文件来获取它必须预加载的文件，它可以预加载图像、html5 视频和音频源、脚本和文本文件。除此之外，它还具有不同类型的装载机（圆形、线形、大计数器等）和附加功能等。
It is implemented like this.
它是这样实现的。
<script>
var loaderAnimation = $("#html5Loader").LoaderAnimation();
$.html5Loader({getFilesToLoadJSON:'json file',
onUpdate: loaderAnimation.update,
debugMode:false
});
</script>
Its working perfectly in different browsers including Chrome, FireFox, Safari, Opera, etc and in mobile browsers.
它在不同的浏览器（包括 Chrome、FireFox、Safari、Opera 等）和移动浏览器中完美运行。
Note: We have used this for our HTML5 web applications which runs in different platforms including android and iOS.
注意：我们已将其用于在不同平台（包括 android 和 iOS）上运行的 HTML5 Web 应用程序。
