缓存

强制缓存

强缓存策略在请求数据时，如果浏览器缓存中存在未失效的缓存数据，则直接从缓存中获取数据，不与服务器进行交互。只有在缓存中不存在要请求的数据或在缓存中的数据失效时，才会从服务器获取数据。

强缓存由 Expires/Cache-control/Pragma 三个 Header 属性进行控制。

• Expires

  Expires 的值是一个 HTTP 日期，表示资源的过期时间。

  在发起请求时，将 Expires 日期与系统时间进行对比，如果系统时间超过了 Expires 日期，则认为资源过期失效。

  但由于系统时间和服务器时间可能不一致，会造成判断不准的问题。

  Expires 在三个强缓存控制属性中优先级最低。

• Cache-control

  Cache-control 是 HTTP/1.1 中新增的特性，在请求头和响应头中都能使用，可用值如下

  • max-age

    max-age 的值是一个秒数，表示从起发起时到缓存过期的时间

    max-age=10

  • no-cache

    不使用强缓存，每次请求都需要和服务器验证

  • no-store

    禁止使用缓存(包括协商缓存)，每次请求都向服务器请求最新的资源

  • private

    不允许中间代理、CDN等缓存

  • public

    允许中间代理、CDN等缓存

  • must-revalidate

    缓存过期后必须向服务器验证

• Pragma

  Pragma 只有一个属性值，就是 no-cache ，效果和 Cache-Control 中的 no-cache 一致，不使用强缓存，需要与服务器验证缓存是否新鲜，在 3 个头部属性中的优先级最高。

协商缓存

当浏览器的强缓存失效或在请求头中设置了不使用强缓存，并在请求头中设置了 if-modified-since 或 if-none-match 时，会将这两个属性值到服务器验证是否命中协商缓存。

• ETag/If-None-Match

  ETag/If-None-Match 的值是一串 hash 码，代表的是一个资源的标识符，当服务端的文件变化的时候，它的 hash码会随之改变，通过请求头中的 If-None-Match 和当前文件的 hash 值进行比较，如果相等则表示命中协商缓存。

• Last-Modified/If-Modified-Since

  Last-Modified/If-Modified-Since 的值代表的是文件的最后修改时间，第一次请求服务端会把资源的最后修改时间放到 Last-Modified 响应头中，第二次发起请求的时候，请求头会带上上一次响应头中的 Last-Modified 的时间，并放到 If-Modified-Since 请求头属性中，服务端根据文件最后一次修改时间和 If-Modified-Since 的值进行比较，如果相等，返回 304 ，并加载浏览器缓存。

缓存用处

• 减少了冗余的数据传递，节省宽带流量
• 减少了服务器的负担，大大提高了网站性能
• 加快了客户端加载网页的速度 这也正是HTTP缓存属于客户端缓存的原因