1. 程式人生 > >瀏覽器緩存之Expires Etag Last-Modified max-age詳解

瀏覽器緩存之Expires Etag Last-Modified max-age詳解

tag 新的 本地緩存 關系 發現 發生 按鈕 緩存 ida

 前段時間去面試移動端的H5開發工程師,在最後面試的時候被問到了max-age Expires Etag有什麽不同,在什麽情況下應用,當時亂編了一通,自我感覺良好,結果…… 大家懂得,現在講他們幾個的區別以及如何應用進行一下總結,方便後續查看。

Expires

  http/1.0中定義的header,是最基礎的瀏覽器緩存處理,表示資源在一定時間內從瀏覽器的緩存中獲取資源,不需要請求服務器獲取資源,從而達到快速獲取資源,緩解服務器壓力的目的。

  在response的header中的格式為:Expires: Thu, 01 Dec 1994 16:00:00 GMT (必須是GMT格式)

應用:
  1、可以在html頁面中添加<meta http-equiv="Expires" content="Thu, 01 Dec 1994 16:00:00"/> 來給頁面設置緩存時間。
  2、對於圖片、css等文件則需要在IIS或者apache等運行容器中進行規則配置來讓容器在請求資源的時候添加在responese的header中。

Last-modified

  望文知義,根據這個詞條的直譯應該是上次修改(時間),通過修改服務器端的文件後再請求,發現response的header中的Last-modified改變了

更新原理:
  1、在瀏覽器首次請求某個資源時,服務器端返回的狀態碼是200 (ok),內容是你請求的資源,同時有一個Last-Modified的屬性標記(Reponse Header),標識此文件在服務期端最後被修改的時間,格式:Last-Modified:Tue, 24 Feb 2009 08:01:04 GMT

  2、瀏覽器第二次請求該資源時,根據HTTP協議的規定,瀏覽器會向服務器傳送If-Modified-Since報頭(Request Header),詢問該文件是否在指定時間之後有被修改過,格式為:If-Modified-Since:Tue, 24 Feb 2009 08:01:04 GMT

  3、如果服務器端的資源沒有變化,則服務器返回304狀態碼(Not Modified),內容為空,這樣就節省了傳輸數據量。當服務器端代碼發生改變,則服務器返回200狀態碼(ok),內容為請求的資源,和第一次請求資源時類似。從而保證在資源沒有修改時不向客戶端重復發出資源,也保證當服務器有變化時,客戶端能夠及時得到最新的資源。


註:如果If-Modified-Since的時間比服務器當前時間(當前的請求時間request_time)還晚,會認為是個非法請求

ETag

  http/1.1 中增加的header,HTTP協議規格說明定義ETag為“被請求變量的實體值” 。另一種說法是,ETag是一個可以與Web資源關聯的記號(token)。典型的Web資源可以一個Web頁,但也可能是JSON或XML文檔。服務器單獨負責判斷記號是什麽及其含義,並在HTTP響應頭中將其傳送到客戶端。

ETag的格式
不同類型的Web服務器生成ETag的策略以及生成的格式是不同的:
1、apache1.3和2.x的Etag格式是:inode-size-timestamp。
2、IIS5.0和6.0的Etag格式為Filetimestamp:Changenumber。

更新原理:

1、當瀏覽器首次請求資源的時候,服務器會返回200的狀態碼(ok),內容為請求的資源,同時response header會有一個ETag標記,該標記是服務器端根據容器(IIS或者Apache等等)中配置的ETag生成策略生成的一串唯一標識資源的字符串,ETag格式為 ETag:"856247206"

2、當瀏覽器第2次請求該資源時,瀏覽器會在傳遞給服務器的request中添加If-None-Match報頭,詢問服務器改文件在上次獲取後是否修改了,報頭格式:If-None-Match:"856246825"

3、服務器在獲取到瀏覽器的請求後,會根據請求的資源查找對應的ETag,將當前服務器端指定資源對應的Etag與request中的If-None-Match進行對比,如果相同,說明資源沒有修改,服務器返回304狀態碼(Not Modified),內容為空;如果對比發現不相同,則返回200狀態碼,同時將新的Etag添加到返回瀏覽器的response中。

max-age

Cache-Control中設置資源在本地緩存時間的一個值,單位為:秒(s),其他值還有private、no-cache、must-revalidate等

幾者之間的關系

Expires 與max-age

Expires存在HTTP 1.0 版本, 標識本地緩存的截止時間,允許瀏覽器在這個時間之前不去向服務器端發送請求驗證資源是否有更新
max-age是HTTP 1.1版本新增的, 標識資源可以在本地緩存多少秒,存儲的是更新間隔。

Expires 的一個缺點就是,返回的到期時間是服務器端的時間,這樣存在一個問題,如果瀏覽器所在機器的時間與服務器的時間相差很大,那麽誤差就很大,所以在HTTP 1.1版開始,使用Cache-Control: max-age替代。
註: 如果max-age和Expires同時存在,則被Cache-Control的max-age覆蓋。

Expires =max-age + “每次下載時的當前的request時間”
所以一旦重新下載的頁面後,expires就重新計算一次,但last-modified不會變化

Last-Modified和Expires

  使用Last-Modified標識由於在資源未修改時返回的response內容為空,可以節省一點帶寬,但是還是逃不掉發一個HTTP請求出去,需要瀏覽器連接一次服務器端。
而Expires標識卻使得瀏覽器幹脆連HTTP請求都不用發,但是當用戶使用F5或者點擊Refresh按鈕的時候,就算URI設置了Expires,瀏覽器一樣也會發一個HTTP請求給服務器端,所以,Last-Modified還是要用的,而且要和Expires一起用。

Etag和Expires

和 Last-Modified和Expires的情況類似,需要Expires控制請求的頻率,Etag在強制刷新時作為保障


Last-Modified和Etag

  分布式系統裏多臺機器間文件的last-modified必須保持一致,以免負載均衡到不同機器導致比對失敗,一般建議分布式系統盡量關閉掉Etag(每臺機器生成的etag都會不一樣)
Last-Modified和ETags請求的http報頭一起使用,服務器首先產生Last-Modified/Etag標記,服務器可在稍後使用它來判斷頁面是否已經被修改,來決定文件是否繼續緩存
  過程如下:
    1.客戶端請求一個頁面(A)。
    2.服務器返回頁面A,並在給A加上一個Last-Modified/ETag。
    3.客戶端展現該頁面,並將頁面連同Last-Modified/ETag一起緩存。
    4.客戶再次請求頁面A,並將上次請求時服務器返回的Last-Modified/ETag一起傳遞給服務器。
    5.服務器檢查該Last-Modified或ETag,並判斷出該頁面自上次客戶端請求之後還未被修改,直接返回響應304和一個空的響應體。

從資源更新原理來看Last-Modified和Etag基本是類似的,那為什麽http協議中要搞2個標識呢?

Last-Modified存在的問題:
1、在集群服務器上各個服務器上的文件時間可能不同。
2、如果用舊文件覆蓋新文件,因為時間更前,瀏覽器不會請求這個更舊的文件。
3、時間精度為s級,對文件修改精度有嚴格要求的場景不能滿足

瀏覽器緩存之Expires Etag Last-Modified max-age詳解