HTML5 pre-loading

One way to work together between browser vendors and developers is 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:

 

[Plain]
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.

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

 

[Html]
<! -- 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"/>

<! -- 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, preload the <link> label and specify the rel = "prefetch" attribute, the href attribute is the file path to be preloaded. Mozilla also implements some similar link rel attributes:

 

[Html]
<Link rel = "prefetch alternate stylesheet" title = "Designed for Mozilla" href = "mozspecific.css"/>
<Link rel = "next" href = "2.html"/>

<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:
[Javascript]
User_pref ("network. prefetch-next", false );

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. If you have any questions, please contact me.