三個不常見的 HTML5 實用新功能簡介_經驗交流

WBOY
發布: 2016-05-16 12:03:47
原創
1924 人瀏覽過

一、DNS 預解析快取

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

複製程式碼程式碼如下:




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


二、資源預載

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

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

複製程式碼程式碼如下:



注意,目前 Firefox 瀏覽器支援這個功能。

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

複製程式碼程式碼如下:

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

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

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

複製程式碼程式碼如下:

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

三、Download 屬性

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

複製程式碼程式碼如下:

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


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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!