一、DNS 預(yù)解析緩存
眾所周知，解析 DNS 是網(wǎng)站性能優(yōu)化的比較重要的一部分，雖然加載時(shí)間不太長(zhǎng)，但是很難壓縮起來。特別是為了并發(fā)下載資源而使用多個(gè) CDN 域名來加載資源的大型網(wǎng)站，更不可忽視，每加載資源之前都要先進(jìn)行 CDN 域名的 DNS 解析轉(zhuǎn)換。
如果采用 DNS 預(yù)加載，支持該功能的瀏覽器就會(huì)提前對(duì)該域名進(jìn)行 DNS 解析并且緩存一下，而不會(huì)在需要請(qǐng)求資源再進(jìn)行解析。而且這個(gè)功能應(yīng)用實(shí)在是太簡(jiǎn)單：
復(fù)制代碼 代碼如下:
link rel="dns-prefetch" >
link rel="dns-prefetch" >
淘寶網(wǎng)就應(yīng)用了這項(xiàng)技術(shù)，你可以打開淘寶網(wǎng)，查看源代碼，最頂端就把他們的一些 CDN 服務(wù)器進(jìn)行了 DNS 解析緩存。
二、資源預(yù)加載
資源預(yù)加載有很多辦法，例如常見的圖片預(yù)加載，有采用 CSS 的背景圖片來預(yù)加載，大部分還是用 JS。目前 HTML5 提供了專門的資源預(yù)加載方法，有兩個(gè)屬性：prefetch（預(yù)讀?。┖?prerender（預(yù)渲染），分別被 Firefox 和 Chrome 瀏覽器支持。
1).PREFETCH 預(yù)讀取
預(yù)讀取就是很常見的資源預(yù)加載，當(dāng)前頁(yè)面加載完成之后，就會(huì)在后面偷偷的下載你指定的資源，一般是 JS 、CSS 和 圖片 這類的，也可以下載頁(yè)面：
復(fù)制代碼 代碼如下:
link rel="prefetch" />
link rel="prefetch" />
link rel="prefetch alternate stylesheet" href="mozspecific.css" />
注意，目前 Firefox 瀏覽器支持這個(gè)功能。
2).PRERENDER 預(yù)渲染
這個(gè)更厲害了，不僅偷偷的提前下載，而且還給你渲染出來，當(dāng)用戶點(diǎn)擊鏈接的時(shí)候，立刻給你展現(xiàn)出來。
復(fù)制代碼 代碼如下:
link rel="prerender" />
注意，目前 Chrome 支持這個(gè)功能。
搜素引擎其實(shí)是最需要這種預(yù)讀取的功能的，因?yàn)樗麄兎浅４_定用戶下一步要打開的頁(yè)面（搜索結(jié)果頁(yè)面），所以當(dāng)用戶輸入搜索內(nèi)容的時(shí)候，就可以提前把搜索結(jié)果頁(yè)面的資源提前加載，而且應(yīng)用之后，效果十分明顯。
目前兼容性是個(gè)缺點(diǎn)，貌似只有 Chrome 和 Firefox 支持，而且用的 rel 屬性是不同的，如果你想同時(shí)兼容兩個(gè)瀏覽器，可以寫成下面這樣：
復(fù)制代碼 代碼如下:
link rel="prefetch prerender" />
此外，當(dāng)然為了安全沒法跨域預(yù)加載資源，可能沒法用在 CDN 了。
三、Download 屬性
HTML5 的 Download 屬性用來強(qiáng)制瀏覽器下載對(duì)應(yīng)文件，而不是打開。Chrome 和 Firefox 等瀏覽器太過于強(qiáng)大，也許是為了增強(qiáng)用戶體驗(yàn)，當(dāng)用戶點(diǎn)擊的資源文件可以被它們識(shí)別的時(shí)候（例如 pdf 會(huì)直接在瀏覽器打開，mp3、mp4 等媒體直接用瀏覽器內(nèi)置播放器播放）。但有時(shí)候，用戶其實(shí)是希望直接下載而不是在瀏覽器上看看，這時(shí)就可以加上這個(gè)屬性，屬性值會(huì)對(duì)下載的文件重命名：
復(fù)制代碼 代碼如下:
a href="downloadpdf.php" download="download.pdf">點(diǎn)擊直接下載并保存成 download.pdf 文件/a>
如果你確定這個(gè)資源是用戶肯定會(huì)下載的，就可以加上這個(gè)屬性，還可以用 JS 或者手動(dòng)改變想要保存的文件名。
HTML5 還有很多其他特性，但是看了很長(zhǎng)時(shí)間書和各種資料，很少見到上面三個(gè)又比較實(shí)用的屬性，拿出來分享一下。
您可能感興趣的文章:- JS+HTML5本地存儲(chǔ)Localstorage實(shí)現(xiàn)注冊(cè)登錄及驗(yàn)證功能示例
- 使用jquery讀取html5 localstorage的值的方法
- 詳解C#之事件
