HTML5的頁面資源預先載入技術(Link prefetch)加速頁面載入

標籤：faq   content   讀取   target   lte   logs   使用者訪問   指定   緩衝   

 不管是瀏覽器的開發人員還是普通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.webhek.com/misc/3d-album/" /><!-- 預先載入一個圖片 --><link rel="prefetch" href=" http://www.webhek.com/wordpress/wp-content/uploads/2014/04/b-334x193.jpg " />

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

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

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

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

在你的頁面裡載入什麼樣的資源，什麼時候載入，這完全取決於你。下面是一些建議：

• 當頁面有投影片類似的服務時，預先載入/預讀取接下來的1-3頁和之前的1-3頁。
• 預先載入那些整個網站通用的圖片。
• 預先載入網站上搜尋結果的下一頁。

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

Firefox瀏覽器裡有一個選項可以禁止任何的頁面資源預先載入(Link prefetch)功能，你可以這樣設定：

user_pref("network.prefetch-next", false);

頁面資源預先載入(Link prefetch)注意事項

下面是一些關於頁面資源預先載入(Link prefetch)的注意事項：

• 預先載入(Link prefetch)不能跨域工作，包括跨域拉取cookies。
• 預先載入(Link prefetch)會汙染你的網站訪問量統計，因為有些預先載入到瀏覽器的頁面使用者可能並未真正訪問。
• Firefox瀏覽器從2003年開始就已經提供了對這項預先載入(Link prefetch)技術的支援。

HTML5的頁面資源預先載入技術(Link prefetch)加速頁面載入