浏览器缓存问题

图片来源网络，侵权联系删除

1. 浏览器缓存基本类型

• 强缓存

  浏览器加载资源时，会先根据本地缓存资源的 header 中的 Expire 和 Cache-control 信息判断是
  否命中强缓存，如果命中则，直接使用缓存中的资源，不再请求服务器

• 协商缓存

  当强缓存没有命中的时候，浏览器会发送一个请求到服务器，服务器根据请求头中的部分信息 If-Modify-Since 或 Etag 来判断是否命中缓存。如果命中，则返回 304 ，告诉浏览器资源未更新，可使用本地的缓存。

2. 浏览器缓存请求头相关的设置

• Expire
  表示缓存到期时间，这个是个绝对时间,如果我修改了客户端的本地时间，是不是就会导致判断缓存失效了呢。
• Cache-Control
  在 HTTP/1.1 中，增加了一个字段 Cache-Control ，它包含一个 max-age 属性，该字段表示资源缓存的最
  大有效时间，这就是一个相对时间。主要取值
  • public：所有内容都将被缓存（客户端和代理服务器都可缓存）
  • private：所有内容只有客户端可以缓存，Cache-Control的默认取值
  • no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
  • no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
  • max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效
• Last-Modified，If-Modified-Since
  浏览器第一次请求资源的时候，服务器返回的 header 上会带有一个 Last-Modified 字段，表示资源最后修改的时间。当浏览器再次请求该资源时，请求头中会带有一个 If-Modified-Since 字段，这个值是第一次请求返回的 Last-Modified 的值。服务器收到这个请求后，将 If-Modified-Since 和当前的 Last-Modified 进行对比。如果相等，则说明资源未修改，返回 304，浏览器使用本地缓存。
• Etag，If-None-Match
  是http协议提供的若干机制中的一种Web缓存验证机制，并且允许客户端进行缓存协商。生成etag常用的方法包括对资源内容使用抗碰撞散列函数，使用最近修改的时间戳的哈希值，甚至只是一个版本号。 和last-modified一样.
  • 浏览器会先发送一个请求得到etag的值，然后再下一次请求在request header中带上if-none-match:[保存的etag的值]。
  • 通过发送的etag的值和服务端重新生成的etag的值进行比对，如果一致代表资源没有改变，服务端返回正文为空的响应，告诉浏览器从缓存中读取资源。
  • 二者对比
    精确度上：Etag要优于Last-Modified。
    优先级上：服务器校验优先考虑Etag。
    性能上：Etag要逊于Last-Modified

3. 浏览器缓存机制

1. 浏览器发送请求前，根据请求头的expires和cache-control判断是否命中（包括是否过期）强缓存策略，如果命中，直接从缓存获取资源，并不会发送请求。如果没有命中，则进入下一步。
2. 没有命中强缓存规则，浏览器会发送请求，根据请求头的last-modified和etag判断是否命中协商缓存，如果命中，直接从缓存获取资源。如果没有命中，则进入下一步。

3. 如果前两步都没有命中，则直接从服务端获取资源。

   
   浏览器缓存机制

参考文档

• 浏览器缓存
• 你所知道的3xx状态码
• 关于浏览器缓存你知道多少

---