前端緩存總結
前端緩存分爲 HTTP緩存 和 瀏覽器緩存;
圖片引用來源：https://www.jianshu.com/p/256d0873c398
前端用於緩存的關鍵字段
program, cache-control, expires
都是控制網頁緩存的，使用強緩存時，就有限判斷緩存是否過期，如果不過期就直接返回。如果過期，就進行協商緩存處理。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- HTTP 1.0 -->
<meta http-equiv="pragma" content="no-cache">
<!-- HTTP 1.1 -->
<meta http-equiv="cache-control" content="no-cache">
<!-- Prevent caching at the proxy server -->
<meta http-equiv="expires" content="0">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
last-modified, if-modified-since, etag， if-none-match
last-modified / if-modified-since; etag / if-none-match屬於協商緩存。
1、last-modified, if-modified-since
利用時間戳來比較客戶端是否有服務器端最新的資源。一般用於靜態資源文件，比如圖片，文件等。具體流程是：當瀏覽器第一次請求資源文件時，服務器返回響應時，會把該資源的最後修改時間寫到last-modified中給瀏覽器端；瀏覽器第二次請求該資源的時候，會把該修改時間通過if-modified-since帶回給服務器端；如果時間相等，則返回304；
2、etag,if-none-match
利用資源的唯一標識符比較客戶端是否有服務器端的最新的資源。一般用於用於靜態數據，動態數據。具體流程是: 當瀏覽器第一次請求數據時，服務器會根據數據內容，計算出唯一標示值，然後通過etag關鍵值，把該值傳遞給瀏覽器端；當瀏覽器端第二次請求數據時，瀏覽器會把該唯一標示，通過if-none-match字段帶到服務器端， 服務器端比較兩個etag值，如果相等，那麼就返回304；
前端緩存的分類
靜態資源文件，如圖片，文件等
使用last-modified, if-modified-since對比服務器與客戶端中存儲的文件的時間戳。
靜態數據， 比如省市區，性別等
永遠使用本地緩存數據，由後端返回id值，在前端通過id獲取數據。
動態數據， 比如用戶信息
利用etag/if-none-tag來比較該數據計算出來的唯一表示值。如果相等，則表示瀏覽器端緩存的是最新的數據。
列表數據
未完待續。。。