HTML5 Prefetch is preloaded

Original address

Statement: This article with its own understanding, not fully translated according to the original

Prefetch is pre-loaded, we load the required resources before the user needs them.

With the browser cache, why do I need to preload?

• The user may have visited the site for the first time, and there is no cache at this time
• The user may have emptied the cache
• The cache may have expired and the resource will reload
• User-accessed cache files may not be up-to-date and need to be reloaded

Pre-loading technology for Chrome

Now Chrome is smart enough to predict which websites you might visit or search based on your browsing history, and load some resources before you open the site.
For a chestnut, when you enter "Amaz" in the search box, it guesses that you might want to visit Amazon.com, possibly helping you load some of the resources for the site.
If the predictive algorithm is accurate, it can greatly improve the user's browsing experience.

DNS prefetch

We know that when we visit a website such as www.amazon.com, we need to convert the domain name into the corresponding IP address, which is a very time-consuming process.

DNS Prefetch analyzes the domain name of the resource that this page needs, and when the browser is idle, it translates the domain name into an IP address, and the time of the process is avoided when the resource is actually requested.

<meta http-equiv=‘x-dns-prefetch-control‘ content=‘on‘><link rel=‘dns-prefetch‘ href=‘http://g-ecx.images-amazon.com‘><link rel=‘dns-prefetch‘ href=‘http://z-ecx.images-amazon.com‘><link rel=‘dns-prefetch‘ href=‘http://ecx.images-amazon.com‘><link rel=‘dns-prefetch‘ href=‘http://completion.amazon.com‘><link rel=‘dns-prefetch‘ href=‘http://fls-na.amazon.com‘>

Scenario 1: Our resources exist in different cdns, and the domain name of these resources is declared well in advance, which saves the time of resolving the domain name when the request occurs.
Scenario 2: If we know that the user's next action will definitely initiate a request for a resource, then this resource can be dns-prefetch to enhance the user experience.

Resource prefetch

Under Chrome, we can use the link tag to declare a specific file's preload:

<link rel=‘subresource‘ href=‘critical.js‘><link rel=‘subresource‘ href=‘main.css‘><link rel=‘prefetch‘ href=‘secondary.js‘>

In Firefox or in the META tag statement:

<meta http-equiv="Link" content="<critical.js>; rel=prefetch">

Rel= ' Subresource ' means that the current page must load the resources, should be placed at the top of the page to load first, with the highest priority.

Rel= ' prefetch ' means that when all resources are subresource loaded, the resources specified here are pre-loaded with the lowest priority.

Note: Only cacheable resources can be preloaded, otherwise waste resources!

Pre Render

The pre-analytic DNS, pre-loaded resources are strong enough to have wood, but there are even more pre-rendering (pre-rendering)!

Pre-rendering means that we load the next page that the user is about to visit, otherwise pre-rendering this page will waste resources and use it with caution!

<link rel=‘prerender‘ href=‘http://www.pagetoprerender.com‘>

Rel= ' PreRender ' means that the browser will help us render but hide the specified page, and once we visit this page, the seconds are open!

In Firefox or using rel= ' next ' to declare

<link rel="next" href="http://www.pagetoprerender.com">

Not all resources can be preloaded

Pre-render actions are blocked when the resource is a resource in the following list:

• The URL contains download resources
• The page contains audio, video
• Ajax requests for POST, PUT, and DELETE operations
• HTTP Authentication (authentication)
• HTTPS page
• A page with malicious software
• Pop-up Window page
• Pages that occupy a lot of resources
• Open the Chrome Developer tools development tool

Manually triggering a pre-render operation

Insert link[rel= ' PreRender ' in the head strongly:

var hint =document.createElement("link")hint.setAttribute(“rel”,”prerender”)hint.setAttribute(“href”,”next-page.html”)document.getElementsByTagName(“head”)[0].appendChild(hint)

Compatibility

Such a useful feature, of course, to consider the compatibility of each browser (cry:

IE9 supports DNS pre-fetching but it is called prefetch.

Dns-prefetch and prefetch are equivalent in ie10+.

Other aspects of the test, there is no good plan, for the time being only by checking whether the browser cache to test.

Opening the chrome developer tools developer in chrome prevents pre-rendering of the page, so we don't see the process, but can be in chrome://cache/or chrome://net-internals/#prerender In the view.

Firefox can be viewed in About:cache.

Warning

These are specific or experimental in nature and may change in the future.

The greater the power, the greater the responsibility, do not abuse!

Reference links

Html5-prefetch
MDN controlling DNS prefetching
MDN Link prefetching FAQ

HTML5 Prefetch is preloaded