强缓存与协商缓存

1.强缓存

强缓存会直接从本地缓存中读取，不发送请求给服务器。

cache-control的几个取值定义：
max-age：设置强缓存时长(s)，单位是s，如3600s；
no-cache：不进行强缓存；
no-store：不进行强缓存也不进行协商缓存，每次都向服务器发送资源请求；
private：仅浏览器缓存；
public：浏览器和代理服务器都可以缓存。
强缓存的存储地点分为：
memory cache（内存缓存），较大的资源，状态码200
dist cache（磁盘缓存），较小的资源，状态码200

强缓存除了使用Cache-Control实现之外，还可以使用Expires字段，Expires是Http1.0规范，Cache-Control是Http1.1规范，Expires返回一个具体的时间值，代表缓存的有效期，在该日期内浏览器不会向服务器发起请求，而是直接从缓存里获取资源。

2.协商缓存

由服务器来告诉浏览器是否使用缓存资源

浏览器像服务端发起请求，服务端收到请求后，根据last-modified和etag判断缓存是否过期，如果过期，状态码200，将最新资源返回给前端，如果没有过期，返回状态码304，使用缓存

ETag：操作系统根据文件内容生成一个hash值，文件内容变化，它就会变化。对应请求头If-None-Match
Last-Modified：文件的最后修改时间 对应请求头 If-Modified-Since

Etag比Last-Modified优先级更高

3.刷新对缓存的影响

1.f5刷新网页时，跳过强缓存，进行协商缓存
2.ctrl+f5刷新页面时会跳过强缓存和协商缓存，直接向服务器请求

vue.config.js中设置css，js打包时带上时间戳

const timestamp = new Date().getTime()
module.exports = {
  //css
  css: {
    extract: {
      filename: `static/css/[name].${timestamp}.css`,
      chunkFilename: `static/css/[name].${timestamp}.css`
    }
  },
  //js
  configureWebpack: {
    output: { 
      // 输出重构  打包编译后的 文件名称  【模块名称.时间戳】
      filename: `static/js/[name].${timestamp}.js`,
      chunkFilename: `static/js/[name].${timestamp}.js`
    },
 }

5.总结

缓存类型	获取资源形式	状态码	发送请求到服务器
强缓存	从缓存取	200(from cache)	否，直接从缓存取
协商缓存	从缓存取	304(Not Modified)	否，通过服务器来告知缓存是否可用

综上所述，强缓存优先级高于协商缓存，强缓存是由浏览器自己判断是否可以使用缓存，而协商缓存是通过与服务器进行通信来确定是否可以使用缓存。