前端性能優化成神之路-瀏覽器緩存機制詳解
對一個網站而言，CSS、javascript、logo、圖標這些靜態資源文件更新的頻率都比較低，而這些文件又幾乎是每次http請求都需要的，如果將這些文件緩存在瀏覽器中，可以極好的改善性能。
通過設置http頭中的cache-control和expires的屬性和HTML Meta標簽，可設定瀏覽器緩存，緩存時間可以是數天，甚至是幾個月。
瀏覽器緩存控制機制有兩種：HTML Meta標簽 vs. HTTP頭信息（主要）
HTML Meta 標簽定義的緩存機制
可以在HTML頁面的<head>節點中加入<meta>標簽，代碼如下：
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
上述代碼的作用是告訴瀏覽器當前頁面不被緩存，每次訪問都需要去服務器拉取。使用上很簡單，但只有部分瀏覽器可以支持，而且所有緩存代理服務器都不支持，因為代理不解析HTML內容本身。
HTTP頭信息緩存機制：
HTTP頭信息緩存機制有可以分為兩種強緩存（完全不問服務端資源有沒有更新，直接拿瀏覽器緩存）和協商緩存
強緩存——Expires策略
Expires是Web服務器響應消息頭字段，在響應http請求時告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器緩存取數據，而無需再次請求。
不過Expires 是HTTP 1.0的東西，現在默認瀏覽器均默認使用HTTP 1.1，所以它的作用基本忽略。
Expires 的一個缺點就是，返回的到期時間是服務器端的時間，這樣存在一個問題，如果客戶端的時間與服務器的時間相差很大（比如時鐘不同步，或者跨時區），那麽誤差就很大，所以在HTTP 1.1版開始，使用Cache-Control: max-age=秒替代。
強緩存——Cache-control策略（重點關註）：
Cache-Control與Expires的作用一致，都是指明當前資源的有效期，控制瀏覽器是否直接從瀏覽器緩存取數據還是重新發請求到服務器取數據。
只不過Cache-Control的選擇更多，設置更細致，如果同時設置的話，其優先級高於Expires
值可以是public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age
各個消息中的指令含義如下：
Public：指示響應可被任何緩存區緩存。
Private：指示對於單個用戶的整個或部分響應消息，不能被共享緩存處理。這允許服務器僅僅描述當用戶的部分響應消息，此響應消息對於其他用戶的請求無效。
no-cache：指示請求或響應消息不能緩存，該選項並不是說可以設置”不緩存“，容易望文生義~ （向服務端發起請求，再看服務端相關的配置比如Last-Modified這樣的信息進一步判斷瀏覽器的緩存有沒有過期）
no-store：用於防止重要的信息被無意的發布。在請求消息中發送將使得請求和響應消息都不使用緩存，完全不存下來。
s-maxage: s-maxage優先級高於max-age，只能指定public的緩存
max-age：指示客戶機可以接收生存期不大於指定時間（以秒為單位）的響應。（表示這個時間內，這個請求都是有效，不會再向服務端發起請求）
min-fresh：指示客戶機可以接收響應時間小於當前時間加上指定時間的響應。
max-stale：指示客戶機可以接收超出超時期間的響應消息。如果指定max-stale消息的值，那麽客戶機可以接收超出超時期指定值之內的響應消息。
協商緩存
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。
Etag/If-None-Match：Etag/If-None-Match也要配合Cache-Control使用。
Etag：web服務器響應請求時，告訴瀏覽器當前資源在服務器的唯一標識（生成規則由服務器決定）。Apache中，ETag的值，默認是對文件的索引節（INode），大小（Size）和最後修改時間（MTime）進行Hash後得到的。
If-None-Match：當資源過期時（使用Cache-Control標識的max-age），發現資源具有Etage聲明，則再次向web服務器請求時帶上頭If-None-Match （Etag的值）。web服務器收到請求後發現有頭If-None-Match 則與被請求資源的相應校驗串進行比對，決定返回200或304。
既生Last-Modified何生Etag
你可能會覺得使用Last-Modified已經足以讓瀏覽器知道本地的緩存副本是否足夠新，為什麽還需要Etag（實體標識）呢？HTTP1.1中Etag的出現主要是為了解決幾個Last-Modified比較難解決的問題：
Last-Modified標註的最後修改只能精確到秒級，如果某些文件在1秒鐘以內，被修改多次的話，它將不能準確標註文件的修改時間
如果某些文件會被定期生成，當有時內容並沒有任何變化，但Last-Modified卻改變了，導致文件沒法使用緩存
有可能存在服務器沒有準確獲取文件修改時間，或者與代理服務器時間不一致等情形
Etag是服務器自動生成或者由開發者生成的對應資源在服務器端的唯一標識符，能夠更加準確的控制緩存。Last-Modified與ETag一起使用時，服務器會優先驗證ETag。
yahoo的Yslow法則中則提示謹慎設置Etag：需要註意的是分布式系統裏多臺機器間文件的last-modified必須保持一致，以免負載均衡到不同機器導致比對失敗，Yahoo建議分布式系統盡量關閉掉Etag(每臺機器生成的etag都會不一樣，因為除了 last-modified、inode 也很難保持一致)。
Pragma行是為了兼容HTTP1.0，作用與Cache-Control: no-cache是一樣的。
最後總結下幾種狀態碼的區別：
用戶行為與緩存
瀏覽器緩存行為還有用戶的行為有關，如果大家對 強制刷新（Ctrl + F5） 還有印象的話應該能立刻明白我的意思~
前端性能優化成神之路-瀏覽器緩存機制詳解