Describes how to use the prefetch preload function of the rel attribute in HTML5, html5rel

Describes how to use the prefetch preload function of the rel attribute in HTML5, html5rel

This article describes how to use the prefetch function of the rel attribute in HTML5. Especially when the browser on the Web page has no cache for the first time, the prefetch can be used for acceleration. For more information, see

In HTML5, a very useful but often overlooked feature is prefetch. Its principle is:
The browser's free time is used to download the content specified by the user and then cache the content. This way, the user can directly obtain the content from the cache next time the user loads the file, and the efficiency is faster.

For example, to pre-load a page, you can:

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

However, if it is google, use another name, namely:

 

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

Even in browsers that do not support this feature, it will not be wrong, but the browser cannot parse it,
Therefore, if you feel that you can predict the page expected by the user in advance (for example, if the user looks at the latest popular heat map, he may continue to read the next page after reading the first page, this feature can be preloaded at this time ). for example

Copy XML/HTML Code to clipboard

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

It is also possible to retrieve an image separately, for example:

Copy XML/HTML Code to clipboard

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

Why do I need to pre-load the browser cache?
1. The user may be visiting the website for the first time and there is no cache
2. The user may have cleared the cache.
3. the cache may have expired and the resource will be reloaded.
4. the cached files accessed by the user may not be up-to-date and need to be reloaded.
5. Chrome's pre-loading technology
Currently, chrome is smart enough to predict which websites you may visit or search based on your browsing history. Some resources are loaded before you open the website.
For example, when you enter "amaz" in the search box, it guesses that you may want to access amazon.com, which may help you load some resources of this website.
If this prediction algorithm is accurate, it will greatly improve the user's browsing experience.

DNS prefetch
We know that when we access a website such as www.2CTO.com, we need to first convert this domain name to the corresponding IP address, which is a very time-consuming process.
DNS prefetch analyzes the Domain Name of the resources required on this page. When the browser is idle, it will convert these domain names into IP addresses in advance, which avoids the above process when actually requesting resources.

Copy XML/HTML Code to clipboard

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'

 

Application Scenario 1: our resources exist in different cdns. If we declare the domain names of these resources in advance, we can save the time for domain name resolution when requests occur.
Application Scenario 2: If we know that the user's subsequent operations will initiate a resource request, we can perform DNS-Prefetch on this resource to enhance the user experience.

Resource prefetch
In Chrome, we can use the link label to declare the pre-loading of a specific file:

Copy XML/HTML Code to clipboard

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

In Firefox or with meta tag declaration:

Copy XML/HTML Code to clipboard

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

Rel = 'subresource' indicates the resources that must be loaded on the current page. It should be loaded first at the top of the page, with the highest priority.
Rel = 'prefetch' indicates that when all the subresource resources are loaded, the specified resources are preloaded with the lowest priority.
Note: Only cache-able resources are pre-loaded; otherwise, resources are wasted!

Pre render
The Pre-resolution DNS and Pre-loading resources mentioned above are already powerful enough, but there are more advanced Pre-rendering resources )!
Pre-rendering means that we load the next page that the user will visit in advance. Otherwise, pre-rendering this page will waste resources and use it with caution!

Copy XML/HTML Code to clipboard

1. <link rel = 'prerender 'href = 'HTTP: // www.pagetoprerender.com '>

Rel = 'prerender' indicates that the browser will render but hide the specified page. Once we access this page, the browser will open in seconds!
Use rel = 'Next' in Firefox to declare

Copy XML/HTML Code to clipboard

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

Not all resources can be preloaded.
When the resource is a resource in the following list, the pre-rendering operation is blocked:
1. the URL contains the downloaded resource.
2. The page contains audio and video
3. ajax requests for POST, PUT, and DELETE operations
4. HTTP Authentication)
5. HTTPS page
6. pages containing malware
7. Pop-up page
8. pages that occupy a lot of resources
9. Opened the chrome developer tools development tool.

Manually trigger the pre-rendering operation
Insert link [rel = 'prerender'] in the header:

Copy the content to the clipboard using JavaScript Code

1. var hint = document. createElement ("link ")
2. hint. setAttribute ("rel", "prerender ")
3.hint.setattribute({href},”next-page.html ")
4.doc ument. getElementsByTagName ("head") [0]. appendChild (hint)