DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> HTML5資源預加載(Link prefetch)詳細介紹(給你的網頁加速)
HTML5資源預加載(Link prefetch)詳細介紹(給你的網頁加速)
編輯:HTML5詳解     

我曾經介紹過本站上使用的一些速度優化技術。而在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="/School/UploadFiles_7810/201603/20160309225506578.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)技術的支持。

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved