HTML5資源預先載入(Link prefetch)詳細介紹

這篇文章主要介紹了關於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.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)詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！