Detailed introduction to HTML5 resource preloading (Link prefetch)

This article mainly introduces the detailed introduction of HTML5 resource preloading (Link prefetch), which has a certain reference value. Now I share it with you. Friends in need can refer to it.

Regardless of the browser Developers are still developers of ordinary web applications. They are all making a common effort: to make web browsing feel faster. There are many known techniques that can make your website faster: using CSS sprites, using image optimization tools, using .htaccess to set page header information and cache time, JavaScript compression, using CDN, etc.

I've introduced some of the 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 that the user will visit in the future. these resources. 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:

<!-- 预加载整个页面 -->
<link rel="prefetch" href="http://www.jb51.net/misc/3d-album/" /></p>
<p><!-- 预加载一个图片 -->
<link rel="prefetch" href=" <a href="http://www.jb51.net/wordpress/">http://www.jb51.net/wordpress/</a>
wp-content/uploads/2014/04/b-334x193.jpg " />

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

Copy code

The code is as follows:

<link rel="prefetch alternate stylesheet" 
title="Designed for Mozilla" href="mozspecific.css" _fcksavedurl=""mozspecific.css"" />
<link rel="next" 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 in your page and when to load them is entirely 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. Preloading (Link prefetch) cannot work across domains, including pulling cookies across domains.
2. Preloading (Link prefetch) will pollute your website traffic statistics, because users may not actually access some pages that are preloaded into the browser.
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?

The above is the detailed content of Detailed introduction to HTML5 resource preloading (Link prefetch). For more information, please follow other related articles on the PHP Chinese website!