彻底了解http 缓存

强制缓存

• Expires: new Date().toUTCString(); 即将废弃！！！
  缓存机制：判断本地时间是否大于缓存时间

  缺点：依赖本地时间，如果本地时间有更改，game over。。。
  

• Cache-Control: max-age=10;
  缓存机制：max-age 定义过期时间，时间一到就过期，单位秒。

   缺点：无法判断请求内容是否过期。
  

协商缓存

• Cache-Control：no-cache; last-modified: 文件更新时间
  缓存机制：通知浏览器使用协商缓存， 并且发送 last-modified （最后一次文件更新时间etime）给浏览器。浏览器下次请求携带if-modified-since 给服务器， 服务器判断if-modified-since是否与文件更新时间etime一致，决定是否采用缓存，返回304，告知浏览器使用缓存。

  缺点：文件更新时间etime无法判断文件是否更改。

  文件无更改：文件原本内容为console.log(111), 更改为console.log(111222);
  接着变更文件为console.log(111), 此时内容无更改

• Cache-Control：no-cache; etag: 内容更新时间
  缓存机制：通知浏览器使用协商缓存， 并且发送 etag （基于文件生成的时间戳etag(文件)）给浏览器。浏览器下次请求携带if-none-match 给服务器， 服务器判断if-none-match是否与文件etag一致，决定是否采用缓存，返回304，告知浏览器使用缓存。

  优点： 能准确判断内容是否更新。

vue、React 等框架如何使用缓存机制

建议 html 文件使用协商缓存、而 js、css、img…等使用强制缓存。

原因：

1. 一般都是html 中加载了其他js、css、img 文件，所以使用协商缓存
2. js、css、img 文件打包后一般会更改命名：a. + hash + .js, 一般使用webpack 打包后都会基于文件生成hash， 如果文件未改变，hash也不会改变，而不同的名称会发起新的请求。