An introduction to three uncommon HTML5 practical new features_Experience exchange

2. Resource preloading

There are many ways to preload resources, such as common image preloading, CSS background images are used to preload, and most of them still use JS. Currently, HTML5 provides a specialized resource preloading method with two attributes: prefetch (prefetching) and prerender (prerendering), which are supported by Firefox and Chrome browsers respectively.

1).PREFETCH pre-reading
Pre-reading is a very common resource preloading. After the current page is loaded, the resources you specify will be secretly downloaded later, usually JS, CSS and images. Class, you can also download the page:

Note that this feature is currently supported by the Firefox browser.

2).PRERENDER Pre-rendering
This is even more powerful. It not only downloads it secretly in advance, but also renders it for you. When the user clicks on the link, it will be displayed to you immediately.

Note that Chrome currently supports this feature.

Search engines actually need this pre-reading function the most, because they are very sure of the page that the user will open next (the search results page), so when the user enters the search content, they can pre-read the search in advance. The resources on the result page are loaded in advance, and after application, the effect is very obvious.

Currently, compatibility is a shortcoming. It seems that only Chrome and Firefox support it, and the rel attributes used are different. If you want to be compatible with two browsers at the same time, you can write it as follows:

In addition, of course, resources cannot be preloaded across domains for security reasons, and may not be used in CDN.

3. Download attribute

The Download attribute of HTML5 is used to force the browser to download the corresponding file instead of opening it. Browsers such as Chrome and Firefox are too powerful, perhaps to enhance the user experience. When the resource file clicked by the user can be recognized by them (for example, pdf will be opened directly in the browser, and media such as mp3 and mp4 will be played directly within the browser) player playback). But sometimes, the user actually wants to download it directly instead of viewing it on the browser. In this case, this attribute can be added, and the attribute value will rename the downloaded file:

If you are sure that the user will definitely download this resource, you can add this attribute, and you can also use JS or manually change the name of the file you want to save.

HTML5 has many other features, but after reading books and various materials for a long time, I rarely see the above three more practical attributes, so I would like to share them.