三個不常見的 HTML5 實用新功能簡介

一、DNS 預解析快取

眾所周知，解析 DNS 是網站效能最佳化的比較重要的一部分，雖然載入時間不太長，但是很難壓縮起來。特別是為了並發下載資源而使用多個 CDN 網域來載入資源的大型網站，更不可忽視，每載入資源之前都要先進行 CDN 網域的 DNS 解析轉換。
如果採用 DNS 預加載，支援該功能的瀏覽器就會提前對該網域進行 DNS 解析並且快取一下，而不會在需要請求資源再進行解析。而且這個功能應用實在是太簡單：

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

淘寶網就應用了這項技術，你可以打開淘寶網，查看原始碼，最頂端就把他們的一些 CDN 伺服器進行了 DNS 解析快取。

二、資源預加載

資源預先加載有很多辦法，例如常見的圖片預加載，有採用 CSS 的背景圖片來預加載，大部分還是用 JS。目前 HTML5 提供了專門的資源預載方法，有兩個屬性：prefetch（預先讀取）和 prerender（預先渲染），分別由 Firefox 和 Chrome 瀏覽器支援。

1).PREFETCH 預先讀取
預讀取就是很常見的資源預加載，當前頁面加載完成之後，就會在後面偷偷的下載你指定的資源，一般是JS 、CSS 和圖片這類的，也可以下載頁面：

<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" />

注意，目前Firefox 瀏覽器支援此功能。

2).PRERENDER 預渲染
這個更厲害了，不僅偷偷的提前下載，而且還給你渲染出來，當用戶點擊鏈接的時候，立刻給你展現出來。

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

注意，目前 Chrome 支援這個功能。

搜素引擎其實是最需要這種預先讀取的功能的，因為他們非常確定用戶下一步要打開的頁面（搜尋結果頁面），所以當用戶輸入搜尋內容的時候，就可以提前把搜尋結果頁面的資源提前加載，而且應用程式之後，效果十分明顯。

目前相容性是個缺點，似乎只有Chrome 和Firefox 支持，而且用的rel 屬性是不同的，如果你想同時兼容兩個瀏覽器，可以寫成下面這樣：

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

此外，當然為了安全沒法跨域預載資源，可能沒辦法用在CDN 了。

三、Download 屬性

HTML5 的 Download 屬性用來強制瀏覽器下載對應文件，而不是開啟。 Chrome 和Firefox 等瀏覽器太過於強大，也許是為了增強用戶體驗，當用戶點擊的資源文件可以被它們識別的時候（例如pdf 會直接在瀏覽器打開，mp3、mp4 等媒體直接用瀏覽器內置播放器播放）。但有時候，使用者其實是希望直接下載而不是在瀏覽器上看看，這時就可以加上這個屬性，屬性值會對下載的檔案重新命名：

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

如果你確定這個資源是使用者一定會下載的，就可以加上這個屬性，還可以用JS 或手動改變想要儲存的檔名。

HTML5 還有很多其他特性，但是看了很久書和各種資料，很少見到上面三個又比較實用的屬性，拿出來分享一下。

更多三個不常見的 HTML5 實用新特性簡介相關文章請關注PHP中文網！