HTML5 preloading allows the page to be rendered quickly_html5 tutorial tips

One direction in which browser manufacturers and developers work together is to make websites faster. There are many well-known acceleration solutions: CSS sprites (CSS sprites, puzzles) and image optimization, distributed configuration files (.htaccess), JS/text file compression, CDN acceleration, etc.

I introduced how to make your website faster in another blog post.
FireFox introduces a new website acceleration strategy: link preloading. What is link preloading? MDN describes it as follows:

Preloading is a browser mechanism that uses browser idle time to pre-download/load pages/resources that the user is likely to browse next. The page provides the browser with a collection that needs to be preloaded. After the browser completes loading the current page, it will download the pages that need to be preloaded in the background and add them to the cache. When a user accesses a preloaded link, if it is hit from the cache, the page will be rendered quickly.

Simple overview: Based on user analysis, the website allows the browser to download specified pages/documents/images in the background. It is super easy to implement:

HTML5 preload tags

Copy code

The code is as follows:

As can be seen from the above HTML code, preloading uses the tag and specifies rel="prefetch" attribute, and the href attribute is the file path that needs to be preloaded. Mozilla has also implemented some similar link rel attributes:

Copy the code

The code is as follows:

Note: https protocol is also supported.

When to preload
Whether a website uses preloading depends on your needs, here are some suggestions:
- If a series of page slides are displayed the same, Then you can preload 1 to 3 pages before and after.
- Load common images within the website
- Preload the next page on the search results page

Block preloading
Firefox allows disabling preloading mode, the code is as follows:

Copy the code

The code is as follows:

user_pref("network.prefetch-next", false);

Notes
Regarding link preloading, there are the following notes:
- Preloading can be done across domains. Of course, cookies and other information will also be sent when requesting.
- Preloading can corrupt website statistics without the user actually visiting.
- Mozilla Firefox is currently the only browser that supports preloading mode, (2003-2010)
What do you think? Using idle time to download additional files is a radical optimization