An introduction to three uncommon HTML5 practical new features_Experience exchange

1. DNS pre-resolution cache

As we all know, DNS resolution is an important part of website performance optimization. Although the loading time is not too long, it is difficult to compress it. Especially for large websites that use multiple CDN domain names to load resources in order to download resources concurrently, it cannot be ignored. DNS resolution conversion of the CDN domain name must be performed before each resource is loaded.
If DNS preloading is used, browsers that support this feature will perform DNS resolution on the domain name in advance and cache it, instead of resolving the resource when it needs to be requested. And the application of this function is really simple:

Copy code The code is as follows:

Taobao has applied this technology. You can open Taobao and view the source code. At the top, some of their CDN servers perform DNS resolution and caching.

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:

Copy code The code is as follows:

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.

Copy code The code is as follows:

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:

Copy code The code is 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:

Copy code The code is as follows:

Click to download directly and save it as download .pdf 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.