HTML5 pre-loading allows quick page presentation

Comments: Pre-loading is a browser mechanism that uses the free time of the browser to pre-download/load the page/resource that the user may browse next. When the user accesses a pre-loaded link, if you hit the page from the cache, it will be able to quickly present the way in which browser vendors and developers work together to make the website faster. There are many well-known acceleration solutions: CSS sprites (CSS genie, puzzles), image optimization, distributed configuration files (. htaccess), JS/Text File compression, CDN acceleration, etc.

In another blog, I introduced how to make your website faster.
FireFox introduces a new website acceleration policy: link pre-loading. What is link pre-loading? MDN is described as follows:

Pre-loading is a browser mechanism that uses the browser's free time to pre-download/load the pages/resources that users will likely browse next. The page is provided to the set that the browser needs to pre-load. After the browser loads the current page, it downloads the page to be preloaded in the background and adds it to the cache. When a user accesses a pre-loaded link, the page can be quickly displayed if it hits the cache.

Brief Introduction: based on user analysis, the website allows the browser to download specified pages/documents/images in the background to achieve super easy:

HTML5 pre-loaded labels

The Code is as follows:
<! -- Page, which can be an absolute or relative path -->
<Link rel = "prefetch" href = "page2.html"/>
<! -- Image, or other types of files -->
<Link rel = "prefetch" href = "sprite.png"/>


As shown in the preceding HTML code, the <link> label is used for pre-loading and the rel = "prefetch" attribute is specified. The href attribute is the file path to be preloaded. Mozilla also implements some similar link rel attributes:

The Code is as follows:
<Link rel = "prefetch alternate stylesheet" title = "Designed for Mozilla" href = "mozspecific.css"/>
<Link rel = "next" href = "2.html"/>

Note: https is also supported.

When to pre-load
Whether or not the website is preloaded depends on your needs. The following are some suggestions:
-If a series of page slides are displayed in the same way, you can pre-load one or three pages before and after each.
-Load Common images inside the website
-Pre-load the next page on the search result page

Block Preload
Firefox allows you to disable the pre-loading mode. The Code is as follows:

The Code is as follows:
User_pref ("network. prefetch-next", false );

Notes
Note the following for Link pre-loading:
-Pre-loading can be performed across domains. Of course, cookie and other information will also be sent during the request.
-Pre-loading may damage website statistics, but the user does not actually access the website.
-Mozilla Firefox is currently the only browser that supports the pre-loading mode (2003-2010)
What do you think? Using free time to download additional files is a radical Optimization