這篇文章主要介紹了關於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)功能,你可以這樣設定: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中文網其他相關文章!