網上關於web快取的文章很多，今天彙總一下。
一般針對靜態資源如css,js,等使用快取，原因如下：
快取分為服務端側（server side，比如 nginx、apache）和客戶端側（client side，比如 web browser）。
常用的服務端快取有cdn快取，客戶端快取就是指瀏覽器快取。
瀏覽器快取分為強快取和協商快取：
1 強快取：瀏覽器在載入資源時，先根據這個資源的一些http header判斷它是否命中強快取，強快取如果命中，瀏覽器直接從自己的快取中讀取資源，不會發請求到伺服器。比如某個css檔案，如果瀏覽器在載入它所在的網頁時，這個css檔案的快取配置命中了強快取，瀏覽器就直接從快取中載入這個css，連請求都不會傳送到網頁所在伺服器；
2 協商快取：當強快取沒有命中的時候，瀏覽器一定會傳送乙個請求到伺服器，通過伺服器端依據資源的另外一些http header驗證這個資源是否命中協商快取，如果協商快取命中，伺服器會將這個請求返回（304），但是不會返回這個資源的資料，而是告訴客戶端可以直接從快取中載入這個資源，於是瀏覽器就又會從自己的快取中去載入這個資源；若未命中請求，則將資源返回客戶端，並更新本地快取資料（200）。
強快取與協商快取區別：強快取不發請求到伺服器，協商快取會發請求到伺服器。
1 html meta標籤控制快取（非http協議定義）
上述**的作用是告訴瀏覽器當前頁面不被快取，每次訪問都需要去伺服器拉取。這種方法使用上很簡單，但只有部分瀏覽器可以支援，而且所有快取**伺服器都不支援，因為**不解析html內容本身。
2 http頭資訊控制快取
http頭資訊控制快取是通過expires（強快取）、cache-control（強快取）、last-modified/if-modified-since（協商快取）、etag/if-none-match（協商快取）實現，下面詳細介紹。
1）expires是http1.0提出的乙個表示資源過期時間的header，它描述的是乙個絕對時間，由伺服器返回，用gmt格式的字串表示，如：expires:thu, 31 dec 2016 23:55:55 gmt，
讀取快取資料條件：快取過期時間（伺服器的）< 當前時間（客戶端的2）cache-control描述的是乙個相對時間，在進行快取命中的時候，都是利用客戶端時間進行判斷，所以相比較expires，cache-control的快取管理更有效，安全一些。
讀取快取資料條件：上次快取時間（客戶端的）+max-age < 當前時間（客戶端的）各個訊息中的指令含義如下：
public指示響應可被任何快取區快取。
private指示對於單個使用者的整個或部分響應訊息，不能被共享快取處理。這允許伺服器僅僅描述當前使用者的部分響應訊息，此響應訊息對於其他使用者的請求無效。
no-cache指示請求或響應訊息不能快取，該選項並不是說可以設定」不快取「，而是需要和伺服器確認
no-store在請求訊息中傳送將使得請求和響應訊息都不使用快取，完全不存下來。
max-age指示客戶機可以接收生存期不大於指定時間（以秒為單位）的響應。上次快取時間（客戶端的）+max-age（64200s）《客戶端當前時間
min-fresh指示客戶機可以接收響應時間小於當前時間加上指定時間的響應。
max-stale指示客戶機可以接收超出超時期間的響應訊息。如果指定max-stale訊息的值，那麼客戶機可以接收超出超時期指定值之內的響應訊息。
3）last-modified/if-modified-since：last-modified/if-modified-since要配合cache-control使用。
last-modified：標示這個響應資源的最後修改時間。web伺服器在響應請求時，告訴瀏覽器資源的最後修改時間。
if-modified-since：當資源過期時（強快取失效），發現資源具有last-modified宣告，則再次向web伺服器請求時帶上頭 if-modified-since，表示請求時間。web伺服器收到請求後發現有頭if-modified-since 則與被請求資源的最後修改時間進行比對。若最後修改時間較新，說明資源又被改動過，則響應整片資源內容（寫在響應訊息包體內），http 200；若最後修改時間較舊，說明資源無新修改，則響應http 304 (無需包體，節省瀏覽)，告知瀏覽器繼續使用所儲存的cache。
缺點：http1.1中etag解決了上述問題。
4）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。
etag是伺服器自動生成或者由開發者生成的對應資源在伺服器端的唯一識別符號，能夠更加準確的控制快取。last-modified與etag一起使用時，伺服器會優先驗證etag。
etag
2 瀏覽器請求流程圖
瀏覽器第一次請求流程圖
瀏覽器再次請求時
3、使用者行為與快取
瀏覽器快取行為還有使用者的行為有關，引用文章瀏覽器 http 協議快取機制詳解的結論
cdn快取屬於cache伺服器的一種。
cdn的全稱是content delivery network，即內容分發網路。其目的是通過在現有的internet中增加一層新的網路架構，將**的內容發布到最接近使用者的網路"邊緣"，使使用者可 以就近取得所需的內容，解決internet網路擁塞狀況，提高使用者訪問**的響應速度。從技術上全面解決由於網路頻寬小、使用者訪問量大、網點分布不均等 原因，解決使用者訪問**的響應速度慢的根本原因。
通過上圖，我們可以了解到，使用了cdn快取後的**的訪問過程為：
1)、使用者向瀏覽器提供要訪問的網域名稱；
2)、瀏覽器呼叫網域名稱解析庫對網域名稱進行解析，由於cdn對網域名稱解析過程進行了調整，所以解析函式庫一般得到的是該網域名稱對應的cname記錄，為了得到實際ip位址，瀏覽器需要再次對獲得的cname網域名稱進行解析以得到實際的ip位址；在此過程中，使用的全域性負載均衡dns解析，如根據地理位置信 息解析對應的ip位址，使得使用者能就近訪問。
3)、此次解析得到cdn快取伺服器的ip位址，瀏覽器在得到實際的ip位址以後，向快取伺服器發出訪問請求；
4)、若請求檔案並未修改，返回304（充當伺服器的角色）。若當前檔案已過期，則快取伺服器根據瀏覽器提供的要訪問的網域名稱，通過cache內部專用dns解析得到此網域名稱的實際ip位址，再由快取伺服器向此實際ip位址提交訪問請求；
5)、快取伺服器從實際ip位址得得到內容以後，一方面在本地進行儲存，以備以後使用，二方面把獲取的資料返回給客戶端，完成資料服務過程；
6)、客戶端得到由快取伺服器返回的資料以後顯示出來並完成整個瀏覽的資料請求過程。
web前端 快取
快取優勢 提高訪問速度 節省頻寬 減輕伺服器壓力 增強使用者體驗 快取型別 服務端快取 資料庫快取 將查詢的資料放到記憶體 cdn快取 靜態資源快取 伺服器快取。瀏覽器快取 瀏覽器都實現了http快取 cookie，web storage html5快取 可配置需要快取的資源 網路無連線應用仍可用 ...
web前端效能優化 快取
雅虎的16條優化準則，作為前端開發工程師，都是耳熟能詳，信手拈來。但很多時候也能難完全的做得到，一些準則跟工程原則是衝突的，難以落實起來。js檔案放尾部，css檔案放頭部等，這些基本的優化點還是可以做到，但是有時候遇到網速慢的情況，會出現一段時間的白屏，從使用者體驗的角度來說，還是有提公升的空間。根...
Web前端資料快取處理
我的這個示例也是在開發中遇到的，場景在web後台管理系統中。系統中有一些配置資料在前端需要頻繁使用，所以做了乙個前端的快取。這個配置資料在後台是放在redis中快取的，雖然前端請求對資料庫影響不大，但是頻繁對系統進行請求還是有些不妥。大致邏輯 1.後台快取放在redis中，配置資料有改動時，重新整理...