http快取機制是作為web效能優化的重要手段。我們要更好的了解，http的快取原理才能更好的懂得其實如何工作的，以及平時老說的快取是什麼，並且是如何實現的？
對於了解http快取之前，首先要了解一下http的報文。這是因為對於http得快取就是和http得報文有著極大的關係。
http報文，http報文就是瀏覽器以及伺服器之間進行通訊是傳送及響應的資料塊。
瀏覽器向伺服器請求資料時，傳送請求(request)報文；伺服器向瀏覽器返回資料時，返回響應(response)報文。
報文資訊主要分為四部分：
首行：請求方法，http協議版本，狀態碼以及狀態碼描述
頭部：key，value的鍵值對，用來儲存記錄，資料長度，資料型別，是否快取，以及資料匹配等資訊
空行：分割首部和正文
主體：http請求以及響應時傳輸資料的地方
假定瀏覽器有著自己的乙個快取資料庫，專門用來快取資訊。
在客戶端第一次請求資料時，此時快取資料庫中沒有對應的快取資料，需要請求伺服器，伺服器返回後，將資料儲存在快取資料庫中。
http快取有著許多種，根據是否需要重新向伺服器發起請求，我們將其分成兩類：強制快取和對比快取
已存在快取資料，僅基於強制快取，請求資料的流程如下：
已存在快取資料，僅基於對比快取，請求資料的流程如下：
我們可以看到兩類快取規則的不同，強制快取如果生效，不需要在和伺服器發生互動，而對比快取不管是否生效，都需要和服務端發生互動。
兩類快取可以同時存在，強制快取優先順序高於對比快取，也就是說當執行強制快取的規則時，如果快取生效，直接使用快取，不在執行對比快取規則。
從上文得知，強制快取，在快取資料未失效的情況下，可以直接使用快取資料，那麼瀏覽器是如何判斷快取資料是否失效呢？
我們知道，在沒有快取資料的時候，瀏覽器向伺服器請求資料時，伺服器會將資料以及快取規則一併返回，快取規則資訊則包含在header中。
對於強制快取來說，響應header中會有兩個欄位來標識失效規則(expires/cache-control)使用chrome的開發者工具，可以很明顯的看到對於強制快取生效是，網路請求的情況。
expires的值為服務返回的到期時間，即下一次請求時，請求時間小於服務端返回的到期時間，直接使用快取資料。不過expires是http 1.0的東西，現在預設瀏覽器使用http 1.1，所以它的作用基本忽略。
另外乙個問題是到期時間是有服務端生成的，但是客戶端時間可能跟服務端時間有誤差，這就會導致快取命中的誤差，所以http 1.1版本，使用cache-control替代。
cache-control是最重要的規則。常見的取值有private，public，max-age，no-cache，no-store，預設為private
舉個例子：
圖中cache-control僅指定max-age，所以預設為private，快取時間為3153600秒（365天）也就是說，在365天內再次請求這個資料，直接使用。
對比快取，顧名思義，需要進行比較判斷是否可以使用快取。瀏覽器第一次請求資料時，伺服器會將快取標識與資料一起返回給客戶端，客戶端將二者備份至快取資料庫中。
再次請求資料時，客戶端將備份的快取標識傳送給伺服器，伺服器根據快取標識進行判斷，判斷成功後，返回304狀態碼，通知客戶端比較成功，可以使用快取資料。
第一次訪問：
第二次訪問：
通過兩圖的對比，我們可以清楚的發現，在對比快取生效時，狀態碼為304，並且報文大小和資料量大大減少。
原因是，服務端在進行快取標識後，只返回header部分，通過狀態碼通知客戶端使用快取，不在需要將報文主體部分返回給客戶端。
對於對比快取來說，快取標識的傳遞使我們著重需要理解的，他在請求header和響應header間傳遞。
一共下面兩種傳遞：
伺服器在響應請求是，告訴瀏覽器資源的最後修改時間。
再次請求伺服器的時候，那麼瀏覽器將在請求中新增引數if-modified-since（值為上次響應裡面的last-modified），伺服器收到請求之後發現有頭if-modified-since則與被請求資源的最後修改時間進行比對。
若資源的最後修改時間大於if-modified-since，說明資源有被改動過，則響應整片資源內容，返回狀態碼200；若資源的最後修改時間小於或者等於if-modified-since，說明資源無新修改，則響應http 304，告知瀏覽器繼續使用儲存的cache。
伺服器響應請求時，告訴瀏覽器當前資源在伺服器的唯一標識（生成規則有伺服器決定）。
再次請求伺服器時，通過此欄位通知伺服器客戶端快取資料的唯一標識。伺服器收到請求後發現有頭if-none-match則與被請求資源的唯一標識進行比對，不同，說明資源又被改動過，則響應整片資源內容，返回狀態碼200；相同，說明資源沒有新修改，則響應http 304，告知瀏覽器繼續使用所儲存的cache。
對於強制快取，伺服器通知瀏覽器乙個快取時間，在快取時間內，下次請求，直接用快取，不在時間內，執行比較快取策略。
對於比較快取，將快取資訊中的etag和last-modified通過請求傳送給伺服器，由伺服器校驗，返回304狀態碼時，瀏覽器直接使用快取。
瀏覽器第一次請求：
瀏覽器第二次請求：
HTTP快取機制及原理
前言 http 快取機制作為 web 效能優化的重要手段，對於從事 web 開發的同學們來說，應該是知識體系庫中的乙個基礎環節，同時對於有志成為前端架構師的同學來說是必備的知識技能。但是對於很多前端同學來說，僅僅只是知道瀏覽器會對請求的靜態檔案進行快取，但是為什麼被快取，快取是怎樣生效的，卻並不是很...
Http快取機制及原理
http 快取機制作為 web 效能優化的重要手段，但是對於很多前端同學來說，僅僅只是知道瀏覽器會對請求的靜態檔案進行快取，但是為什麼被快取，快取是怎樣生效的，卻並不是很清楚。http報文就是瀏覽器和伺服器間通訊時傳送及響應的資料塊。請求報文 request 和響應報文 response http請...
HTTP快取機制和原理
作為web開發，http 快取機制作為 web 效能優化的重要手段。這篇博文主要是，關於瀏覽器會對請求的靜態檔案進行快取，但是為什麼被快取，快取是怎樣生效的。http報文就是瀏覽器和伺服器間通訊時傳送及響應的資料塊。瀏覽器向伺服器請求資料，傳送請求 request 報文 伺服器向瀏覽器返回資料，返回...