How to use the preloading function of rel attribute in HTML5?

This chapter will show you how to use the preloading function of the rel attribute in HTML5? It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In HTML5, there is a very useful but often overlooked feature, which is prefetch. Its principle is:
Use the browser's idle time to first download the content specified by the user. , and then cache it, so that when the user loads it next time, it will be taken directly from the cache, and the efficiency will be faster.

Give an example: For example, if you want to preload a certain page, you can do this:

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

But if it is Google, you need to use another name, that is:

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

Even in a browser that does not support it, there will be no error when using this feature, but the browser will parse it. It’s just that, so if you think there is a way to predict the page that the user expects to click on in advance (for example, if the user looks at the latest popular heat map, he may look at the first page and then continue to look at the next page. At this time, You can use the preloading feature). For example:

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

It is also possible to take a separate picture, for example:

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

With the browser cache, Why do you need preloading?

1. The user may be visiting the website for the first time, and there is no cache at this time.
2. The user may have cleared the cache.
3. The cache may have expired, and the resources will be Reload
4. The cache file accessed by the user may not be the latest and needs to be reloaded
5. Chrome’s preloading technology

Now chrome is smart enough to based on your browsing history. Predict which websites you may visit or search for, and load some resources before you open the website.
For example, when you enter "amaz" in the search box, it guesses that you may want to visit amazon.com, and may load some resources from this website for you.
If this prediction 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 first , which is a very time-consuming process.
DNS prefetch analyzes the domain names where the resources required by this page are located, and converts these domain names into IP addresses in advance when the browser is idle. This avoids the time of the above process when actually requesting resources.

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

Application scenarios 1: Our resources exist in different CDNs. Declaring the domain names of these resources in advance can save the time of domain name resolution when requests occur.
Application scenario 2: If we know that the user's next operation will definitely initiate a request for a resource, then we can perform DNS-Prefetch on this resource to enhance the user experience.

Resource prefetch
Under Chrome, we can use the link tag to declare the preloading of specific files:

<link rel=&#39;subresource&#39; href=&#39;critical.js&#39;>  
<link rel=&#39;subresource&#39; href=&#39;main.css&#39;>  
<link rel=&#39;prefetch&#39; href=&#39;secondary.js&#39;>

In Firefox or Use the meta tag to declare:

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

rel='subresource' indicates that the resources that must be loaded on the current page should be placed at the top of the page and loaded first, with the highest priority.
rel='prefetch' means that when all resources of subresource are loaded, start preloading the resources specified here, with the lowest priority.
Note: Only cacheable resources are preloaded, otherwise resources are wasted!

Pre render
The pre-parsed DNS and pre-loaded resources mentioned earlier are powerful enough, but there is even more powerful pre-rendering. (Pre-rendering)!
Pre-rendering means that we load the next page that the user is about to visit in advance, otherwise pre-rendering this page will waste resources, use with caution!

<link rel=&#39;prerender&#39; href=&#39;http://www.pagetoprerender.com&#39;>

rel='prerender' means that the browser will help us render but hide the specified page. Once we visit this page, it will open instantly!
In Firefox or use rel='next' to declare

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

Not all resources can be preloaded

When resources The pre-rendering operation will be blocked when the resources in the following list are:
1. The URL contains download resources
2. The page contains audio and video
3. Ajax requests for POST, PUT and DELETE operations
4.HTTP Authentication
5.HTTPS page
6.Page containing malware
7.Pop-up page
8.Page that takes up a lot of resources
9.Open Use the chrome developer tools development tools

Manually trigger the pre-rendering operation

Insert link[rel='prerender'] strongly in the head :

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

The above is the detailed content of How to use the preloading function of rel attribute in HTML5?. For more information, please follow other related articles on the PHP Chinese website!