前端页面缓存问题

浏览器缓存

浏览器通常会将常用资源缓存在你的个人电脑的磁盘和内存中。比如我的Chrome浏览器的缓存存放位置就在C:\Users\admin\AppData\Local\Google\Chrome\User Data\Default\Cache

缓存位置

from Service Worker
from memory cache
from disk cache
真正的网络请求（显示资源的具体大小）

1、Service Worker
本质是作为服务器与客户端之间的代理服务器，伴随着PWA出现。Service Worker真正意义上将缓存控制权交给了前端，相比于LocalStorage、SessionStorage，后两者只是单纯的接口数据缓存，例如用户信息（一个对象）、列表信息（一个数组），而前者可以缓存静态资源，甚至拦截网络请求，根据网络状况作出不同的缓存策略。
2、memory cache
将资源缓存在了内存中。事实上，所有的网络请求都会被浏览器缓存到内存中，因为内存容量有限，缓存不能无限存放在内存中，所以是短期缓存。内存缓存的控制权在浏览器，前后端都不能干涉。
3、disk cache
将资源缓存在硬盘中。disk cache也叫http cahce，因为其严格遵守http响应头字段来判断哪些资源是否要被缓存，哪些资源是否已经过期。绝大多数缓存都是disk cache。硬盘缓存的控制权在后端。disk cahce分为强制缓存与对比缓存。

清除缓存

对于一个html页面，缓存分为页面元素、引入的静态资源文件
1、页面内容

<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache" content="no-cache">
<meta http-equiv="Expires" content="0" />

2、静态资源——引入路径加随机数

<link rel="stylesheet" href="../assets/css/main.css?v=20200723bs">

也可以动态加时间戳

<script type="text/javascript">document.write('<script src="index.js?t='+new Date().getTime()+'" type="text/javascript" charset="utf-8"><\/script>');</script>

Cache-Control字段值：
max-age=xxx，最大的有效时间
must-revalidate，如果超过了max-age的时间，必须向服务器发送请求，验证资源的有效性
no-cache，基本等价于max-age=0，由对比缓存来决定是否缓存资源 no-store，真正意义上的不缓存
public，所有内容都可以被缓存 private，所有内容只有客户端可以缓存，代理服务器不能缓存。默认值