http 快取機制作為 web 效能優化的重要手段，是web 開發知識體系庫中的乙個基礎環節，但是對於很多學習者來說，僅僅只是知道瀏覽器會對請求的靜態檔案進行快取，但是為什麼被快取，快取是怎樣生效的，卻並不是很清楚。在此,用簡單明瞭的文字介紹http快取機制，期望對各位學習者正確的理解前端快取有所幫助。
一、快取規則解析
http快取有多種規則，根據是否需要重新向伺服器發起請求來分類，分為兩大類(強制快取，對比快取)，在詳細介紹這兩種規則之前，先通過時序圖的方式，讓大家對這兩種規則有個簡單了解。
已存在快取資料時，僅基於強制快取，請求資料的流程如下：
已存在快取資料時，僅基於對比快取，請求資料的流程如下：
可以看到兩類快取規則的不同，強制快取如果生效，不需要再和伺服器發生互動，而對比快取不管是否生效，都需要與服務端發生互動。兩類快取規則可以同時存在，強制快取優先順序高於對比快取，也就是說，當執行強制快取的規則時，如果快取生效，直接使用快取，不再執行對比快取規則。
二、強制快取
從上文我們得知，強制快取，在快取資料未失效的情況下，可以直接使用快取資料，那麼瀏覽器是如何判斷快取資料是否失效呢？在沒有快取資料的時候，瀏覽器向伺服器請求資料時，伺服器會將資料和快取規則一併返回，快取規則資訊包含在響應header中。
對於強制快取來說，響應header中會有兩個欄位來標明失效規則（expires/cache-control）使用chrome的開發者工具，可以很明顯的看到對於強制快取生效時，網路請求的情況。
不過expires屬於 是http系列，現在預設瀏覽器均預設使用http ，所以它的作用基本忽略。另乙個問題是，到期時間是由服務端生成的，但是客戶端時間可能跟服務端時間有誤差，這就會導致快取命中的誤差。
cache-control：cache-control 是最重要的規則。常見的取值有private、public、no-cache、max-age，no-store，預設為private。
private: 客戶端可以快取
public: 客戶端和**伺服器都可快取（前端的同學，可以認為public和private是一樣的）
max-age=***: 快取的內容將在 *** 秒後失效
no-cache: 需要使用對比快取來驗證快取資料（後面介紹）
no-store: 所有內容都不會快取，強制快取，對比快取都不會觸發
舉個例子：
圖中cache-control僅指定了max-age，所以預設為private，快取時間為31536000秒（365天）也就是說，在365天內再次請求這條資料，都會直接獲取快取資料庫中的資料，直接使用。換通俗一點的話來說。當客戶端第一次訪問資源的時候，服務端在返回資源內容的同時也返回了expires: sun, 16 oct05:43:02 gmt。
服務端告訴瀏覽器： 你y的先把這個檔案給我快取起來，在這個過期時間之前，這個檔案都不會變化了，你下次需要這個檔案的時候，你就不要過來找我要了，你就去快取中拿就好了，又快又好。
瀏覽器回答說：諾。
於是在第二次html頁面中又要訪問這個資源的時候，並且訪問的日期在sun, 16 oct 05:43:02 gmt之前，瀏覽器就不去伺服器那邊獲取檔案了，自己從快取中自食其力了。
但是瀏覽器畢竟是在客戶端的，客戶端的時間可是不準確的，使用者可以隨著自己的喜好修改自己機器的時間，比如我把我機器的時間調成sun, 16 oct 05:43:03 gmt，過期了？我的瀏覽器就不會再使用快取了，而每次都去伺服器獲取檔案。於是，伺服器怒了：給你個絕對時間，你由於環境被修改沒法判斷過期，那麼我就給你相對時間吧。於是就返回了cache-control: max-age:600，瀏覽器你給我快取個10分鐘去。於是瀏覽器只有乖乖的快取10分鐘了。
但是問題又來了，如果有的伺服器同時設定了expires和cache-control怎麼辦呢？那麼就是根據更先進的設定cache-control來為標準。好了，現在有個問題，我有個檔案可能時不時會更新，服務端非常希望客戶端能時不時過來問一下這個檔案是否過期，如果沒有過期，服務端不返回資料給你，只告訴瀏覽器你的快取還沒有過期（304）。然後瀏覽器使用自己儲存的快取來做顯示。這個就叫做條件請求。
三、對比快取
對比快取，就是需要進行比較判斷是否可以使用快取。瀏覽器第一次請求資料時，伺服器會將快取標識與資料一起返回給客戶端，客戶端將二者備份至快取資料庫中。
再次請求資料時，客戶端將備份的快取標識傳送給伺服器，伺服器根據快取標識進行判斷，判斷成功後，返回304狀態碼，通知客戶端比較成功，可以使用快取資料。
對於對比快取來說，快取標識的傳遞是我們著重需要理解的，它在請求header和響應header間進行傳遞，一共分為兩種標識傳遞，接下來，我們分開介紹。
last-modified / if-modified-since
last-modified：伺服器在響應請求時，告訴瀏覽器資源的最後修改時間。
if-modified-since：再次請求伺服器時，通過此欄位通知伺服器上次請求時，伺服器返回的資源最後修改時間。伺服器收到請求後發現有頭if-modified-since 則與被請求資源的最後修改時間進行比對。若資源的最後修改時間大於if-modified-since，說明資源又被改動過，則響應整片資源內容，返回狀態碼200；若資源的最後修改時間小於或等於if-modified-since，說明資源無新修改，則響應http 304，告知瀏覽器繼續使用所儲存的cache。
etag / if-none-match（優先順序高於last-modified / if-modified-since）:第一次客戶端訪問資源的時候，服務端返回資源內容的同時返回了etag：1234，告訴客戶端：這個檔案的標籤是1234，我如果修改了我這邊的資源的話，這個標籤就會不一樣了。
第二次客戶端訪問資源的時候，由於快取中已經有了etag為1234的資源，客戶端要去服務端查詢的是這個資源有木有過期呢？所以帶上了if-none-match: 1234。告訴服務端：如果你那邊的資源還是1234標籤的資源，你就返回304告訴我，不需要返回資源內容了。如果不是的話，你再返回資源內容給我就行了。服務端就比較下etag來看是返回304還是200。
四、各種重新整理
理解了上面的快取標籤之後就很好理解各種重新整理了。
重新整理有三種：
假設對乙個資源：瀏覽器第一次訪問，獲取資源內容和cache-control: max-age:600，last_modify: wed, 10 aug 15:32:18 gmt於是瀏覽器把資源檔案放到快取中，並且決定下次使用的時候直接去快取中取了。
瀏覽器url回車：瀏覽器發現快取中有這個檔案了，就不傳送任何請求了，直接去快取中獲取展現。（最快）
f5重新整理：f5就是告訴瀏覽器，別偷懶，好歹去伺服器看看這個檔案是否有過期了。於是瀏覽器就膽膽襟襟的傳送乙個請求帶上if-modify-since：wed, 10 aug 15:32:18 gmt
然後伺服器發現：這個檔案我在這個時間後還沒修改過，不需要給你任何資訊了，返回304就行了。於是瀏覽器獲取到304後就去快取中歡歡喜喜獲取資源了。
如果我們按下了ctrl+f5,這個可是要命了，告訴瀏覽器，你先把你快取中的這個檔案給我刪了，然後再去伺服器請求個完整的資源檔案下來。於是客戶端就完成了強行更新的操作...實際上很少人使用，因為它的計算是使用演算法來得出的，而演算法會占用服務端計算的資源，所有服務端的資源都是寶貴的，所以就很少使用了。
深入了解HTTP協議
1.什麼是http協議 http是hypertext transfer protocol 超文字傳輸協議 的簡寫，它是tcp ip協議的乙個應用層協議，用於定義web瀏覽器與web伺服器之間交換資料的過程。他用於界定客戶端向服務端鏈結時的通訊格式，目前有兩個版本 http1.0和http1.1 2....
redis深入了解（一）
redis的常見問題 1.redis是記憶體版資料庫，如果記憶體滿了怎麼辦？2.redis是否是執行緒安全的資料庫 redis 是 執行緒安全 redis是乙個開源，先進的 key value 儲存，並用於構建高效能，可擴充套件的web應用程式的完美解決方案，是 執行緒安全 的。redis三個主要特...
深入了解Material Design（一）
material design material design大家並不陌生，google為了保證android平台上互動及視覺規範化提出了material design這個設計理念，它包括視覺 互動等多個方面。本文，在初步介紹material design的基礎上，以乙個開發者的視角來帶大家來深入了...