Introduction to three uncommon HTML5 practical features

  has been to 2014 years, and then HTML5 new features, it is enough late, but these few in the introduction of HTML5 book rarely seen, but can be easily applied on their own website, so specifically to introduce the

I. DNS pre-resolution caching   It is well known that DNS is an important part of the optimization of Web site performance, 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 too simple:     code as follows: <link rel= "Dns-prefetch" href= "http://cdn.staticfile.org/" > <link rel= " Dns-prefetch "href="//www.google-analytics.com >   Taobao on the application of this technology, you can open Taobao, look at the source code, the top of their CDN server for the DNS resolution cache.     II. resource preload   resource preload there are many ways, 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 is a very common resource preload, the current page load is completed, you will secretly download the resources you specify, generally JS, CSS and pictures of this category, you can download the page:     code as follows: <link rel= "PR Efetch "href=" http://blog.wpjam.com/"/> <link rel=" prefetch "href=" "Logo.png"/> <link rel= "prefetch" Alternate stylesheet "href=" mozspecific.css/>     Note that the current Firefox browser supports this feature.   2). PRERENDER pre-rendering this more powerful, not only secretly in advance download, but also for you to render out, when the user clicks on the link, immediately to youShow it.     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 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 after the application, the effect is very obvious.   Current compatibility is a disadvantage, seemingly only Chrome and Firefox support, and the use of REL properties are different, if you want to be compatible with two browsers, you can write the following:     code as follows: <link rel= " Prefetch prerender "href=" http://blog.wpjam.com/>   In addition, it may not be possible to use a CDN in order to safely not preload resources across domains. The   Download property   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 actually wants to download directly instead of looking in the browser, then can add this attribute, the attribute value will be renamed to the downloaded file:     code as follows: <a href= "downloadpdf.php" download= " Download.pdf "> Click to download and save into Download.pdf file </a>     If you are sure that this resource is the user will definitely download, you can add this attribute, you can also use JS or manually change the name of the file you want to save.     HTML5 has a lot of other features, but after a long time reading and various materials, I rarely see the above three and more practical properties and share them.