三個不常見的HTML5實用新特性簡介

都已經到了 2014 年了，再來說 HTML5 的新特性，實在是夠晚了，不過這幾個在介紹 HTML5 的書上很少見到，但又可以方便的應用在自己的網站上，所以特地來介紹一下 一、DNS 預解析緩存

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

代碼如下: <link rel="dns-prefetch" > <link rel="dns-prefetch" >

淘寶網就應用了這項技術，你可以打開淘寶網，查看源代碼，最頂端就把他們的一些 CDN 服務器進行了 DNS 解析緩存。

二、資源預加載

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

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

代碼如下: <link rel="prefetch" /> <link rel="prefetch" /> <link rel="prefetch alternate stylesheet" href="mozspecific.css" />

注意，目前 Firefox 瀏覽器支持這個功能。

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

代碼如下:<link rel="prerender" />

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

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

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

代碼如下:<link rel="prefetch prerender" />

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

三、Download 屬性

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

代碼如下: <a href="downloadpdf.php" download="download.pdf">點擊直接下載并保存成 download.pdf 文件</a>

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

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

本文來源于成都網站建設公司與成都網站設計制作公司-創新互聯成都公司！

網頁名稱：三個不常見的HTML5實用新特性簡介
轉載來源：http://m.kartarina.com/news18/317568.html

成都網站建設公司_創新互聯，為您提供ChatGPT、品牌網站建設、搜索引擎優化、移動網站建設、網頁設計公司、定制網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯