首頁  >  文章  >  web前端  >  HTML5資源預先載入(Link prefetch)詳細介紹

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

不言
不言原創
2018-05-05 14:25:031850瀏覽

這篇文章主要介紹了關於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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn