Shulou(Shulou.com)06/03 Report--

This article mainly introduces the use of prefetch and prerender in Html5. It is very detailed and has a certain reference value. Friends who are interested must finish reading it.

Prerender / prefetch

In fact, it is to improve the loading speed of the web page, but it has been achieved through preloading, a way to improve the user's feeling, for example, the user stays on the home page for 2s, in which we have already loaded a page that the user may want to open. Then the user will open it very quickly. The feeling to the user is also excellent.

Explanation of HTML5 Prerender / Prefetch nouns

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.

To put it simply, caching the resources of the next web page is a new feature of HTML5. The browsers supported are Chrome (after 13), 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 an invention of Google, which is promoting users to reduce the waiting of users when loading, and to load articles such as "next page" through the nearest matching principle. For example, the best recommendation is that when users visit page A, page B is preloaded on the next page that users are most likely to visit, so as to improve the loading speed. Supported browsers include Chrome and IE11.

Usage

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

The first method is to add the above link 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/'); these are all the contents of the article "what are prefetch and prerender in Html5?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.