Html5 What is prefetch/prerender? Introducing prefetch/prerender in Html5

The title of the article, "Born for Affiliate" is actually an exaggeration.

prerender / prefetch

is actually to improve the loading speed of web pages, but it has always been achieved through preloading. Ways to improve user experience, for example, if a user stays on the homepage for 2 seconds, and within these 2 seconds we have already loaded a page that the user may want to open, then the user will open it very quickly. The user experience is also excellent

HTML5 Prerender / Prefetch noun explanation

prefetch usage:

It should be used for fetching and caching resources for later user navigation as per the official HTML5 spec (i.e. prefetching a css file to be used in a page which highly likely to be used by the user in his upcoming navigation). Supported in Chrome, Firefox & IE.

Simply put it iscachingnext web page The resource is a new feature of HTML5. The supported browsers are Chrome (13 and later), Firefox, IE 11

prerender usage:

It should be used for prerendering a complete page that the user will highly likely navigate to it in his upcoming navigation (i.e. like prerendering the next article where it is highly likely that the user will click on “next article” button). Supported only in Chrome & IE.

Prerender is from Google An invention that is improving users and reducing the user's waiting time during loading, loading articles such as "next page" through the closest matching principle. For example, the best recommendation, when a user visits page A, the next page that the user is most likely to visit If B is on a page, then preload page B to achieve the effect of improving the loading speed. The supported browsers are Chrome and IE11

How to use

is actually part of the HTML 5 spec.
appears to be Google doing their own thing.

The first method is to link the above link Add to xxx

The second method is to use JS code injection;

var myHead = document.getElementsByTagName(‘head’)[0];
var myLink = document.createElement(‘link’);
myLink.setAttribute(‘rel’, ‘prerender’);
myLink.setAttribute(‘href’, ‘http://apple.com/ipad’);
myHead.appendChild(myLink);

or use the Jquery method:

$(“head”).append(‘www.guoli.biz/’);

If you have any questions, please leave a message

【Related recommendations】

1. Free h5 online video tutorial

2. HTML5 full version manual

3 . php.cnOriginal html5 video tutorial

The above is the detailed content of Html5 What is prefetch/prerender? Introducing prefetch/prerender in Html5. For more information, please follow other related articles on the PHP Chinese website!