Shulou(Shulou.com)06/01 Report--

The main content of this article is to explain "what is HTML5 preloading". Interested friends may wish to take a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what HTML5 preloading is.

Preloading is a browser mechanism that uses browser idle time to pre-download / load pages / resources that the user is likely to browse next. When the user visits a preloaded link, if hit from the cache, the page can be rendered quickly

One direction of joint efforts between browser vendors and developers is to make websites faster. There are many well-known acceleration solutions: CSS sprites (CSS wizard, jigsaw puzzle) and image optimization, distributed configuration files (.htaccess), JS/ text file compression, CDN acceleration, and so on.

FireFox introduces a new website acceleration strategy: link preloading. What is link preloading? MDN describes as follows:

Preloading is a browser mechanism that uses browser idle time to pre-download / load pages / resources that users are likely to visit next. The page is provided to the collection that the browser needs to preload. After the browser has finished loading the current page, the page that needs to be preloaded will be downloaded in the background and added to the cache. When a user visits a preloaded link, the page renders quickly if it is hit from the cache.

Brief overview: based on user analysis, the website allows the browser to download the specified page / document / image at the backend to achieve super easy:

HTML5 preload label

Copy the code

The code is as follows:

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

Copy the code

The code is as follows:

Note: the https protocol is also supported.

When preloading is needed

Whether the site uses preloading or not depends on your needs, here are some suggestions:

-if a series of page slides are shown, you can preload 1 to 3 pages each.

-load images commonly used within the site

-preload the next page on the search results page

Block preloading

Firefox allows preloading mode to be disabled as follows:

Copy the code

The code is as follows:

User_pref ("network.prefetch-next", false)

Matters needing attention

With regard to link preloading, there are the following considerations:

-preloading can be performed across domains. Of course, information such as cookie will also be sent when a request is made.

-preloading may destroy website statistics, but users do not actually visit them.

-Mozilla Firefox is currently the only browser that supports preload mode, (2003-2010)

At this point, I believe you have a deeper understanding of "what HTML5 preloading is". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.