浏览器缓存

[Vitaminaq]

主要分为：强缓存和弱（协商）缓存

强缓存

一旦命中缓存，不会再向服务器发送请求。

• 响应头：Cache-Control，Expires。

  • Cache-Control

    Cache-Control 是http1.1中为了弥补Expires的缺陷而加入的。
    max-age=60：设置缓存存储的最大周期，超过这个时间缓存被认为过期(单位秒)。

    当Expires和Cache-Control同时存在时，Cache-Control优先级高于Expires。

  • Expires

    指定缓存到期GMT的绝对时间，如：Expires:Sat, 09 Jun 2018 08:13:56 GMT。
    由于使用具体时间，如果时间表示出错或者没有转换到正确的时区都可能造成缓存生命周期出错。

• 状态码：200(from disk | from memory cache)。

  memory cache: 将资源存到内存中，从内存中获取。
  disk cache：将资源缓存到磁盘中，从磁盘中获取。
  区别：当退出进程时，内存中的数据会被清空，而磁盘的数据不会。

• 应用场景：构建工具产生hash命名的资源文件，由于hash的唯一性，可使用强缓存。

弱缓存

每次会向服务器询问当前缓存是否有效，命中则返回304和一个空的响应体，未命中则返回200和最新的资源。

• 响应&请求头：ETag & If-None-Match，Last-Modified & if-modified-since。

  • ETag & If-None-Match

    http 1.1。
    ETag是一个文件的唯一标志符。就像哈希或者指纹，每个文件都有一个单独的标志，只要文件改变，标志就会变化。
    If-None-Match属于请求头，内容与etag一样，用于服务端比对。

  • Last-Modified & If-modified-since

    http 1.0。
    last-modified是web服务器认为文件的最后修改时间，即第一次请求文件，服务器返回的响应头。
    第二次请求这个文件时，浏览器把If-Modified-Since发送给服务器，询问该时间之后文件是否被修改过。
    Last-Modified: Sat, 09 Jun 2018 08:13:56 GMT 
    If-Modified-Since: Sat, 09 Jun 2018 08:13:56 GMT // 跟Last-Modified的值一样

    同时使用这两个报文头，两个都匹配才会命中弱缓存，否则将重新请求资源。

  Etag 主要为了解决 Last-Modified 无法解决的一些问题：

  1. 一些文件也许内容并不改变(仅仅改变的修改时间)，这个时候我们不希望文件重新加载。（Etag值会触发缓存，Last-Modified不会触发）
  2. If-Modified-Since能检查到的粒度是秒级的，当修改非常频繁时，Last-Modified会触发缓存，而Etag的值不会触发，重新加载。
  3. 某些服务器不能精确的得到文件的最后修改时间。
• 状态码：304。
• 应用场景：ssr结果缓存。