HTML5 how to preload to quickly render a page

Pre-loading is a browser mechanism that uses browser idle time to preload/load pages/resources that the user is likely to browse next, and when a user accesses a preloaded link, the page is quickly rendered if the cache hits it.

One of the ways that browsers and developers work together is to make the site faster. There are already many well-known accelerated solutions: CSS Sprites (CSS sprites, puzzles) and image optimization, distributed configuration Files (. htaccess), js/text file compression, CDN acceleration, etc.

I introduced in another article posting how to make the site faster.

Firefox promotes a new web site Acceleration strategy: link preload. What is a link preload? MDN describes the following:

Preload is a browser mechanism that uses the browser's idle time to preload/load pages/resources that the user is likely to browse next. The page is provided to the browser to preload the collection. When the browser loads the current page, it downloads the pages that need to be preloaded in the background and adds them to the cache. When a user accesses a preloaded link, the page is rendered quickly if a hit is made from the cache.

Simple Overview: Web site based on user analysis, let the browser download the designated pages/Documents/pictures, to achieve super easy:

HTML5 Pre-loading label

The code is as follows:

<!--page, you can use absolute or relative path-->

<link rel= "prefetch" href= "page2.html"/>

<!--pictures, can also be other types of files-->

<link rel= "prefetch" href= "Sprite.png"/>

As you can see from the above HTML code, preload uses the <link> tag and specifies the rel= "prefetch" attribute, and the href property is the file path that needs to be preloaded. Mozilla also implements some of the similar link rel properties:

The code is as follows:

<link rel= "prefetch alternate stylesheet" title= "Designed for Mozilla" href= "Mozspecific.css"/>

<link rel= "Next" href= "2.html"/>

Note: The HTTPS protocol is also supported.

When pre-loading is required

Whether the site is preloaded depends on your needs, and here are some suggestions:

-If a series of page slides show the same, you can preload 1 to 3 pages before and after.

-load generic pictures inside the site

-Pre-loading the next page on the search results page

Blocking preload

Firefox allows you to disable the preload mode, as follows:

User_pref ("Network.prefetch-next", false);

Attention matters

For a link preload, there are the following considerations:

-preload can be done across domains, and, of course, information such as cookies are sent when the request is made.

-Preload can disrupt site statistics while users are not actually accessing it.

-Mozilla Firefox is the only browser that supports preload mode at the moment (2003-2010)

What do you think? Using free time to download additional files is a radical optimization