Five HTML5 features help you get twice the result with half the effort

The emergence of HTML5 has brought many new and interesting JavaScript and HTML APIs to Web apps and mobile App development. This article will introduce five HTML5 features that help you get twice the result with half the effort.

1. DNS Prefetching

DNS host name resolution may slow down the website speed. Modern browsers are already very smart when it comes to DNS resolution-before a user follows a link, the browser first tries to resolve the domain name and then caches it.

The DNS Prefetching feature allows developers to manually control the domain name to be resolved by the browser. The Code is as follows:

 

1234 <link rel= "dns-prefetch"  href= "//fonts.googleapis.com" > <link rel= "dns-prefetch"  href= "//google-analytics.com" > <link rel= "dns-prefetch"  href= "//www.google-analytics.com" > <link rel= "dns-prefetch"  href= "//platform.twitter.com" >

 

2. Link Prefetching

The Link Prefetching feature allows developers to pre-load the pages or elements they want to specify when loading pages. The Code is as follows:

12 <link rel= "prefetch"  href= "http://daker.me/2013/05/hello-world.html"  /> <link rel= "prefetch"  href= "http://daker.me/assets/images/avatar.png"  />

 

You can also use the prerendering feature to make your website faster. The browser can obtain and render the entire page in the background, and the page will be displayed when the user clicks the corresponding link. The Code is as follows:

1 <link rel= "prerender"  href= "http://daker.me/2013/05/hello-world.html"  />

 

3. Download attributes

With the Download attribute of HTML5, developers can Download objects directly instead of downloading objects on a specific page. This operation can be executed without relying on the server code. The Code is as follows:

1 <a href= "download_pdf.php?id=15"  download= "myfile.pdf" >Download PDF</a>

 

4. Regular Expressions

Once you enter a valid email or URL address, the pattern attribute allows you to directly use regular expressions without checking JS or server code. The Code is as follows:

1 <input type= "email"  pattern= "[^ @]*@[^ @]*"  value= "" >

 

5. Datalist Element

If you use the jQuery plug-in to perform the auto-fill input operation, you need to access the server code and database every time you press the keyboard. With the Datalist element, developers do not have to use the jQuery plug-in to complete this operation. The Code is as follows:

123456789101112 <form action= "form.php"  method= "post" >      <input list= "cars"  name= "cars"  >      <datalist id= "cars" >          <option value= "Volvo" >          <option value= "BMW" >          <option value= "Bugatti" >          <option value= "Cadillac" >          <option value= "Chevrolet" >          <option value= "Chrysler" >      </datalist>      <input type= "submit"  /> </form>

 

(Compilation/edited by Yang Yifan/Zhang Ning)

Source: Adnane Belmadiaf's Blog