[toc]
緩存有哪些香浩？
影響到最終h5展示到用戶的緩存來源有以下幾個方面：
1.服務(wù)端緩存
2.cdn節(jié)點緩存
3.瀏覽器緩存
4.離線包緩存
端上怎么配合h5做緩存？
端上做h5容器臼勉，其實相當(dāng)于定制一個瀏覽器來承接h5頁面邻吭。h5頁面的加載頁與在瀏覽器中加載執(zhí)行的邏輯相同，向其中注入js對象就相當(dāng)于內(nèi)置的瀏覽器方法等同宴霸。
端上影響到h5緩存策略的設(shè)置來源于：
WebSettings webSettings = webview.getSettings();
webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
在其中有三種策略：
/**
* 優(yōu)先本地緩存囱晴，沒有則到網(wǎng)絡(luò)請求或者
*/
public static final int LOAD_CACHE_ELSE_NETWORK = 1;
/**
* 不加載緩存中內(nèi)容膏蚓，只做網(wǎng)絡(luò)請求
*/
public static final int LOAD_NO_CACHE = 2;
/**
* 只加載緩存中的內(nèi)容
*/
public static final int LOAD_CACHE_ONLY = 3;
/**
* 默認模式：沒有設(shè)置緩存策略時候，當(dāng)有本地緩存同時expires沒有過期的時候使用緩存畸写，當(dāng)緩存不可用時驮瞧，使用網(wǎng)絡(luò)請求數(shù)據(jù)
*/
public static final int LOAD_DEFAULT = -1;
三種策略對應(yīng)的緩存策略比較直接；
設(shè)置no_cache會直接忽略服務(wù)端header的設(shè)置枯芬，每次都走無緩存邏輯论笔；也就是h5的緩存策略會被跳過，不建議如此處理千所；
一刀切的方式不利于進行加載速度優(yōu)化和流量優(yōu)化狂魔；
服務(wù)端配置-header的解析
服務(wù)端與客戶端交互的header，分為 reqeust-header 淫痰、 resonse-header兩種最楷。
瀏覽器緩存策略也包含在header中，對于header中涉及到的瀏覽器參數(shù)待错，可以進行一次盤點籽孙，理解清楚各個參數(shù)對瀏覽器行為的影響，有助于理解整個緩存邏輯的執(zhí)行情況火俄；
http請求包含： 請求行 --> http頭(通用信息頭犯建、請求頭、實體頭) --> 請求報文主體(只有post才有報文實體)
http響應(yīng)包含： 狀態(tài)行 --> http頭(通用信息頭烛占、響應(yīng)頭胎挎、實體頭) --> ** 響應(yīng)報文主體**
通用信息頭指的是請求和響應(yīng)報文都支持的頭域沟启，分別為 cache-control忆家、connection、date德迹、pragma芽卿、transfer-encoding、upgrade胳搞、via卸例；
實體頭則是實體信息的實體 分別為：allow 、 content-base肌毅、content-encoding筷转、content-language、content-length悬而、content-location呜舒、content-md5、content-range笨奠、content-type袭蝗、etag唤殴、expires、last-modified到腥、extentsion-header朵逝。
為了方便理解把通用信息頭，響應(yīng)/請求頭乡范，實體頭都歸為http頭配名。
同時 ：從緩存判斷順序來說 分為：
- 1.強制緩存：通過cache-control/expires配置生效
- 2.啟發(fā)式緩存：未配置cache-control/expires時候，通過date + (date-last-modified)/10計算緩存過期時間
- 3.協(xié)商緩存 ：通過 etag/if-none-match last-modified/if-modified-since 兩個數(shù)值對來配合生效 Etag / If-None-Match的優(yōu)先級比Last-Modified / If-Modified-Since高晋辆。
- 同時生效順序為： 強制緩存>啟發(fā)式緩存>協(xié)商緩存
以上為基礎(chǔ)知識段誊，為了更好的定位線上一個問題需要大概瀏覽。
為什么會有緩存3天時候栈拖？
問題產(chǎn)生流程：
發(fā)布時間 13號 七點
離線包js文件更新再 11號 js文件更新 utm規(guī)則改變
17號改動了cache-control邏輯连舍，但是還要依賴用戶清緩存來做刷新緩存操作，改動不徹底
18號發(fā)布新的html 涩哟，改名進行替換
從發(fā)布流程來看索赏，預(yù)期結(jié)果是對某一html頁面進行更新使其承擔(dān)更多的業(yè)務(wù)，也就是常規(guī)的業(yè)務(wù)流程改動贴彼。為何再端上會收到大規(guī)模的問題反饋呢潜腻？
以上的問題路徑并不能得出更多的信息，通過日志庫查詢發(fā)現(xiàn)用戶適用路徑基本來自新改動頁面發(fā)布之前就已經(jīng)訪問該頁面器仗，到發(fā)布之后再來訪問頁面的一個基本路徑融涣。結(jié)合聽云訪問日志記錄看，在15號發(fā)起該頁面的請求只有4個精钮，也就是大部分請求都被端上捂住了威鹿，沒有發(fā)起成功的服務(wù)器請求。
而從上緩存策略來看轨香，只有強制緩存+啟發(fā)式緩存會把請求捂住再本地忽你。那么跟蹤問題就有了頭緒；
找到相應(yīng)的html頁面對header進行分析臂容，找到目標(biāo)值科雳，對強制緩存和啟發(fā)式緩存的值進行計算，得出緩存過期的時間脓杉，看是否覆蓋用戶訪問的時間段糟秘。
最終計算得到：
(線上設(shè)置)沒有cache-control 和expires的強緩存策略，會到啟發(fā)式緩存中球散，根據(jù)算法
const Date_value = new Date('Tue, 07 Apr 2020 08:32:28 GMT').getTime();
const LastModified_value = new Date('Tue, 31 Mar 2020 03:11:14 GMT').getTime();
const cacheTime = (Date_value - LastModified_value) / 10;
const Expires_timestamp = Date_value + cacheTime;
const Expires_value = new Date(Expires_timestamp);
console.log('Expires:', Expires_value); // Thu Apr 09 2020 05:43:07 GMT+0800 (中國標(biāo)準(zhǔn)時間)
(測試連接：*****year-card.html)得到的時間為：Expires: Wed Apr 08 2020 10:26:09 GMT+0800 (中國標(biāo)準(zhǔn)時間)
也就是會到8號才過期
當(dāng)本地時間調(diào)到 Wed Apr 08 2020 10:32:09時候尿赚，端上會發(fā)起一次304的服務(wù)端文件校驗請求，通過服務(wù)端文件是否發(fā)生改變的校驗來判斷重新請求還是直接讀取服務(wù)端緩存。
那么三天以上的緩存怎么計算得來的呢吼畏，通過date-last-modified 時間來看督赤，當(dāng)文件越舊，date越近泻蚊，那么計算出來的緩存時間就會越久躲舌。緩存三天以上完全有可能。
怎么做不同的h5頁面緩存策略性雄？
那么之后的h5頁面如何做緩存策略没卸？
1.首先webview 設(shè)置默認緩存策略 webview.setCacheMode(default);
2.區(qū)分業(yè)務(wù)的更新策略
頻繁更新的營銷頁面：營銷頁面直接設(shè)置緩存過期cache-control,expires (Cache-Control:max-age=600 覆蓋 Expires)
不頻繁更新的頁面：業(yè)務(wù)頁面，更新不頻繁的依靠文件etag/if-none_match 或者 last-modified / if-modified-since 兩個協(xié)商策略秒旋；
問題發(fā)生核心是什么约计？
瀏覽器緩存、服務(wù)器緩存迁筛、端上緩存煤蚌，三種緩存交織再一起，造成緩存問題排查首先得弄清楚緩存存取優(yōu)先級和存取策略细卧，才能復(fù)現(xiàn)缺少有效信息時候的緩存問題尉桩；
在端上沒有發(fā)起請求的情況下，一般是來自于強制緩存將請求捂住到本地造成緩存出現(xiàn)問題贪庙；
怎么預(yù)防大促的問題蜘犁？
h5 - nginx 緩存策略全局設(shè)置
客戶端靜態(tài)文件緩存nginx策略：
1、gif|jpg|jpeg|png|bmp|swf|flv|mp4|ico等文件止邮，緩存7天这橙。
2、js|css等文件导披，緩存1天屈扎。
3、html文件緩存300s (其他站頁面)
4盛卡、實時html頁面助隧，端上不緩存筑凫。(營銷頁面/活動)
備注：
端上緩存文件過期后滑沧，會再次從cdn獲取文件。
對promotion進行特殊處理 處理方案同京東的秒殺活動：
https://miaosha.jd.com/
線上問題對應(yīng)解決方案：
nginx已配置巍实，對于文件的cache時間進行指定滓技，出現(xiàn)問題nginx更新策略無法影響到所有緩存。這個時候只能對客戶端開關(guān)進行處理棚潦。
大促出現(xiàn)問題怎么解決：
1.apollo配置cachecotrol 為 nocache令漂， 會忽略nginx控制的瀏覽器緩存直接走無緩存邏輯
2.下發(fā)補丁做cachecotrol強行指定
