【轉】前端開發攻城師絕對不可忽視的五個HTML5新特性

看到美團用了<link href="//p0.meituan.net" rel="dns-prefetch">，搜索了下，發現這個文章，就轉了下來。

HTML5已經火了一段時間了，相信做爲web相關開發工程師，確定或多或少的瞭解和嘗試過一些HTML5的特性和編程。還記得之前咱們介紹過的HTML5新標籤。 做爲將來前端開發技術的潮流和風向標，HTML5絕對不容忽視。

在今天這篇技術分享文章中，咱們將介紹幾個HTML5的重要特性，可以幫助你提升整個web應用的使用體驗和開發效率，相信你們會感興趣的！

特性一：正則表達式

相信你們都會很是喜歡這個特性，無須服務器端的檢測，使用瀏覽器的本地功能就能夠幫助你判斷電子郵件的格式，URL，或者是電話格式，防止用戶輸入錯誤的信息，經過使用HTML5的pattern屬性，咱們能夠很方便的整合這個功能，代碼以下：

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

運行以下：

若是在Firefox瀏覽器中運行，而且輸入錯誤的email地址，就會用系統的ui提示錯誤

特性二：數據列表元素

在沒有HTML5的日子裏，咱們會選擇使用一些JS或者知名的jQuery UI來實現自動補齊的功能，而在HTML5中，咱們能夠直接使用datalist元素，以下：

<form action="/server" method="post">
    <input list="jslib" name="jslib" >
    <datalist id="jslib">
        <option value="jQuery">
        <option value="Dojo">
        <option value="Prototype">
        <option value="Augular">
    </datalist>
    <input type="submit" value="完成" />
</form>

運行代碼：

若是你輸入字母「j"，能夠看到自動補齊效果

特性三：下載屬性

HTML5的下載屬性能夠容許開發者強制下載一個頁面，而非加載那個頁面，這樣的話，你不須要實現服務器端的一些功能來達到一樣的效果，是否是很是貼心？

<a href="download_pdf.php" download="somefile.pdf">下載PDF文件</a>

特性四：DNS的預先加載處理

要知道DNS的的解析成本很高滴，每每致使了網站加載速度慢。如今瀏覽器針對這個問題開發了更智能的處理方式，它將域名緩存後，當用戶點擊其它頁面地址後自動的獲取。

若是你但願預先獲取DNS，你能夠控制你的瀏覽器來解析域名，例如：

<link rel="dns-prefetch" href="//www.gbtags.com">
<link rel="dns-prefetch" href="//www.gbin1.com">
<link rel="dns-prefetch" href="//m.gbin1.com">
<link rel="dns-prefetch" href="//s.gbin1.com">

特性五：連接網頁的預先加載處理

要知道連接可以在也頁面中幫助用戶導航，可是頁面加載的速度快慢決定了用戶體驗的好與壞，使用以下HTML5的prefetch屬性能夠幫助你針對指定的地址預加載頁面或者頁面中的特定資源，這樣用戶點擊的時候，會發現頁面加載速度提升了。

<link rel="prefetch" href="http://www.gbtags.com/gb/users.htm" />
<link rel="prefetch" href="http://www.gbtags.com/gb/networks/themes/img/logo_small.jpg" />

或者能夠使用prerender屬性，這個屬性可以幫助你提早加載整個頁面，以下：

<link rel="prerender" href="http://www.gbtags.com/gb/search.htm" />

經過設置這個屬性，登陸極客社區後，極客搜索頁面已經加載了，這樣若是你須要搜索，頁面會馬上加載，相信你的用戶確定喜歡訪問這樣的網站！
原文：前端開發攻城師絕對不可忽視的五個HTML5新特性