浏览器缓存的理解与应用

关于浏览器缓存的利用

如果很好的利用缓存能够很好的对网页速度进行优化，能够缩短请求资源的时间，对于已缓存的文件可以直接访问缓存，能够减少带宽。
当我们请求数据时，可以利用缓存直接访问缓存的内容不发起请求，或者是发起请求但是后端存储的资源并未发生改变，就不再将数据回传，能够减少数据响应的时间。

缓存的位置

缓存按位置区分可以分为四种，Service Worker，Memory Cache，Disk Cache，Push Cache，当依次查找这些位置都没有找到时，才会去请求网络。

1.Service Worker

Service Worker 是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。使用 Service Worker的话，传输协议必须为 HTTPS。因为 Service Worker 中涉及到请求拦截，所以必须使用 HTTPS 协议来保障安全。Service Worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。

2.Memory Cache

Memory Cache是内存中的缓存，主要包含的是当前中页面中已经获取到的资源,例如页面上已经下载的样式、脚本、图片等，当我们访问过页面再次刷新就会发现里面很多内容都会访问缓存，即状态码为304，读取内存速度较快，但是缓存持续性很短并且，关闭当前的Tab 页面，内存中的缓存也就被释放了。
需要注意的事情是，内存的缓存与Cache-Contro的值无关，去匹配资源的时候不仅要对url做匹配，还可能对Content-Type，CORS等其他特征进行匹配。

3. Disk Cache

Disk Cache 是存储在硬盘中的缓存，读取速度比Memory Cache慢，但是什么都能存储到磁盘中，比之 Memory Cache 能缓存的数据更多时效性更长。
在所有浏览器缓存中，Disk Cache 覆盖面基本是最大的。它会根据 HTTP Herder 中的字段判断哪些资源需要缓存，哪些资源可以不请求直接使用，哪些资源已经过期需要重新请求。并且即使在跨站点的情况下，相同地址的资源一旦被硬盘缓存下来，就不会再次去请求数据。绝大部分的缓存都来自 Disk Cache。

4. Push Cache

这个一般很少使用，一般是在前面的三种都没找到他才会被使用。

缓存的方式

强缓存

可以通过对HTTP Header 中的Expires和Cache-Control来实现

1.设置Expires

设置Expires=max-age + 请求时间，可以在设置的过期时间前访问缓存中的数据。但是如果更改了本地时间，可能就会影响缓存的时效。
例如：
Expires: Wed, 01 Oct 2021 00:21:00 GMT表示资源会在 Wed, 01 Oct 2021 00:21:00 GMT 后过期，需要再次请求获取数据。

2.设置Cache-Control

指令	作用
public	所有内容都将被缓存，客户端和代理服务器都可缓存 ，可被任何中间节点缓存。
private	所有内容只有客户端可以缓存，代理服务器只能转发不能缓存。
no-cache	浏览器在使用缓存数据时，需要先确认一下数据是否还跟服务器保持一致。如果不一致则发起请求，一致则会访问缓存
no-store	所有内容都不会缓存，即每次都会请求最新的内容
max-age	max-age=xx，表示缓存内容在xx秒后消失。
s-maxage	同max-age作用一样，只在代理服务器中生效。s-maxage的优先级高于max-age。如果存在s-maxage，则会覆盖掉max-age。
max-stale	能容忍的最大过期时间，max-stale=30，30秒内即使缓存过期也会使用缓存
min-fresh	能够容忍的最小新鲜度。min-fresh标示了客户端不愿意接受新鲜度不多于当前的age加上min-fresh设定的时间之和的响应。例如min-fresh=30，希望在30s内获取最新的响应。

Expires和Cache-Control相比较

1.Cache-Control优先级高于Expires。
2.不支持HTTP1.1的情况下使用Expires，不能使用Cache-Control。
3.对于频繁变动的资源使用Cache-Control: no-cache是比较好的选择，既能够在服务器端数据有所更新时发送请求获取最新的内容，也能在服务器端资源未更新的情况下访问缓存。
4.对于不常变化的资源可以设置Cache-Control: max-age=xx，在资源更新的时候我们可以通过更改资源的名称以及版本号来使其访问最新的内容。

协商缓存

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程。
协商缓存可以通过设置HTTP Header中的Last-Modified 和 ETag 来实现。