HTML5的頁面資源預加載功能加速頁面加載

8 提交 / 0個新回復
最新回復
HTML5的頁面資源預加載功能加速頁面加載

? ? 不管是瀏覽器的開發者還是普通web應用的開發者,他們都在做一個共同的努力:讓Web瀏覽有更快的速度感覺。有很多已知的技術都可以讓你的網站速度變得更快:使用CSS sprites,使用圖片優化工具,使用.htaccess設置頁面頭信息和緩存時間,JavaScript壓縮,使用CDN等。我曾經介紹過本站上使用的一些速度優化技術。而在HTML5里,出現了一個新的用來優化網站速度的新功能:頁面資源預加載/預讀取(Link prefetch)。
? ? 頁面資源預加載/預讀取(Link prefetch)是什么?來自MDN的解釋:
? ? 頁面資源預加載(Link prefetch)是瀏覽器提供的一個技巧,目的是讓瀏覽器在空閑時間下載或預讀取一些文檔資源,用戶在將來將會訪問這些資源。一個Web頁面可以對瀏覽器設置一系列的預加載指示,當瀏覽器加載完當前頁面后,它會在后臺靜悄悄的加載指定的文檔,并把它們存儲在緩存里。當用戶訪問到這些預加載的文檔后,瀏覽器能快速的從緩存里提取給用戶。
簡單說來就是:讓瀏覽器預先加載用戶訪問當前頁后極有可能訪問的其他資源(頁面,圖片,視頻等)。而且方法超級的簡單!
HTML5頁面資源預加載(Link prefetch)寫法
? ? HTML5頁面資源預加載/預讀取(Link prefetch)功能是通過Link標記實現的,將rel屬性指定為“prefetch”,在href屬性里指定要加載資源的地址。火狐瀏覽器里還提供了一種額外的屬性支持:

  1. <link rel="prefetch alternate stylesheet"

    ?

  2. title="Designed for? ?

  3. <link rel="next" href="2.html" />

復制代碼
HTTPS協議資源下也可以使用prefetch。
什么情況下應該預加載頁面資源
在你的頁面里加載什么樣的資源,什么時候加載,這完全取決于你。下面是一些建議:
當頁面有幻燈片類似的服務時,預加載/預讀取接下來的1-3頁和之前的1-3頁。
預加載那些整個網站通用的圖片。
預加載網站上搜索結果的下一頁。
禁止頁面資源預加載(Link prefetch)
火狐瀏覽器里有一個選項可以禁止任何的頁面資源預加載(Link prefetch)功能,你可以這樣設置:

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

頁面資源預加載(Link prefetch)注意事項
下面是一些關于頁面資源預加載(Link prefetch)的注意事項:
預加載(Link prefetch)不能跨域工作,包括跨域拉取cookies。
預加載(Link prefetch)會污染你的網站訪問量統計,因為有些預加載到瀏覽器的頁面用戶可能并未真正訪問。
火狐瀏覽器從2003年開始就已經提供了對這項預加載(Link prefetch)技術的支持。
利用瀏覽器空閑時間加載一些額外的資源文件,看起來是既刺激又危險,你想試試這些技術嗎?

學習了!

火狐瀏覽器里還提供了一種額外的屬性支持

學習了

不錯! 支持下

這個好用,HTML5 速度上來了,用戶體驗就更好了!

不錯!頂下!

從緩存里提取給用戶

国产69久久精品成人看,国产性色AV高清在线观看,国产亚洲Av综合人人澡精品,国产在线拍揄自揄拍无码