Three uncommon HTML5 Practical new features _ Experience Exchange

I. DNS pre-resolution caching

As we all know, parsing DNS is an important part of Web site performance optimization, although the load time is not too long, but it is difficult to compress. In particular, in order to download resources and the use of multiple CDN domain name to load the resources of the large web site, but also can not be ignored, each load resources before the DNS domain name of the CDN transformation.
If you use DNS preload, browsers that support this feature will DNS resolve the domain name in advance and cache it without requesting a resource for resolution. And the application of this function is simply too simple:

Copy Code code as follows:

<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, look at the source code, the top of their CDN server for the DNS resolution cache.

Ii. Pre-loading of resources

There are many ways to preload resources, such as the common picture preload, there is the use of CSS background image to preload, most of the use of JS. Currently HTML5 provides a dedicated resource preload method with two properties: prefetch (pre-read) and PreRender (pre-rendering), which are supported by Firefox and Chrome browsers respectively.

1). PREFETCH Pre-read
Pre-read is a very common resource preload, the current page after loading, you will secretly download the resources you specify, generally JS, CSS and pictures of this category, you can download the page:

Copy Code code as follows:

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

Note that the current Firefox browser supports this feature.

2). PRERENDER Pre-rendering
This is more powerful, not only secretly in advance of the download, but also for you to render out, when the user clicks on the link, immediately show you out.

Copy Code code as follows:

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

Note that Chrome currently supports this feature.

Search engine is in fact the most need this kind of prefetching function, because they are very determined the user next to open the page (search results page), so when the user input search content, you can advance the search results page resources ahead of the load, and application, the effect is very obvious.

Current compatibility is a disadvantage, seemingly only Chrome and Firefox support, and the Rel attribute is different, if you want to be compatible with two browsers, you can write the following:

Copy Code code as follows:

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

In addition, of course, in order to secure the cross-domain preload of resources, may not be used in the CDN.

Third, Download properties

The HTML5 Download property 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 user clicks on a resource file that can be identified by them (for example, the PDF will be opened directly in the browser, MP3, MP4, and other media directly in the browser's built-in player). But sometimes, the user wants to download directly instead of looking at the browser, then you can add this attribute, the property value will be renamed to the downloaded file:

Copy Code code as follows:

<a href= "downloadpdf.php" download= "Download.pdf" > click directly to download and save as download.pdf file </a>

If you are sure that this resource will be downloaded by the user, you can add this attribute, or you can use JS or manually change the name of the file you want to save.

HTML5 has a lot of other features, but read a long time book and various materials, rarely see the above three and more practical properties, take out to share.