What is HTML5 resource preloading

This article mainly explains "what is HTML5 resource preload". The explanation content in this article is simple and clear, easy to learn and understand. Please follow the ideas of Xiaobian slowly and deeply to study and learn "what is HTML5 resource preload" together!

I have introduced some of the speed optimization techniques used on this site. In HTML5, there is a new feature to optimize website speed: Link prefetch.

What is Link prefetch? Explanation from MDN:

Link prefetch is a technique provided by browsers to download or prefetch document resources at idle time that users will access in the future. A Web page can set a series of preload instructions for the browser. 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 quickly fetch them from the cache to the user.

Simply put: let the browser preload other resources (pages, images, videos, etc.) that users are most likely to visit after visiting the current page. And the method is super simple!

HTML5 page resource preload (Link prefetch) writing

The code is as follows:

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

The code is as follows:

Prefetch can also be used under HTTPS protocol resources.

When should page resources be preloaded?

What resources to load on your page and when is entirely up to you. Here are some suggestions:

1. Preload/pre-read the next 1-3 pages and the previous 1-3 pages when the page has slidesh-like services.

2. Preload images that are common to the entire site.

3. Preload the next page of search results on the website.

Disable page resource preload (Link prefetch)

Firefox has an option to disable any Link prefetch feature. You can set it like this:

1.user_pref("network.prefetch-next", false);

2. Page resources preload (Link prefetch) Notes

Here are some considerations about Link prefetch:

1. Link prefetch does not work across domains, including pulling cookies across domains.

2. Link prefetch can taint your website traffic statistics because some of the pages preloaded into the browser may not actually be visited by users.

3. Firefox has supported this Link prefetch technology since 2003.

Thank you for reading, the above is "what is HTML5 resource preload" content, after the study of this article, I believe we have a deeper understanding of what is HTML5 resource preload this problem, the specific use of the situation also needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!