Detailed introduction to HTML5 resource preloading (Link prefetch) (accelerating your web pages)_html5 tutorial skills

I have introduced some speed optimization techniques used on this site. In HTML5, a new feature has emerged to optimize website speed: page resource preloading/prefetching (Link prefetch).

What is page resource preloading/prefetching (Link prefetch)? 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 in its free time, and the user will access these resources in the future. A web page can set a series of preload instructions for the browser. When the browser finishes loading the current page, it will silently load the specified documents in the background and store them in the cache. When a user accesses these preloaded documents, the browser can quickly retrieve them from the cache and provide them to the user.

To put it simply: let the browser preload other resources (pages, pictures, videos, etc.) that the user is likely to access after accessing the current page. And the method is super simple!

HTML5 page resource preloading (Link prefetch) writing method

Copy code

The code is as follows :

http://www.jb51.net/wordpress/
wp-content/uploads/2014/04/b-334x193.jpg " />

HTML5 page resources The preloading/prefetching (Link prefetch) function is implemented through the Link tag. Specify the rel attribute as "prefetch" and specify the address of the resource to be loaded in the href attribute. Firefox also provides an additional attribute support:

Copy the code

The code is as follows:

title="Designed for Mozilla" href="mozspecific.css" _fcksavedurl=""mozspecific.css"" />

prefetch can also be used under HTTPS protocol resources.

Under what circumstances should page resources be preloaded

What kind of resources are loaded in your page and when is completely up to you. Here are some suggestions:

1. When the page has a slideshow-like service, preload/preread the next 1-3 pages and the previous 1-3 pages.
2. Preload images that are common to the entire website.
3. Preload the next page of search results on the website.

Disable page resource preloading (Link prefetch)

There is an option in Firefox to disable 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 preloading (Link prefetch)

The following are some notes about page resource preloading (Link prefetch):

1. Link prefetch cannot work across domains, including pulling cookies across domains.
2. Preloading (Link prefetch) will pollute your website traffic statistics, because some pages preloaded to the browser may not be actually visited by users.
3. Firefox has provided support for this preloading (Link prefetch) technology since 2003.

Using the browser’s idle time to load some additional resource files seems exciting and dangerous. Do you want to try these techniques?