How do I use the HTML5 feature of the Rel property in the?

This chapter brings you to the HTML5 how to use the Rel property in the pre-loading function? Have a certain reference value, the need for friends can refer to, I hope to help you.

In HTML5, there is a very useful but often overlooked feature, which is pre-loading (prefetch), which has the following principles:
Use the browser's idle time to download the user-specified content first, and then cache it, so that the next time the user loads, it will be removed directly from the cache, the efficiency is fast.

For example: to preload a page, you can:

<link rel= "prefetch" href= "http://www.example.com/" > <!--Firefox--

But if it is Google, use a different name, namely:

<link rel= "PreRender" href= "http://www.example.com/" > <!--Chrome--

Even in unsupported browsers, the use of this feature is not a mistake, but the browser can not parse it, so if you feel that there is a way to anticipate the user's desired point of the page (such as the user to see the latest popular hot map, he may read the first page, will continue to look at the next page, This feature can be preloaded at this time). For example:

<link rel= "prefetch" href= "<?php Echo get_next_posts_page_link ()?>" >

It is also possible to take a single picture, such as:

<link rel= "prefetch" href= "/images/test.jpg"/>

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

1. The user may be visiting the site for the first time and there is no cache at this time
2. The user may have emptied the cache
3. The cache may have expired and the resource will reload
4. User-accessed cache files may not be up-to-date and need to be reloaded
Pre-loading technology for 5.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:
Download Resources Included in 1.URL
2. The page contains audio, video
Ajax requests for 3.POST, PUT, and DELETE operations
4.HTTP Certification (authentication)
5.HTTPS page
6. Pages containing malicious software
7. Pop-up window page
8. Pages that occupy a lot of resources
9. 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)