How can I preload a page using HTML5?

问题

I remember reading about a meta tag that makes the browser preload a page. What\'s the tag again?

回答1:

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 page for more and up-to-date details.

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):

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)

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 stated to have been the first browser to implement prefetching, although this behaviour was automatic, not controlled by the markup.

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 2068 which 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 (🕔):

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.

So the syntax is:

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

You can also use the Link: HTTP header:

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

Or a <meta> to simulate that same HTTP header:

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

Note that the next relation 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.

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.

回答2:

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">

回答3:

There are a couple of ways how you can preload a page:

DNS prefetching tells 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.
Preconnect takes 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/">
Prefetch downloads 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)
Prerender is 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.

回答4:

This might not be a good answer to the question, but just for the info InstantClick.js can preload your links before you actually click on it.

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.

回答5:

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.

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.

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 Loader in our web apps(HTML5), you can see the Github Repo here.

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.

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.

Note: We have used this for our HTML5 web applications which runs in different platforms including android and iOS.

来源：https://stackoverflow.com/questions/7830675/how-can-i-preload-a-page-using-html5

标签

html5

preload