浏览器缓存的一些知识

1，缓存的作用

　　缓存可以优化性能，应该是最简单的一种方式了，可以减少一些不必要的请求，或者在数据一致的情况下，不再将数据回传回来。

2，缓存位置

　　缓存位置有四种，各自有优先级，当四种都没有命中时，才会去请求网络

• service worke ： 我们可以来手动控制缓存哪些文件，如何匹配和读取缓存。不管service worker命中缓存与否。该请求浏览器上都显示的from service worker。
• memory cache： 内存中的缓存，读取速度比磁盘中的缓存快很多，但是持续时间短，会随着进程的释放而释放。
• disk cache： 硬盘中的缓存，读取速度慢，但容量大，存储时间很长。会根据header中的字段判断哪些需要缓存，哪些资源过期了需要请求，哪些资源可以不请求直接使用。
• push cache：http2中的内容。当以上三种都没有命中时才使用。缓存时间短，会话结束就被释放。

3，缓存策略

　　一：强缓存：强缓存可以通过设置header的Expires和Cache-Control，表示在缓存期间不用请求，status为200

　　　　1，Expires

　　　　　　Expires: Fri, 17 Dec 2021 11:11:00 GMT
　　　　　　
　　　　　　表示在2021年12月17 11:11:00后会过期，需要再次请求。判断是基于本地时间处理的，修改本地时间会造成缓存过期

　　　　2，Cache-Control

　　　　　　Cache-control: max-age=60

　　　　　　优先级高于Expires，表示在60秒后过期，需要再次请求。

　　

　　二：协商缓存：缓存过期，就需要发起请求验证资源是不是更新了。可以通过设置header的Last-Modified和ETag

　　　　1，Last-Modified和If-Modified-Since

　　　　　　Last-Modified为本地文件最后修改日期，If-Modified-Since会发送该值查询是否有更新，如果有更新则返回更新的资源，否则返回304状态码

　　　　　　本地打开缓存文件，即使没修改也会造成Last-Modified被更改，浪费请求

　　　　　　Last-Modified只能以秒计时，如果在1秒之内的改变文件，服务端还是会以为文件没有改变，不能获取最新资源

　　　　2，ETag和If-None-Match

　　　　　　优先级比Last-Modified高，ETag类似文件指纹，If-None-Match会将ETag发送到服务端，如果指纹有改变，则返回新的资源。

4，实际使用

　　对频繁变动的资源，Cache-Control设置为no-cache使每次都发送请求，再配合ETag和Last-Modified来验证资源是否过期。

　　代码文件： 文件名进行hash处理，Cache-Control设置时间为一个长时间，这样的话只有当hash变化的时候才去请求新资源，否则就一直使用缓存资源