HTML5 Page Resource preload technology (Link prefetch) accelerates page loading

Whether it's a browser developer or a developer of a common web app, they're making a concerted effort: making Web browsing feel faster. There are many known technologies that can make your site faster: Use CSS sprites, use the image optimizer, use. htaccess to set page header information and cache time, JavaScript compression, use of CDN, etc. I have described some of the speed optimization techniques used on this site. In HTML5, there is a new feature to optimize website speed: page resource preload/Pre-read (Link prefetch).

What is page resource pre-load/Pre-read (Link prefetch)? An explanation from MDN:

Page Resource preloading (Link prefetch) is a technique provided by the browser to allow the browser to download or pre-read some document resources during idle time, and users will access these resources in the future. A Web page can set a series of pre-loading instructions to the browser, and when the browser loads the current page, it silently loads the specified documents in the background and stores them in the cache. When the user accesses these preloaded documents, the browser can be quickly extracted from the cache to the user.

In short, let the browser pre-load 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 pre-load (Link prefetch) notation

 <!--  pre-load entire page  -->  <  link  rel  = "prefetch"   href  = "http://www.webhek.com/misc/3d-album/"  />  <!--  pre-load a picture  -->  <  link  rel  = "prefetch"   href  = "Http://www.webhek.com/wordpress/wp-content/uploads/2014/04/b-334x193.jpg"  />  

The HTML5 page resource preload/Pre-read (Link prefetch) feature is Link implemented by tags and is rel属性 specified as "prefetch", where the href属性 address of the resource to be loaded is specified. Firefox also provides an additional property support:

<rel= "prefetch alternate stylesheet"  title= "Designed for Mozilla"  href= "mozspecific.css"/><rel= " Next "  href=" 2.html "/>

Prefetch can also be used under the HTTPS protocol resource.

What happens when the page resource should be preloaded

What resources are loaded on your page, and when to load, it's entirely up to you. Here are some suggestions:

• When the page has a similar service for slides, preload/pre-reads the next 1-3 pages and the previous 1-3 pages.
• Pre-load images that are common to the entire site.
• The next page of the search results on the pre-load site.

Disable page Resource preloading (Link prefetch)

Firefox has an option to disable any of the page resource preload (Link prefetch) features, which you can set:

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

Page resource preload (Link prefetch) considerations

Here are some things to note about page resource preloading (Link prefetch):

• Preload (Link prefetch) does not work across domains, including cross-domain pull cookies.
• Pre-loading (Link prefetch) can contaminate your site's traffic statistics, because some pages that are preloaded to the browser may not actually be accessible to the user.
• Firefox has been providing support for this pre-load (Link prefetch) technology since 2003.

HTML5 Page Resource preload technology (Link prefetch) accelerates page loading