[轉載] Link prefetch

原本想翻譯的可是有人翻譯了，仍是轉過來吧。原文《HTML5 Link Prefetching》，譯文《使用HTML5的頁面資源預加載(Link prefetch)功能加速你的頁面加載速度》

簡介

無論是瀏覽器的開發者仍是普通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屬性裏指定要加載資源的地址。火狐瀏覽器裏還提供了一種額外的屬性支持：

<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)

火狐瀏覽器裏有一個選項能夠禁止任何的頁面資源預加載(Link prefetch)功能，你能夠這樣設置：

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

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

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

• 預加載(Link prefetch)不能跨域工做，包括跨域拉取cookies。
• 預加載(Link prefetch)會污染你的網站訪問量統計，由於有些預加載到瀏覽器的頁面用戶可能並未真正訪問。
• 火狐瀏覽器從2003年開始就已經提供了對這項預加載(Link prefetch)技術的支持。

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