浏览器缓存

目录

浏览器缓存的位置和优先级

不同缓存之间的差别

浏览器缓存策略

---

        前段时间学长总结了我们接下来需要学习的内容，我准备一边学着自己想要去学习的新内容，一边去学习一些面试要问到的知识。下面是关于浏览器缓存的一些内容，整理的可能还不太全。

浏览器缓存的位置和优先级

1. Memory Cache(内存缓存)

2. Service Worker

3. Disk Cache(硬盘缓存)

4. Push Cache(推送缓存)

5. 如果没有在上面的缓存位置中找到对应的资源，浏览器就会向服务器发送请求，获取最新的资源，但是，如果服务器返回的响应头中包含了缓存策略（如：Cache-Control、Expires等）,浏览器会根据缓存策略来判断是否需要使用缓存，如果缓存策略中指定了资源可以缓存，并且缓存时间还没有过期，浏览器就可以使用缓存，否则，浏览器就会重新请求资源。

不同缓存之间的差别

1. Service Worker

   和WebWorker类似，是独立的线程，我们可以在这个线程中缓存文件，在主线程需要的时候读取这里的文件，Service Worker使我们可以自由选择缓存哪些文件以及文件的匹配、读取规则，并且缓存是持续性的。它可以在离线状态下使用。

2. Memory Cache(内存缓存)

   内存缓存，是最快的缓存位置，但只是在浏览器打开期间有效，内存缓存不是持续性的，缓存会随着进程的释放而释放。

3. Disk Cache(硬盘缓存)

   硬盘缓存，是最常用的缓存，可以在浏览器关闭后仍然有效，相较于内存缓存的持续性和容量更优，它会根据HTTP header字段判断哪些资源需要缓存

4. Push Cache(推送缓存)

   推送缓存，是HTTP/2的内容，只能在HTP/2协议下使用，目前应用较少

浏览器缓存策略

浏览器缓存策略分为两种：强缓存（本地缓存）和协商缓存（弱缓存），在发送请求之前，先检查强缓存，若没有找到对应的资源，就发起请求判断是否需要弱缓存。

• 强缓存是不发起请求的，直接使用缓存内的内容，浏览器将js、css、image、font-family等存到内存（存小文件）或者磁盘（存大文件），下次用户再次访问时就存内存中取出，提升性能。

• 协商缓存：需要往后台发送请求，通过判断来决定是使用协商缓存，如果请求内容还没发生变化，则请求返回304（服务器收到请求，但内容无变化），浏览器就用浏览器缓存内的内容。

• 如何触发强缓存

  1. http1.0使用Expires响应标头

     如果服务器返回的响应头中包含Expires（时间戳），那么客户端发送请求的时间在Expires之前的话，就触发强缓存。

  2. http1.1使用Cache-Control响应标头

     同样是服务器返回的一个相应标头，提供一些配置选项，其优先级比Expires高

     CACHE-DIRECTIVE	说明
     public	所有内容都将被缓存（客户端和代理服务器都可缓存）
     private	内容只缓存到私有缓存中（进客户端可以缓存，代理服务器不可缓存）
     no-cache	必须先与服务器确认返回的响应是否更改，然后才能使用该相应来满足后续对同一网址请求。因此，如果存在合适的验证令牌（ETag），no-cache会发起往返通信来验证缓存的响应，如果资源未被更改，可以避免下载。
     no-store	所有内容都不会被缓存到缓存或者Internet临时文件中
     must-revalidation/proxy-revalidation	如果缓存的内容失效，请求必须发送到服务器/代理以进行重新验证
     max-age=xxx(xxx is numeric)	缓存内容将在xxx秒后失效，这个选项只在HTTP1.1可用，并如果和Last-Modified一起使用，优先级较高。

• 如何触发协商缓存

  1. http1.0使用请求头：If-Modified-Since，响应头：Last-Modified

     服务器在上次响应请求时，返回一个带Last-Modified的响应头，值为一个时间戳，表示该资源最后一次在服务器修改的时间，当客户端再一次请求这个资源的时候，请求头就会带上If-Modified-Since，值为上次服务器发来的Last-Modified，服务器收到后，就和该资源最后修改时间对比，没变化就返回304，触发协商缓存。

     弊端：时间间隔最小是1s，如果请求的资源在1s内发生了改变，可能触发协商缓存，导致为u发获取到最新的资源。

  2. http1.0使用请求头：If-None-Match，响应头： Etag

     为解决间隔最小1s的问题， If-None-Match和Etag就诞生了。 Etag是由服务器生成的， 是每个资源的唯一标识字符串， 随资源变化而改变。 判断过程和http1.0的一致，请求的时候携带 If-None-Match，然后服务器比较这两个值，没变化就返回304， 触发协商缓存。 弊端： 占用服务器资源较多， 虽然准确度高，但是性能上不如Last-Modified & If-Modified-Since的方法。不过实际的影响不会很大， 基本上可以忽略不计。