1. 程式人生 > >Meta http-equiv屬性與HTTP頭的Expires中(Cache-control)詳解

Meta http-equiv屬性與HTTP頭的Expires中(Cache-control)詳解

一、概述

A、http-equiv顧名思義,相當於http的檔案頭作用,它可以向瀏覽器傳回一些有用的資訊,以幫助正確和精確地顯示網頁內容,與之對應的屬性值為content,content中的內容其實就是各個引數的變數值。

B、Cache-control用於控制HTTP快取(在HTTP/1.0中可能部分沒實現,僅僅實現了Pragma: no-cache)

二、基本內容

meat標籤的http-equiv屬性語法格式是:<meta http-equiv="引數" content="引數變數值"> ;
其中http-equiv屬性主要有以下幾種引數:

1、Expires(期限) 
說明:可以用於設定網頁的到期時間。一旦網頁過期,必須到伺服器上重新傳輸。 
用法:

1

<meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT"

  注意:必須使用GMT的時間格式。 

2、Pragma(cache模式) 

說明:是用於設定禁止瀏覽器從本地機的快取中調閱頁面內容,設定後一旦離開網頁就無法從Cache中再調出 
用法:

<meta http-equiv="Pragma" content="no-cache">

  注意:這樣設定,訪問者將無法離線瀏覽。 

3、Refresh(重新整理)

說明:自動重新整理並指向新頁面。 
用法:

1

<meta http-equiv="Refresh" content="2;URL=http://www.net.cn/">

  注意:其中的2是指停留2秒鐘後自動重新整理到URL網址。

4、Set-Cookie(cookie設定)

1

<meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT; path=/">

  注意:必須使用GMT的時間格式。

5、Window-target(顯示視窗的設定)

 

說明:強制頁面在當前視窗以獨立頁面顯示。 
用法:

1

<meta http-equiv="Window-target" content="_top">

  注意:用來防止別人在框架裡呼叫自己的頁面。

6、content-Type(顯示字符集的設定) 

說明:設定頁面使用的字符集。 
用法:

1

<meta http-equiv="content-Type" content="text/html; charset=gb2312">

7、Pics-label(網頁等級評定) 

用法:

1

<meta http-equiv="Pics-label" contect="">

  說明:在IE的internet選項中有一項內容設定,可以防止瀏覽一些受限制的網站,而網站的限制級別就是通過meta屬性來設定的。

8、Page_Enter、Page_Exit 

設定進入頁面時的特殊效果

1

<meta http-equiv="Page-Enter" contect="revealTrans(duration=1.0,transtion=12)">   

設定離開頁面時的特殊效果

1

<meta http-equiv="Page-Exit" contect="revealTrans(duration=1.0,transtion=    12)"> 

Duration的值為網頁動態過渡的時間,單位為秒。  
Transition是過渡方式,它的值為0到23,分別對應24種過渡方式。如下表:  
0    盒狀收縮    1    盒狀放射  
2    圓形收縮    3    圓形放射  
4    由下往上    5    由上往下  
6    從左至右    7    從右至左  
8    垂直百葉窗    9    水平百葉窗  
10    水平格狀百葉窗    11垂直格狀百葉窗  
12    隨意溶解    13從左右兩端向中間展開  
14從中間向左右兩端展開    15從上下兩端向中間展開  
16從中間向上下兩端展開    17    從右上角向左下角展開  
18    從右下角向左上角展開    19    從左上角向右下角展開  
20    從左下角向右上角展開    21    水平線狀展開  
22    垂直線狀展開    23    隨機產生一種過渡方式  

9、清除快取(再訪問這個網站要重新下載!)

1

<meta http-equiv="cache-control" content="no-cache">

 具體用法

資料包中的格式:

Cache-Control: cache-directive

cache-directive可以為以下:

request時用到:

| "no-cache"
| "no-store"
| "max-age" "=" delta-seconds
| "max-stale" [ "=" delta-seconds ]
| "min-fresh" "=" delta-seconds
| "no-transform"
| "only-if-cached"
| "cache-extension"
response時用到:

| "public"
| "private" [ "=" <"> field-name <"> ]
| "no-cache" [ "=" <"> field-name <"> ]
| "no-store"
| "no-transform"
| "must-revalidate"
| "proxy-revalidate"
| "max-age" "=" delta-seconds
| "s-maxage" "=" delta-seconds
| "cache-extension"
部分說明:
根據是否可快取分為
Public  指示響應可被任何快取區快取。
Private  指示對於單個使用者的整個或部分響應訊息,不能被共享快取處理。這允許伺服器僅僅描述當用戶的
部分響應訊息,此響應訊息對於其他使用者的請求無效。
no-cache  指示請求或響應訊息不能快取(HTTP/1.0用Pragma的no-cache替換)
根據什麼能被快取
no-store  用於防止重要的資訊被無意的釋出。在請求訊息中傳送將使得請求和響應訊息都不使用快取。
根據快取超時
max-age  指示客戶機可以接收生存期不大於指定時間(以秒為單位)的響應。
min-fresh  指示客戶機可以接收響應時間小於當前時間加上指定時間的響應。
max-stale  指示客戶機可以接收超出超時期間的響應訊息。如果指定max-stale訊息的值,那麼客戶機可以
接收超出超時期指定值之內的響應訊息。
Expires 表示存在時間,允許客戶端在這個時間之前不去檢查(發請求),等同max-age的
效果。但是如果同時存在,則被Cache-Control的max-age覆蓋。
格式:
Expires = "Expires" ":" HTTP-date
例如
Expires: Thu, 01 Dec 1994 16:00:00 GMT (必須是GMT格式)
 
2.應用
通過HTTP的META設定expires和cache-control
<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="Expires" content="Mon, 20 Jul 2009 23:00:00 GMT" />
上述設定僅為舉例,實際使用其一即可。這樣寫的話僅對該網頁有效,對網頁中的圖片或其他請求無效,並不會做任何cache。
這樣客戶端的請求就多了,儘管只是檢查Last-modified狀態的東西,但是請求一多對瀏覽速度必定有影響。
如果要對檔案新增cache可以通過apache的mod_expire模組,寫法為
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 days"
</IfModule>
記得ExpiresActive設為On,我起先沒設定On,似乎怎樣YSlow都查不到快取機制。這樣新增的話就是預設所有的。
如果要針對個別MIME型別則可以:
ExpiresByType image/gif "access plus 5 hours 3 minutes"
見 Apache Module mod_expires
另外,當點選瀏覽器上的重新整理,客戶端傳送的請求中均是max-age=0,表示validate操作,傳送請求到伺服器
要求檢查cache,再更新cache,一般得到的是304 Not Modified,表示沒變動。

具體用法

10、設定網頁的到期時間 

1

<meta http-equiv="expires" content="0">

11、關鍵字,給搜尋引擎用的 

1

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

12.頁面描述 

1

<meta http-equiv="description" content="This is my page">