浏览器缓存机制(超详细总结)

目录

1.缓存理解

2.缓存分类

强缓存 & 协商缓存的共同点

强缓存 VS 协商缓存的不同点

3.强缓存的header参数

4.协商缓存的header参数

---

1.缓存理解

1. 缓存定义：浏览器在本地磁盘上将用户之前请求的数据存储起来，当访问着再次需要修改数据的时候，无需再次发送请求，直接从浏览器本地获取数据

2. 缓存的好处：

   1. 减少请求的个数

   2. 节省带宽，避免浪费不必要的网络资源

   3. 减轻服务器压力

   4. 提高浏览器网页的加载速度，提高用户体验

2.缓存分类

1. 强存缓

   1. 不会向服务器发送请求，直接从本地缓存中获取数据

   2. 请求资源的状态码为：200 ok （from memory cache）

2. 协商缓存

   1. 想服务器发送请求，服务器会根据请求的资源判断是否命中协商缓存

   2. 如果命中，则返回304状态码通知浏览器从缓存中读取资源

3. 强缓存 & 协商缓存的共同点

   1. 都是从浏览器端读取资源

4. 强缓存 VS 协商缓存的不同点

   1. 强缓存不发请求给服务器

   2. 协商缓存发请求给我服务器，根据服务器返回的信息决定是否使用缓存

3.强缓存的header参数

• expires：（到期；有效期）

  • 这是http1.0中的规范它的值为一个绝对时间的GMT格式的字符串，如：Mon,10 Jun 2015 21:31:12 GMT，如果发送请求的时间在expires之前，那么本地缓存始终有效，否则就会发送请求到服务器来获取

• cache-control：max-age = number（缓存控制）

  • 这是http1.1出现的header信息，主要是利用该字段的max-age来来进行判断，他是一个相对值；资源第一次的请求时间和Cache-Control设定的有效期，计算出一个资源过期时间，再拿这个过期时间跟当前的请求时间比较，如果请求时间在过期时间之前，就能命中缓存，否则就不行

• 注意：当cache-control 与 Expires共存的时候cache-control的优先级更高

4.协商缓存的header参数

​

重点：协商缓存都是由服务器来确定缓存资源是否可用，使用客户端与服务器要通过某种标识来进行通信，从而让服务器判断请求资源是否可以缓存访问

​

• Last-Modified/if-Modified-Since: 二者的值都是GMT格式的时间字符串

  1. 浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在response的header加上Last-Modified的header，这个header标识这个资源在服务器的最后修改时间

  2. 浏览器再次跟服务器请求这个资源时，在request的header上加上if-Modified-Since的header，这个header的值就是上一个请求时返回的Last-Modified的值

  3. 服务器再次收到资源请求时根据浏览器传过来if-Modified-Since和资源在服务器上的最后修改时间判断资源是否有变化，如果没有变化则返回304 Not Modified，但是不会返回资源内容；如果有变化，就正常返回资源内容。当服务器返回304 Not Modified的响应时，response header中不会添加Last-Modified的header，因为既然资源没有变化，那么Last-Modified也就不会改变，这是服务器返回304时的response header

  4. 浏览器收到304的响应后就会从缓存中加载资源

  5. 如果协商缓存没有命中，浏览器直接从服务器加载资源时，Last-Modified的Header在重新加载的时候会被更新，下次请求时，If-Modified-Since会启动上次返回的Last-Modified值

  6. 

      解释一下上方图片，看懂了就可以理解啦：

     1.图中有绿色框为我们服务器（浏览器请求），当我们发起请求后，浏览器成功后会放回数据，并在请求头中返回Last-Modified=‘过期时间’

     2.以后我们每次发起请求都会在请求头中添加 If-Modified-Since = ‘过期时间’，服务器中的该资源的最后修改时间比对，如果比对成功，时间没变，则代表缓存命中，直接走缓存；如果缓存没命中，则服务器发送新数据下来，并还会派发新的Last-Modified

• Etag/If-None-Match

  1. 这两个值是由服务器生成的每个资源的唯一标识字符串，只要资源有变化这个值就会变化

  2. 判断过程与Last-Modified/If-Modified-Since类似

• 既生 Last-Modified 何生 Etag

  • HTTP1.1中Etag的出现主要是为了解决几个Last-Modified比较难解决的问题

  • 某些服务器不能精确的得到文件的最后修改时间

  • 某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方是1s内修改了N次)，If-Modified-Since能检查到精度是s级，这种修改无法判断(或者是UNiX记录MTIME只能精确到秒)

• 小结：

  • 利用Etag能够更加精确的控制缓存，因为Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符

  • Last-Modified与ETag是可以一起使用的，服务器会优先验证Etag，一致的情况下，才会继续对比Last-Modified,最后才决定是否返回304