浏览器缓存那些事

浏览器读取资源的流程

• 浏览器在加载资源时，根据请求头的 expires 和 cache-control 判断是否命中强缓存，是则直接从缓存读取资源，不会发请求到服务器。
• 如果没有命中强缓存，浏览器一定会发送一个请求到服务器，通过 last-modified 或者 etag 验证资源是否命中协商缓存，如果命中，服务器会将这个请求返回，但是不会返回这个资源的数据，依然是从缓存中读取资源
• 如果前面两者都没有命中，直接从服务器加载资源

强制缓存（不发送请求）

1. 如何设置
   通常我们会同时设置 expires 和 cache-control 两种，保证无论在 http1 还是 1.1 的情况下都有效

   • expires
     过期时间，如果设置了时间，则浏览器会在设置的时间内直接读取缓存，不再请求

   • cache-control

     http1.1 新标准，包括这些属性：

     （1）max-age：用来设置资源（representations）可以被缓存多长时间，单位为秒；（2）s-maxage：和 max-age 是一样的，不过它只针对代理服务器缓存而言；（3）public：指示响应可被任何缓存区缓存；（4）private：只能针对个人用户，而不能被代理服务器缓存；（5）no-cache：强制客户端直接向服务器发送请求, 也就是说每次请求都必须向服务器发送。服务器接收到请求，然后判断资源是否变更，是则返回新内容，否则返回 304，未变更。这个很容易让人产生误解，使人误以为是响应不被缓存。实际上 Cache-Control:no-cache 是会被缓存的，只不过每次在向客户端（浏览器）提供响应数据时，缓存都要向服务器评估缓存响应的有效性。（6）no-store：禁止一切缓存（这个才是响应不被缓存的意思）。

2. 缓存的两种表现形式

   • memory cache

     来自于内存的数据，会随着进程的结束而清除，读取速度相对快 (0ms)
     一般存放脚本，图片，字体等文件

   • disk cache

     来自于硬盘的数据，不会随着进程的结束而清除，读取速度慢于 memory cache(2-10ms 硬盘读写的 IO 操作)
     一般存放 css 文件

     根据经验情况来看：浏览器的实际处理逻辑是这样的

     首次加载资源 -> 200 -> 关闭标签页
     再次进入 -> 200 from disk cache -> 刷新 -> 200 from memory cache
     （不过好像 css 都是 from disk cache, base64 都是 from memory cache）

协商缓存（发送请求）

客户端向服务端发送请求时候（没有命中强制缓存），服务端会检查是否有对应的标识，没有则返回 200 并生成一个新的标识带到 header，下次在请求的时候服务端检查到对应的这个标识并做相应的校验，通过则返回 304，读取缓存。

• Last-modify / If-modify-since

  浏览器首次请求资源的时候，服务器会返回一个 last-Modify 到 header 中. Last-Modify 含义是最后的修改时间。
  当浏览器再次请求的时候，request header 会带上 if-Modify-Since，该值为之前返回的 Last-Modify。服务器收到 if-Modify-Since 后，根据资源的最后修改时间 (last-Modify) 和该值 (if-Modify-Since) 进行比较，如果相等的话，则命中缓存，返回 304，否则, 则会给出 200 响应，并且更新 Last-Modify 为新的值

• Etag / If-none-match（http1.1 规范）
  ETag 的原理和上面的 last-modified 是类似的。ETag 对当前请求的资源做一个唯一的标识。该标识可以是一个字符串，文件的 size,hash 等。只要能够合理标识资源的唯一性并能验证是否修改过就可以了。ETag 在服务器响应请求的时候，返回当前资源的唯一标识(它是由服务器生成的)。但是只要资源有变化，ETag 会重新生成的。浏览器再下一次加载的时候会向服务器发送请求，会将上一次返回的 ETag 值放到 request header 里的 if-None-Match 里面去，服务器端只要比较客户端传来的 if-None-Match 值是否和自己服务器上的 ETag 是否一致，如果一致说明资源未修改过，因此返回 304，如果不一致，说明修改过，因此返回 200。并且把新的 Etag 赋值给 if-None-Match 来更新该值。

协商缓存两种方式对比

• 在精度上，ETag 要优先于 last-modified。

  last-modified 这种方式精度差在哪里：
  a. 一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了
  b. 某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说 1s 内修改了 N 次)，If-Modified-Since 能检查到的粒度是 s 级的，这种修改无法判断(或者说 UNIX 记录 MTIME 只能精确到秒)；

• 在性能上，Etag 要逊于 Last-Modified，Last-Modified 需要记录时间，而 Etag 需要服务器通过算法来计算出一个 hash 值。
• 在优先级上，服务器校验优先考虑 Etag。