Nice Question,
First we need to make it clear that "prerender" and "prefetch" are two different features with many different limitations and behavior.
One of the big issues here are that they will both act slightly different depending on the webrowser and they are often misunderstood and misused.
Quick Overview
prefetch The concept of prefetching is included in the HTML5 spec better used for loading resources (stylesheets,js,pictures etc) - that's because it loads into the cache as a subresource. When prefetching a page the browser downloads (once the current page is fully loaded) the top layer of the page that is linked (Iframes in the target page won't be prefetched). Prefetching an entire page may cause lack of performance. what's cool about prefetching is that the limits are way higher - Prefetching Process is per tab (not webbrowser instance), And you can set Many links for Prefetching (IE < 9 - Max 10 Links, Mozilla unknown).
prerender First Presented By Chrome and implemented by IE11 Later - when added to a page it will execute a page full loading process (on a hidden tab) of the linked page at the background - You can see it firing (once the main page is loaded) by looking at the Task manager (Chrome).
One of the big issues here are that a prerender process
is per instance of a browser (not per tabs open) that mean that in case another site is already opened and fired this process yours may be ignored OR delayed (it depends which browser).
Another interesting fact is that you can add only one "prerender" Link per page, if you add more they will be ignored - and if you are loading the prerender link dynamically you need to know there is an interval restrict issue (500ms - in Chrome).
Prerendering extends the concept of prefetching. Instead of just downloading the top-level resource, it does all of the work necessary to show the page to the user—without actually showing it until the user clicks. Prerendering behaves similarly to if a user middle-clicked on a link on a page (opening it in a background tab) and then later switched to that tab. However, in prerendering, that “background tab” is totally hidden from the user, and when the user clicks, its contents are seamlessly swapped into the same tab the user was viewing. From the user’s perspective, the page simply loads much faster than before.
Known ISSUES and IMPORTANT notes:
- Certain animations may not appear when the page is displayed. This is likely because they've already run while the page was loaded in the background.
- Timers may give unexpected results.
- Cookies, cached content, and changes made by asynchronous operations (such as IndexedDB and web storage) are retained.
- Private Browsing in some browsers will disable prerendering and prefetching ( "incognito" too ).
- Some Browsers Won't support HTTPS Links (IE > 11, gecko < 1.9.1, Chrome Won't).
- Chrome & IE won't support
HTTP Link: header - <meta http-equiv="Link" content="</images/big.jpeg>; rel=prefetch">
Prefetching Summary:
- Browsers: Is a part of HTML5 specs (Older IE < 9 acts as dns-prefetch).
- Loads To: as subresources of the current Tab into the cache.
- Limits: 10 links in IE11 (IE10 unknown, FireFox unknown).
- Life Time: 5min.
- Download Depth: Top layer only (of a webpage).
- Links: HTTP, HTTPS (IE > 10, Gecko > 1.9.1), No 'same origin' restrict.
- Dynamically: Supported.
Prerendering Summary:
- Browsers: Chrome, IE > 10.
- Loads To: Separate hidden Tab.
- Limits: 1 link - Will trigger one per instance of the browser.
- Life Time: Until another Prerendering process is fired (From any opened Tab).
- Download Depth: Full Page Load.
- Links: HTTP (HTTPS won't), No 'same origin' restrict.
- Dynamically: 500ms between each change.
Prefetching delayed or ignored:
- The target URL is not a HTTP GET XMLHTTPRequests - ignored (POST,PUT,DELETE)
- Downloading Something using mozila - delayed
- IE > 9 - More than 10 Links on the page - ignored
- Two browsers (Mozila) are opened competing on bandwidth - delayed
- Developer Tools open - ignored
- Private mode Enabled - ignored
- The target URL is a file download - ignored
Prerendering aborted or ignored/delayed:
- The target URL is not a HTTP GET XMLHTTPRequests - ignored (POST,PUT,DELETE)
- Another Prerender process is running - delayed (May be ignored)
- More than 1 Links on the page - ignored (only first will run)
- Browsers is competing on bandwidth - delayed
- Developer Tools Or 'incognito' - ignored
- The target URL is a file download - aborted
- In IE < 10: The user switches to a different tab or browser instance - aborted & erased
- HTMLAudio or Video in the page - aborted
- Popup/window creation - aborted
- Pages that trigger the malware warning - aborted
More