HTML5資源預先載入(Link prefetch)詳細介紹（給你的網頁加速）_html5教學技巧

我曾經介紹過本站上使用的一些速度最佳化技術。而在HTML5裡，出現了一個新的用來最佳化網站速度的新功能：頁面資源預先載入/預先讀取(Link prefetch)。

頁面資源預先載入/預讀取(Link prefetch)是什麼？來自MDN的解釋:

頁面資源預先載入(Link prefetch)是瀏覽器提供的技巧，目的是讓瀏覽器在空閒時間下載或預先讀取一些文件資源，使用者在未來將會存取這些資源。一個Web頁面可以對瀏覽器設定一系列的預先載入指示，當瀏覽器載入完當前頁面後，它會在後台靜悄悄的載入指定的文檔，並把它們儲存在快取裡。當使用者造訪到這些預先載入的文件後，瀏覽器能快速的從快取提取給使用者。

簡單說來就是：讓瀏覽器預先載入使用者存取目前頁後極有可能存取的其他資源(頁面，圖片，影片等)。而且方法超的簡單！

HTML5頁面資源預加載(Link prefetch)寫法

複製代碼

代碼如下:

http:// www.jb51.net/wordpress/
wp-content/uploads/2014/04/b-334x193.jpg " />

HTML5頁面資源預先載入/預先讀取(Link prefetch)功能是透過Link標記實現的，將rel屬性指定為“prefetch”，在href屬性裡指定要載入資源的位址。火狐瀏覽器裡也提供了額外的屬性支援：

複製程式碼

程式碼如下:

程式碼如下:

程式碼如下:

程式碼如下:

程式碼如下:

title="Designed for Mozilla" href="mozspecific.css" _fcksavedurl=""mozspecific.css"" />

HTTPS協定資源下也可以使用prefetch。

什麼情況下應該預先載入頁面資源

在你的頁面裡加載什麼樣的資源，什麼時候加載，這完全取決於你。以下是一些建議： 1.當頁面有類似幻燈片的服務時，預先載入/預先讀取接下來的1-3頁和之前的1-3頁。

2.預先載入那些整個網站通用的圖片。

3.預先載入網站上搜尋結果的下一頁。

禁止頁面資源預先載入(Link prefetch)

火狐瀏覽器裡有一個選項可以禁止任何的頁面資源預先載入(Link prefetch)功能，你可以這樣設定： 1.user_pref("network.prefetch-next", false);2.頁面資源預先載入(Link prefetch)注意事項 以下是一些關於頁面資源預先載入(Link prefetch)的注意事項： 1.預先載入(Link prefetch)不能跨網域運作，包括跨網域拉取cookies。 2.預先載入(Link prefetch)會污染你的網站訪問量統計，因為有些預先載入到瀏覽器的頁面使用者可能並未真正存取。 3.火狐瀏覽器從2003年開始就已經提供了這項預先載入(Link prefetch)技術的支援。 利用瀏覽器空閒時間加載一些額外的資源文件，看起來是既刺激又危險，你想試試這些技術嗎？