不管是瀏覽器的開發者還是普通web應用的開發者，他們都在做一個共同的努力：讓Web瀏覽有更快的速度感覺。有很多已知的技術都可以讓你的網站速度變得更快：使用CSS sprites，使用圖片優化工具，使用.htaccess設置頁面頭信息和緩存時間，JavaScript壓縮，使用CDN等

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

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

頁面資源預加載(Link prefetch)是瀏覽器提供的一個技巧，目的是讓瀏覽器在空閑時間下載或預讀取一些文檔資源，用戶在將來將會訪問這些資源。一個Web頁面可以對瀏覽器設置一系列的預加載指示，當瀏覽器加載完當前頁面后，它會在后臺靜悄悄的加載指定的文檔，并把它們存儲在緩存里。當用戶訪問到這些預加載的文檔后，瀏覽器能快速的從緩存里提取給用戶。

簡單說來就是：讓瀏覽器預先加載用戶訪問當前頁后極有可能訪問的其他資源(頁面，圖片，視頻等)。而且方法超級的簡單！

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

復制代碼

代碼如下:

 !-- 預加載整個頁面 --  link rel= prefetch href= http://www.jb51.net/misc/3d-album/ / /p  p !-- 預加載一個圖片 --  link rel= prefetch href= a href= http://www.jb51.net/wordpress/ http://www.jb51.net/wordpress/ /a wp-content/uploads/2014/04/b-334x193.jpg / 

HTML5頁面資源預加載/預讀取(Link prefetch)功能是通過Link標記實現的，將rel屬性指定為“prefetch”，在href屬性里指定要加載資源的地址。火狐瀏覽器里還提供了一種額外的屬性支持：

復制代碼

代碼如下:

 link rel= prefetch alternate stylesheet title= Designed for Mozilla href= mozspecific.css _fcksavedurl= mozspecific.css /  link rel= next href= 2.html / 

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)技術的支持。

利用瀏覽器空閑時間加載一些額外的資源文件，看起來是既刺激又危險，你想試試這些技術嗎？

以上就是HTML5資源預加載(Link prefetch)詳細介紹的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。