The prefetch preload feature of the Rel attribute in HTML5 is used

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:

Xml/html Code

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

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

Xml/html Code

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

Even in unsupported browsers, the use of this feature is not an error, but the browser cannot parse it,
So, if you feel that there is a way to anticipate the user's desired page (for example, if the user looks at the latest popular hot map, he may look at the first page and continue to the next page, which can be used to preload this feature). For example,

Xml/html Code

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

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

Xml/html Code

1. <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.

Xml/html Code

1. <meta http-equiv= ' X-dns-prefetch-control ' content= ' on ' >
2. <link rel= ' dns-prefetch ' href= ' http://g-ecx.images-amazon.com ' >
3. <link rel= ' dns-prefetch ' href= ' http://z-ecx.images-amazon.com ' >
4. <link rel= ' dns-prefetch ' href= ' http://ecx.images-amazon.com ' >
5. <link rel= ' dns-prefetch ' href= ' http://completion.amazon.com ' >
6. <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:

Xml/html Code

1. <link rel= ' subresource ' href= ' critical.js ' >
2. <link rel= ' subresource ' href= ' main.css ' >
3. <link rel= ' prefetch ' href= ' secondary.js ' >

In Firefox or in the META tag statement:

Xml/html Code

1. <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!

Xml/html Code

1. <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

Xml/html Code

1. <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:

JavaScript Code

1. var hint =document.createelement ("link")
2. Hint.setattribute ("rel", "PreRender")
3. Hint.setattribute ("href", "next-page.html")
4. document.getElementsByTagName ("Head") [0].appendchild (hint)

Original address: http://www.link588.com/html/wangyezhizuo/135759.html

The prefetch preload feature of the Rel attribute in HTML5 is used