本文說的是HTTP中控制客戶端緩存的頭有哪些。網上這方面的文章很多了,這里就說下個人的理解。
在請求一個靜態文件的時候(圖片,css,js)等,這些文件的特點是文件不經常變化,將這些不經常變化的文件存儲起來,對客戶端來說是一個優化用戶瀏覽體驗的方法。那么這個就是客戶端緩存的意義了。
windows下客戶端的緩存文件存放在臨時文件夾中,但是這里有個問題就是這個緩存文件存放多久呢?這個是由服務端進行設置的。
Expires/Cache-Control
HTTP頭中的Expires和Cache-Control就是完成這個事情的。
當客戶端第一次訪問資源的時候,服務端在返回資源內容的同時也返回了Expires: Sun, 16 Oct 2016 05:43:02 GMT。
服務端告訴瀏覽器: 你Y的先把這個文件給我緩存起來,在這個過期時間之前,這個文件都不會變化了,你下次需要這個文件的時候,你就不要過來找我要了,你就去緩存中拿就好了,又快又好。
瀏覽器回答說:諾。
於是在第二次html頁面中又要訪問這個資源的時候,並且訪問的日期在Sun, 16 Oct 2016 05:43:02 GMT之前,瀏覽器就不去服務器那邊獲取文件了,自己從緩存中自食其力了。
但是呢,瀏覽器畢竟是在客戶端的,客戶端的時間可是不准確的,用戶可以隨着自己的喜好修改自己機器的時間,比如我把我機器的時間調成Sun, 16 Oct 2016 05:43:03 GMT,那么呢?我的瀏覽器就不會再使用緩存了,而每次都去服務器獲取文件。於是,服務器怒了:給你個絕對時間,你由於環境被修改沒法判斷過期,那么我就給你相對時間吧。於是就返回了Cache-Control: max-age:600,瀏覽器你給我緩存個10分鍾去。於是瀏覽器只有乖乖的緩存10分鍾了。
但是問題又來了,如果有的服務器同時設置了Expires和Cache-Control怎么辦呢?(不是閑的沒事干,而是由於Cache-Controll是HTTP1.1中才有的)那么就是根據更先進的設置Cache-Control來為標准。
好了,現在有個問題,我有個文件可能時不時會更新,服務端非常希望客戶端能時不時過來問一下這個文件是否過期,如果沒有過期,服務端不返回數據給你,只告訴瀏覽器你的緩存還沒有過期(304)。然后瀏覽器使用自己存儲的緩存來做顯示。這個就叫做條件請求。
Last-Modified/ If-Modify-since
客戶端第一次訪問資源的時候,服務端返回資源內容的同時返回了Last-Modifed:Wed, 07 Aug 2013 15:32:18 GMT 服務端在告訴客戶端:你獲取的這個文件我最后的修改時間是Wed, 07 Aug 2013 15:32:18 GMT 。瀏覽器在獲取這個文件存到緩存中的時候,給緩存中的文件同時記錄上這個最后修改時間。
第二次訪問的時候(我們假設這里沒有設置expires或者cache-control)。那么服務端訪問資源的時候會帶上If-Modify-since:Wed, 07 Aug 2013 15:32:18 GMT ;
客戶端詢問服務端:喂,我需要的這個資源其實我這邊已經有緩存了,我的緩存文件的最后修改時間是這個是,如果你那邊的資源在這個時間以后沒有修改的話,你就告訴我一下就好了,不需要返回實際的資源內容。反之,要是你有修改的話,你就把文件內容返回給我吧。
服務端回應說:哦。行為是看下資源是否在這個時間后沒有修改過,如果沒有修改返回個304告訴客戶端,我沒有修改過。如果有變化了,我就返回200,並且帶上資源內容。
這個條件請求還有另外一種方法,打標簽(Tag)。
ETag/ If-None-Match。
第一次客戶端訪問資源的時候,服務端返回資源內容的同時返回了ETag:1234,告訴客戶端:這個文件的標簽是1234,我如果修改了我這邊的資源的話,這個標簽就會不一樣了。
第二次客戶端訪問資源的時候,由於緩存中已經有了Etag為1234的資源,客戶端要去服務端查詢的是這個資源有木有過期呢?所以帶上了If-None-Match: 1234。告訴服務端:如果你那邊的資源還是1234標簽的資源,你就返回304告訴我,不需要返回資源內容了。如果不是的話,你再返回資源內容給我就行了。服務端就比較下Etag來看是返回304還是200。
各種刷新
理解了上面的緩存標簽之后就很好理解各種刷新了。
刷新有三種
瀏覽器中寫地址,回車
F5
Ctrl+F5
假設對一個資源:
瀏覽器第一次訪問,獲取資源內容和cache-control: max-age:600,Last_Modify: Wed, 10 Aug 2013 15:32:18 GMT
於是瀏覽器把資源文件放到緩存中,並且決定下次使用的時候直接去緩存中取了。
瀏覽器url回車
瀏覽器發現緩存中有這個文件了,好了,就不發送任何請求了,直接去緩存中獲取展現。(最快)
下面我按下了F5刷新
F5就是告訴瀏覽器,別偷懶,好歹去服務器看看這個文件是否有過期了。於是瀏覽器就膽膽襟襟的發送一個請求帶上If-Modify-since:Wed, 10 Aug 2013 15:32:18 GMT
然后服務器發現:誒,這個文件我在這個時間后還沒修改過,不需要給你任何信息了,返回304就行了。於是瀏覽器獲取到304后就去緩存中歡歡喜喜獲取資源了。
但是呢,下面我們按下了Ctrl+F5
這個可是要命了,告訴瀏覽器,你先把你緩存中的這個文件給我刪了,然后再去服務器請求個完整的資源文件下來。於是客戶端就完成了強行更新的操作...
還有說一下,那個ETag實際上很少人使用,因為它的計算是使用算法來得出的,而算法會占用服務端計算的資源,所有服務端的資源都是寶貴的,所以就很少使用etag了。
參考資源
http://hi.baidu.com/thinkinginlamp/item/2fd6e732bf1a8ed56d15e9d0
《HTTP權威指南》