An introduction to three uncommon HTML5 useful new features

1. DNS pre-resolution cache

As we all know, resolving DNS 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 it when resources need to be requested. And the application of this function is too simple:

<link rel="dns-prefetch" href="http://cdn.staticfile.org/">
<link rel="dns-prefetch" href="//www.google-analytics.com">

Taobao has applied this technology. You can open Taobao, view the source code, and some of their CDN servers have been DNS parsed and cached at the top.

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. You can also download the page:

<link rel="prefetch" href="http://blog.wpjam.com/" />
<link rel="prefetch" href="http://wpjam.qiniudn.com/wpjam/logo.png" />
<link rel="prefetch alternate stylesheet" href="mozspecific.css" />

Note that the Firefox browser currently supports this feature.

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 the link, it will be displayed to you immediately.

<link rel="prerender" href="http://blog.wpjam.com/" />

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 read the search results in advance The resources of the 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:

<link rel="prefetch prerender" href="http://blog.wpjam.com" />

In addition, of course it cannot be crossed for security reasons Domain preloading resources 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 to play). But sometimes, the user actually wants to download it directly instead of viewing it on the browser. At this time, you can add this attribute, and the attribute value will rename the downloaded file:

<a href="downloadpdf.php" download="download.pdf">点击直接下载并保存成 download.pdf 文件</a>

If you are sure that this resource is the user's If you download it, 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.

For more introductions to three uncommon HTML5 practical new features, please pay attention to the PHP Chinese website for related articles!