理解缓存

背景：

H5页面在app中遇到了缓存问题，现象是页面一直加载打不开，有的手机清除缓存可以打开，有的需要卸载，都是ios，概率较小。发现问题不知道如何排查，于是学习和前端相关的缓存内容。

1.客户端 & webview的缓存

ios端回复：原生没有在代码中写和缓存相关的东西，只是配置了启用缓存，一分钟后过期，过期后会清理html，不会清理js。由此推测：缓存是浏览器产生的，那和浏览器相关的缓存都有哪些？

---

2.浏览器-html页面和http接口缓存

Q：缓存在做什么？
A：缓存读取是浏览器在向服务器发送请求资源之前，先查询一下本地缓存中是否存在需要的资源，如果存在，那便优先从缓存中读取。当缓存不存在或者过期，再向服务器发送请求。

html中http-equiv属性设置.png

get请求头的cache-control属性设置.png

其中cache-control与pragma属性一致，都是http的缓存策略。pragma是HTTP/1.0标准，基本只用于IE

A：具体cache-control都有哪些属性？
Q1： MDN-HTTP
Q2：生动的例子

A：缓存存在哪里?
Q：Memory Cache—内存的缓存、Disk Cache—硬盘的缓存

A：实际场景运用？
Q：频繁变动的资源—Cache-Control: no-cache、不常变化的资源—Cache-Control: max-age=31536000（一年）

http请求头缓存设置 > html文档http-equiv属性设置
设置了最大缓存时间，但为了解决更新的问题，就需要在文件名或url中添加 hash、 版本号、时间戳等动态字符，从而达到更改引用 URL 的目的，让之前的强制缓存失效

---

3.CDN缓存

关键字：内容的储存和分发 / 静态资源 / 遵守http标准协议

当Cache-Control设置了public，表示它既可以存在共享缓存，也可以被存在本地缓存，共享缓存，指客户端和服务器之间的缓存，即CDN

凑合看吧.png

举几个栗子

Cache-Control: public max-age=3600 
//本地缓存和 CDN 缓存均缓存 1 小时；
Cache-Control: private immutable
//不能缓存在 CDN，只能缓存在本地。并且一旦被缓存了，则不能被更新；
Cache-Control:no-store
//不能缓存
Cache-Control: no-cache 
//协商缓存。
Cache-Control: public max-age=3600 s-maxage=7200 
//本地缓存 1 小时，CDN 上缓存 2 小时；
Cache-Control: public max-age=3600 proxy-revalidate  
//本地和 CDN 均缓存 1 小时。但如果CDN收到请求，要向服务器确认缓存是否是最新内容。

4.浏览器DNS缓存

关键字：域名系统协议

凑合看吧2.png

浏览器会在本地会建立一个DNS缓存，在一段时间里，都是使用本地的缓存映射，从而减少向运营商DNS服务器查找和解析的时间。

各个浏览器的dns缓存时间，会有一定的差别。
在chrome浏览器中查看dns的缓存时间的方式：chrome://net-internals/#dns