Comment: Whether it is a browser developer or a normal web application developer, they are all making a joint effort: to make web browsing feel faster. There are many known techniques that can make your website faster: use CSS sprites, use image optimization tools, use .htaccess to set page header information and cache time, JavaScript compression, use CDN, etc.
I have introduced some speed optimization techniques used on this site. In HTML5, a new feature has emerged to optimize website speed: page resource preload/pre-read (Link prefetch).
What is page resource preload/pre-read (Link prefetch)? Explanation from MDN:
Page resource preloading (Link prefetch) is a skill provided by the browser, which is designed to allow the browser to download or pre-read some document resources during free time, and users will access these resources in the future. A web page can set a series of preload instructions for the browser. When the browser loads the current page, it will quietly load the specified documents in the background and store them in the cache. When the user accesses these preloaded documents, the browser can quickly extract them from the cache to the user.
Simply put, it is: let the browser preload other resources (pages, pictures, videos, etc.) that the user is most likely to access after accessing the current page. And the method is super simple!
HTML5 page resource preload (Link prefetch) writing method
<!-- Preload the entire page-->
<link href="http://www.vevb.com/misc/3d-album/" /></p><p><!-- Preload a picture-->
<link href=" <a href="http://www.vevb.com/wordpress/"></a>
wp-content/uploads/2014/04/b-334x193.jpg " />
HTML5 page resource preload/pre-read (Link prefetch) function is implemented through Link tags. The rel attribute is specified as prefetch and the address to be loaded in the href attribute. Firefox browser also provides an additional attribute support:
<link
title="Designed for Mozilla" href="mozspecific.css" _fcksavedurl=""mozspecific.css"" />
<link href="2.html" />
Prefetch can also be used under HTTPS protocol resources.
Under what circumstances should page resources be preloaded
What kind of resources are loaded on your page and when it is all up to you. Here are some suggestions:
1. When the page has a slide-like service, preload/pre-read the next 1-3 pages and the previous 1-3 pages.
2. Preload those pictures that are common to the entire website.
3. Preload the next page of search results on the website.
Prohibit page resource preloading (Link prefetch)
There is an option in Firefox browser to prohibit any page resource preloading (Link prefetch) function. You can set it like this:
1.user_pref(network.prefetch-next, false);
2. Precautions for page resource preload (Link prefetch)
Here are some notes about page resource preloading (Link prefetch):
1. Preload (Link prefetch) cannot work across domains, including pulling cookies across domains.
2. Preloading (Link prefetch) will pollute your website visit statistics, because some pages preloaded to the browser may not be actually visited by users.
3. Firefox browser has provided support for this preload (Link prefetch) technology since 2003.
Using the browser's free time to load some extra resource files, it looks both exciting and dangerous. Do you want to try these technologies?