以前專案中遇到了很多瀏覽器快取相關的問題，也在網上查過資料，搞過伺服器的配置，來確保客戶端載入伺服器資源的速度和資源有效性。最近仔細看了下http協議中和快取相關的一些屬性，總結一下。
瀏覽器快取原理
文本版描述
①瀏覽器第一次訪問伺服器資源 /index.html
在瀏覽器中沒有快取檔案，直接向伺服器傳送請求。
伺服器返回 200 ok，實體中返回 index.html檔案內容，並設定乙個快取過期時間，乙個檔案修改時間，乙個根據index.html內容計算出來的實體標記entity tag，簡稱etag。
瀏覽器將/index.html路徑的請求快取到本地。
②瀏覽器第二次訪問伺服器資源 /index.html
由於本地已經有了此路徑下的快取檔案，所以這一次就不直接向伺服器傳送請求了。
首先，進行快取過期判斷。瀏覽器根據①中設定快取過期時間判斷快取檔案是否過期。
情景一：若沒有過期，則不向伺服器傳送請求，直接使用快取中的結果，此時我們在瀏覽器控制台中可以看到 200 ok(from cache) ，此時的情況就是完全使用快取，瀏覽器和伺服器沒有任何互動的。
情景二：若已過期，則向伺服器傳送請求，此時請求中會帶上①中設定的檔案修改時間，和etag
然後，進行資源更新判斷。伺服器根據瀏覽器傳過來的檔案修改時間，判斷自瀏覽器上一次請求之後，檔案是不是沒有被修改過;根據etag，判斷檔案內容自上一次請求之後，有沒有發生變化
情形一：若兩種判斷的結論都是檔案沒有被修改過，則伺服器就不給瀏覽器發index.html的內容了，直接告訴它，檔案沒有被修改過，你用你那邊的快取吧—— 304 not modified，此時瀏覽器就會從本地快取中獲取index.html的內容。此時的情況叫協議快取，瀏覽器和伺服器之間有一次請求互動。
情形二：若修改時間和檔案內容判斷有任意乙個沒有通過，則伺服器會受理此次請求，之後的操作同①
我的文字表達能力可能有限，為了盡量把這個流程描述清楚一點，下面
一圖以蔽之
快取相關首部字段
request快取相關首部字段
① cache-control 用來做快取過期判斷
常用指令：
no-cache 不直接使用快取，始終向伺服器發起請求
max-age 快取過期時間，是乙個時間數值，比如3600秒，設定為0的時候效果等同於no-cache
s-maxage 給快取**用的指令，對直接返回資源的server無效，當s-maxage生效時，會忽略max-age的值
only-if-cached 若有快取，則只使用快取，若快取檔案出問題了，請求也會出問題
② pragma 用來做快取過期判斷
它可以取值no-cache
這是乙個http1.0遺留的字段，當它和cache-control同時存在的時候，會被cache-control覆蓋
③ if-match / if-none-match 用來做資源更新判斷
這個指令會把快取中的etag傳給伺服器，伺服器用它來和伺服器端的資源etag進行對比，若不一致則證明資源被修改了，需要響應請求為 200 ok
④ if-modified-since 用來做資源更新判斷
這個指令會把檔案的上一次快取中的檔案的更新時間傳給伺服器，伺服器判斷檔案在這個時間點後是否被修改，如果被修改過則需要響應請求為200 ok
response快取相關首部字段
① cache-control 用來設定快取過期時間
常用指令：
no-cache 讓客戶端不直接使用快取，始終向伺服器發起請求，不設定預設是這個，上邊截圖中的請求就是省略了，所以客戶端不會直接使用快取。
max-age 快取過期時間，是乙個時間數值，比如3600秒，設定為0的時候效果等同於no-cache
s-maxage 給快取**用的指令，對直接返回資源的server無效，當s-maxage生效時，會忽略max-age的值
private/public 預設是private，只在乙個瀏覽器中快取，設定為public時快取可被多個使用者共享
② etag 用來設定根據資源內容生成的實體標籤
這個值有強tag和弱tag，區別是計算方式不同，只有強tag才會在資源被更新的時候立即發生變化，請求首部中的if-match/if-none-match欄位就會傳回這個值給服務端
③ age
這個字段用來告訴客戶端，這個response是在多久前被建立的，單位為秒，快取伺服器返回資源的時候必須建立此欄位
實體首部快取相關字段
response的head裡邊可能還包括實體首部，實體首部是緊跟在response首部後邊的。
①last-modified-time ——用來設定資源最後修改時間
②exprire —— 設定檔案過期時間
這個欄位的作用和cache-control相同，不同的是它直接指定乙個快取過期時間點，容易受客戶端時間的影響。
這也是乙個遺留的字段，和cache-control同時存在的時候會被後者覆蓋
快取配置的一些注意事項
① 只有get請求會被快取，post請求不會
② etag 在資源分布在多台機器上時，對於同乙個資源，不同伺服器生成的etag可能不相同，此時就會導致304協議快取失效，客戶端還是直接從server取資源。可以自己修改伺服器端etag的生成方式，根據資源內容生成同樣的etag。
④ 觀察chrome的表現發現，通過鏈結或者位址列訪問，會先判斷快取是否過期，再判斷緩資源是否更新;f5重新整理，會跳過快取過期判斷，直接請求伺服器，判斷資源是否更新。
http快取 瀏覽器快取
如果以下題目都能快速回答，那此文章也就沒有必要要看啦 1.講一下http快取 強快取，協商快取 2.如何控制強 協商快取 expires，cache control，etag if none match，if modified sine last modified 3.cache control有哪...
瀏覽器 HTTP 協議快取機制詳解
最近在看有關於android網路請求框架，在閱讀okhttp源 的時候遇到快取有關的問題。自己以前也看過有關文章但看完之後都沒有太深的影響，今天發現一片很不錯的文章記錄下來。快取分為服務端側 server side，比如 nginx apache 和客戶端側 client side，比如 web b...
瀏覽器 HTTP 協議快取機制詳解
最近在準備優化日誌請求時遇到了一些令人疑惑的問題，比如為什麼響應頭里出現了兩個 cache control 為什麼明明設定了 no cache 卻還是發請求，為什麼多次訪問時有時請求裡帶了 etag，有時又沒有帶？等等。後來查了一些資料以及同事親自驗證，總算對這些問題有了個清晰的理解，現在整理出來以...