一、方向
1.瞭解HTTP協議
2.瞭解瀏覽器的緩存機制
3.主流瀏覽器文件及圖片的緩存機制
二、基礎知識
1.什麼是HTTP協議？
協議是指計算機通信網絡中兩臺計算機之間進行通信所必須共同遵守的規定或規則，超文本傳輸協議(HTTP)是一種通信協議，它允許將超文本標記語言(HTML)文檔從Web服務器傳送到客戶端的瀏覽器。
2.HTTP消息的結構
Request的消息結構分爲三部分，第一部分叫請求行，第二部分叫請求頭，第三部分叫請求體。
Response的消息結構分爲三部分，第一部分叫響應行，第二部分叫響應頭，第三部分叫響應體。
3.General:
Request URL:請求路徑
Request Method:請求方式，指post,get等
Status Code:狀態碼 常用200,302,304,404，500等
Remote Address:遠程地址
4.Response Headers:
Date:當前DMT時間（需加8小時爲北京時間）
Etag:判斷緩存的標識
Last-Modified：文檔的最後改動時間
Refresh：表示瀏覽器應該在多少時間之後刷新文檔，以秒計。
Content-Encoding：文檔的編碼（Encode）方法。
Expires：指明應該在什麼時候認爲文檔已經過期。
Server：服務器
5.Request Headers:
Accept:瀏覽器可以接受的媒體類型 eg:image/webp
Accept-Encoding:瀏覽器申明自己接收的壓縮方法。 eg：gzip,deflate
Accept-language:瀏覽器申明自己接收的語言。 eg:zh-CN,zh;
Connection:keep-alive 長連接
If-modified-since:配合 Last-Modified使用
If-None-match:配合Etag使用
Referer：防盜鏈，告訴服務器是從哪個頁面鏈接過來的
三：瀏覽器緩存機制的知識:
1.Expires策略：
Expires是Web服務器響應消息頭字段，在響應http請求時告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器緩存取數據，而無需再次請求。
2.Cache-Crontrol策略：
常用值爲public、private、no-cache、no- store、max-age
各個消息中的指令含義如下：
(1)public指示響應可被任何緩存區緩存。
(2)private指示對於單個用戶的整個或部分響應消息，不能被共享緩存處理。這允許服務器僅僅描述當用戶的部分響應消息，此響應消息對於其他用戶的請求無效。
(3)no-cache告訴瀏覽器、服務器，不管本地緩存是否過期，使用資源副本前，一定要到服務器進行副本有效性校驗。
(4)no-store用於防止重要的信息被無意的發佈。在請求消息中發送將使得請求和響應消息都不使用緩存。
(5)max-age指示客戶機可以接收生存期不大於指定時間（以秒爲單位）的響應。
6.Last-Modified/If-Modified-Since:
Last-Modified/If-Modified-Since要配合Cache-Control使用。 Last-Modified：標示這個響應資源的最後修改時間。web服務器在響應請求時，告訴瀏覽器資源的最後修改時間。
If-Modified-Since：當資源過期時（使用Cache-Control標識的max-age）， 發現資源具有Last-Modified聲明，則再次向web服務器請求時帶上頭 If-Modified-Since，表示請求時間。web服務器收到請求後發現有頭If-Modified-Since 則與被請求資源的最後修改時間進行比對。若最後修改時間較新，說明資源又被改動過，則響應整片資源內容（寫在響應消息包體內），HTTP 200；若最後修改時間較舊，說明資源無新修改，則響應HTTP 304 (無需包體，節省瀏覽)，告知瀏覽器繼續使用所保存的cache。
4.Etag/If-None-Match:
Etag/If-None-Match也要配合Cache-Control使用。
Etag：web服務器響應請求時，告訴瀏覽器當前資源在服務器的唯一標識。Apache中，ETag的值，默認是對文件的索引節，大小（Size）和最後修改時間進行Hash後得到的。
If-None-Match：當資源過期時（使用Cache-Control標識的max-age），發現資源具有Etag聲明，則再次向web服務器請求時帶上頭If-None-Match （Etag的值）。web服務器收到請求後發現有頭If-None-Match 則與被請求資源的相應校驗串進行比對，決定返回200或304。
四、主流瀏覽器文件緩存機制
測試環境:Windows7 、tomcat6.0 、
抓包工具:httpwatch 、firebug;
瀏覽器:IE9、FireFox50.0、Chrome53.0、360瀏覽器8.0(內核45.0)
注意：所有瀏覽器都假定爲使用默認設置運行。
**緩存控制頭 Cache-Control
對 cache-control值的瀏覽器響應**
不進行任何緩存相關設置
前提:沒有緩存設置且用戶打開一個新的瀏覽器窗口
注意:(1)瀏覽器呈現的圖片及文件來自緩存是指：沒有向瀏覽器發送請求直接使用緩存。
(2)304是指瀏覽器重新發送請求到服務器，但是發現沒有內容修改，還是用緩存中已緩存的內容。
五：結論
1.怎麼讓JS文件能被修改後就實時更新：
再次請求的時候，圖片會直接使用緩存，文件(js等)向服務器發送304後，再使用緩存。如果一般js等文件需要每次更新後都返回200,可以在參數上加上版本號或者時間戳等。
2.Last Modified的緩存規則：
如果客戶端在請求一個文件的時候，發現自己緩存的文件有 Last Modified ，那麼在請求中會包含 If Modified Since ，這個時間就是緩存文件的 Last Modified 。因此，如果請求中包含 If Modified Since，就說明已經有緩存在客戶端。只要判斷這個時間和當前請求的文件的修改時間就可以確定是返回 304 還是 200 。對於靜態文件，例如：JS、圖片，服務器會自動完成 Last Modified 和 If Modified Since 的比較，完成緩存或者更新。但是對於動態頁面，就是動態產生的頁面，往往沒有包含 Last Modified 信息，這樣瀏覽器、網關等都不會做緩存，也就是在每次請求的時候都完成一個 200 的請求。
3.對文件及圖片設置不緩存，可以通過控制響應頭Expires、cache-control、pragma
–>response.setDateHeader(“Expires”,0);//自定義過期時間
–>response.setHeader(“Cache-Control”,”no-cache,no-store”);
–>response.setHeader(“Pragma”,”no-cache”);
4.對緩存的處理:
win7,win8,win10緩存路徑：
IE瀏覽器文件及圖片緩存路徑：
C:\Users\Administrator\AppData\Local\Microsoft\Windows\Temporary Internet Files
Chrome瀏覽器文件及圖片緩存路徑：
C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Cache
FireFox瀏覽器文件及圖片緩存路徑：
C:\Users\Administrator\AppData\Local\Mozilla\Firefox\Profiles
Xp系統緩存路徑：
IE瀏覽器文件及圖片緩存路徑：
C:\Documents and Settings\用戶名\Local Settings\Temporary Internet Files
Chrome瀏覽器文件及圖片緩存路徑：
C:\Documents and Settings\用戶名\Local Settings\Application Data\Google\Chrome\User Data\Default\Cache
FireFox瀏覽器文件及圖片緩存路徑：
C:\Documents and Settings\用戶名\Local Settings\Application Data\Mozilla\Firefox\Profiles
注：Administrator指的是計算機的用戶名，可能不同計算機設置了不同的用戶名
// map = System.getenv();
//String userName = map.get(“USERNAME”);
這裏userName獲取的就是用戶名
不過這裏除了IE瀏覽器都是對文件重新加密了。
存緩存：
這裏可以採用對比字節大小的方式通過字節流進行IO流傳輸，首先通過設置緩存對文件及圖片設置長時間緩存，可以通過設置響應頭Expires、cache-control、pragma
–>response.setDateHeader(“Expires”, System.currentTimeMillis()+1000L*3600*24); //自定義過期時間
–>response.setHeader(“Cache-Control”,”max-age=xxx”); –>response.setHeader(“Pragma”, “Pragma”);
eg:對圖片的緩存時長設置爲30天，可以設置response.setHeader(“Cache-Control”,“max-age= 3600*24*30”);
或者在頁面對通過對JSP進行設置緩存頭來達到對圖片及JS文件設置緩存的目的。
–>
–>
–>
進行對圖片背景圖及JS進行緩存。
取緩存：
通過對字節傳輸大小的比較進行獲取圖片
結果：成功取到圖片緩存
注：獲取圖片或文件的方式僅僅是我的一個思路，若有朋友有更好的想法可以給我留言，謝謝！