[toc]
image
缓存有哪些？
影响到最终h5展示到用户的缓存来源有以下几个方面：
1.服务端缓存
2.cdn节点缓存
3.浏览器缓存
4.离线包缓存
端上怎么配合h5做缓存？
端上做h5容器，其实相当于定制一个浏览器来承接h5页面。h5页面的加载页与在浏览器中加载执行的逻辑相同，向其中注入js对象就相当于内置的浏览器方法等同。
端上影响到h5缓存策略的设置来源于：
WebSettings webSettings = webview.getSettings();
webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
在其中有三种策略：
/**
* 优先本地缓存，没有则到网络请求或者
*/
public static final int LOAD_CACHE_ELSE_NETWORK = 1;
/**
* 不加载缓存中内容，只做网络请求
*/
public static final int LOAD_NO_CACHE = 2;
/**
* 只加载缓存中的内容
*/
public static final int LOAD_CACHE_ONLY = 3;
/**
* 默认模式：没有设置缓存策略时候，当有本地缓存同时expires没有过期的时候使用缓存，当缓存不可用时，使用网络请求数据
*/
public static final int LOAD_DEFAULT = -1;
三种策略对应的缓存策略比较直接；
设置no_cache会直接忽略服务端header的设置，每次都走无缓存逻辑；也就是h5的缓存策略会被跳过，不建议如此处理；
一刀切的方式不利于进行加载速度优化和流量优化；
服务端配置-header的解析
服务端与客户端交互的header，分为 reqeust-header 、 resonse-header两种。
浏览器缓存策略也包含在header中，对于header中涉及到的浏览器参数，可以进行一次盘点，理解清楚各个参数对浏览器行为的影响，有助于理解整个缓存逻辑的执行情况；
image
http请求包含： 请求行 --> http头(通用信息头、请求头、实体头) --> 请求报文主体(只有post才有报文实体)
image
http响应包含： 状态行 --> http头(通用信息头、响应头、实体头) --> ** 响应报文主体**
通用信息头指的是请求和响应报文都支持的头域，分别为 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。
为了方便理解把通用信息头，响应/请求头，实体头都归为http头。
同时 ：从缓存判断顺序来说 分为：
- 1.强制缓存：通过cache-control/expires配置生效
- 2.启发式缓存：未配置cache-control/expires时候，通过date + (date-last-modified)/10计算缓存过期时间
- 3.协商缓存 ：通过 etag/if-none-match last-modified/if-modified-since 两个数值对来配合生效 Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高。
- 同时生效顺序为： 强制缓存>启发式缓存>协商缓存
image
以上为基础知识，为了更好的定位线上一个问题需要大概浏览。
为什么会有缓存3天时候？
问题产生流程：
发布时间 13号 七点
离线包js文件更新再 11号 js文件更新 utm规则改变
17号改动了cache-control逻辑，但是还要依赖用户清缓存来做刷新缓存操作，改动不彻底
18号发布新的html ，改名进行替换
从发布流程来看，预期结果是对某一html页面进行更新使其承担更多的业务，也就是常规的业务流程改动。为何再端上会收到大规模的问题反馈呢？
以上的问题路径并不能得出更多的信息，通过日志库查询发现用户适用路径基本来自新改动页面发布之前就已经访问该页面，到发布之后再来访问页面的一个基本路径。结合听云访问日志记录看，在15号发起该页面的请求只有4个，也就是大部分请求都被端上捂住了，没有发起成功的服务器请求。
而从上缓存策略来看，只有强制缓存+启发式缓存会把请求捂住再本地。那么跟踪问题就有了头绪；
找到相应的html页面对header进行分析，找到目标值，对强制缓存和启发式缓存的值进行计算，得出缓存过期的时间，看是否覆盖用户访问的时间段。
最终计算得到：
(线上设置)没有cache-control 和expires的强缓存策略，会到启发式缓存中，根据算法
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 (中国标准时间)
(测试连接：*****year-card.html)得到的时间为：Expires: Wed Apr 08 2020 10:26:09 GMT+0800 (中国标准时间)
也就是会到8号才过期
image
当本地时间调到 Wed Apr 08 2020 10:32:09时候，端上会发起一次304的服务端文件校验请求，通过服务端文件是否发生改变的校验来判断重新请求还是直接读取服务端缓存。
那么三天以上的缓存怎么计算得来的呢，通过date-last-modified 时间来看，当文件越旧，date越近，那么计算出来的缓存时间就会越久。缓存三天以上完全有可能。
怎么做不同的h5页面缓存策略？
那么之后的h5页面如何做缓存策略？
1.首先webview 设置默认缓存策略 webview.setCacheMode(default);
2.区分业务的更新策略
频繁更新的营销页面：营销页面直接设置缓存过期cache-control,expires (Cache-Control:max-age=600 覆盖 Expires)
不频繁更新的页面：业务页面，更新不频繁的依靠文件etag/if-none_match 或者 last-modified / if-modified-since 两个协商策略；
问题发生核心是什么？
浏览器缓存、服务器缓存、端上缓存，三种缓存交织再一起，造成缓存问题排查首先得弄清楚缓存存取优先级和存取策略，才能复现缺少有效信息时候的缓存问题；
在端上没有发起请求的情况下，一般是来自于强制缓存将请求捂住到本地造成缓存出现问题；
怎么预防大促的问题？
h5 - nginx 缓存策略全局设置
客户端静态文件缓存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/
线上问题对应解决方案：
nginx已配置，对于文件的cache时间进行指定，出现问题nginx更新策略无法影响到所有缓存。这个时候只能对客户端开关进行处理。
大促出现问题怎么解决：
1.apollo配置cachecotrol 为 nocache， 会忽略nginx控制的浏览器缓存直接走无缓存逻辑
2.下发补丁做cachecotrol强行指定
网友评论