原文地址
http://my.oschina.net/ososchina/blog/339896
http請求頭和響應頭可以避免重複的資源(css,js,圖片,文本等),瀏覽器一般訪問這些靜態資源之後會緩存一段時間,靜態資源一般是不會經常改變的,而且這些資源比較大,比較多的情況會影響加載效果,所以要避免多次從網絡加載這些文件。
一個完整的請求(本文作於2014-11-12,但資源時間是2014-10-30)
1
2
3
4
5
6
7
8
9
10
11
|
GET /assets/github-208780c72d87b50a0c3b932094adabe0ed787e29f3a60ddf60b7a8c0b66aeaff.css HTTP/ 1.1 Host: assets-cdn.github.com Connection: keep-alive Cache-Control: max-age= 0 Accept: text/css,*/*;q= 0.1 If-Modified-Since: Thu, 30 Oct 2014 22 : 36 : 24 GMT User-Agent: Mozilla/ 5.0 (Windows NT 6.1 ; WOW64) AppleWebKit/ 537.36 (KHTML, like Gecko) Chrome/ 37.0 . 2062.124 Safari/ 537.36 Referer: https: //github.com/ Accept-Encoding: gzip,deflate Accept-Language: en-US,en;q= 0.8 Cookie: logged_in=no; _octo=GH1. 1.1132014134 . 1407914921 ; _ga=GA1. 2.249759956 . 1407914919 |
服務器響應
1
2
3
4
5
6
7
8
|
HTTP/ 1.1 304 Not Modified Date: Sun, 02 Nov 2014 01 : 59 : 39 GMT Server: Apache Via: 1.1 varnish Last-Modified: Thu, 30 Oct 2014 22 : 36 : 24 GMT Cache-Control: max-age= 31536000 , public Expires: Sat, 31 Oct 2015 20 : 46 : 08 GMT Age: 105210 |
瀏覽器資源訪問過程:
1.當訪問靜態資源文件時,首先使用url hashcode作爲key查詢本地資源緩存。
2.如果沒找到資源,那麼直接訪問瀏覽器,然後將請求的資源文件緩存並載入到html中。
3.如果找到資源,讀該資源在服務器創建的的時間,加入http響應頭If-Modified-Since: Thu, 30 Oct 2014 22:36:24 GMT,併發送到服務器。
4.服務器根據url進行查找資源,如果未找到,返回404。否則讀取資源創建時間,給出響應狀態嗎。
5.瀏覽器如果收到404,會清空hascode對應的緩存,資源無法加載到html
6.瀏覽器如果收到 304,檢查Last-Modified:Thu, 30 Oct 2014 22:36:24 GMT,如果(Last-Modified=If-Modified-Since),表示文件未被修改,則直接使用本地緩存加載到html.
7.比較之後,如果服務器>瀏覽器,則重新請求資源。
8.如果是200,則進行本地緩存更新 Last-Modified>If-Modified-Since,並加載到html。
這個過程看似複雜,但提高了資源的訪問效率
額外淺談一下驗證碼問題。
驗證碼刷新問題也是這個原理,一般來說驗證碼生成之後會緩存到服務上,他的創建時間和瀏覽器讀取到的創建時間進行比較後,往往不在請求服務器。
驗證碼更新問題的結局,因爲無法設置If-Modified-Since,但可以修改url,當url不行同時hashcode是找不到資源的,他會再次請求的,比如我們使用js,可以這樣改變驗證碼的url,
1
2
|
var url=http: //hostname:[port]/xxx/checkcode.php?rnd=Math.random(); img.src=url 。 |