HTTP缓存机制

很多时候我们都要考虑性能优化的部分，不仅仅是代码的优化，还有 HTTP 的性能优化。

HTTP 性能优化的一种方案就是使用 HTTP 缓存，避免 HTTP 请求，其它的方法还有：

• 避免 HTTP 请求
  • HTTP 缓存
• 减少 HTTP 请求次数
  • 减少重定向
  • 合并请求次数
  • 延迟请求
• 减少服务器的 HTTP 响应数据⼤小
  • 压缩
    • 有损（一般对⾳频、视频、图⽚等进行压缩，压缩后与原始数据接近）
    • 无损（比如 gzip）

对于会重复执行的 HTTP 请求，第一次调用时或者缓存的响应过期时，发送网络请求，将本次响应存入缓存，下一次调用时直接从缓存中获取（本次请求会被拦截），从而达到提升性能的效果。

强制缓存和协商缓存

HTTP 缓存分为强制缓存和协商缓存

强制缓存的 HTTP 请求头是 Cache-Control、Exipres（它是 HTTP1.0，现在浏览器一般默认使用 HTTP 1.1），浏览器直接读本地缓存，不会再跟服务器端交互，状态码 200。

用 F12 打开控制台，可以看到 Cache Control 的请求头参数：

这里的 max-age 的值表示浏览器可以缓存当前数据的时间，单位：秒。可配置的参数如下：

• public：客户端和代理服务器都可以缓存
• private：客户端可以缓存；
• max-age：失效时间
• no-store：不缓存（优先级最高）
• no-cache：每次请求都要强制向服务器再验证一次数据是否有效
• s-maxage：最长的缓存时间，单位：秒（优先级高于max-age和Expires）
• min-fresh：
• ...

浏览器行为对缓存的影响

• 回车键刷新：

  比如，在浏览器中输入 url 并敲下回车键之后，根据 Cache-Control 中的 max-age 是否有效来决定是否重新请求（如果值变为 no-cache，则会重新向服务器验证有效性）

• F5 刷新（Mac：command+R）：

  刷新后 Cache-Control 的 max-age 变为 0，会重新向服务器验证有效性

• 强制刷新 —— Ctrl + F5（Mac系统command+shift+R）：

  刷新后 Cache-Control: no-cache。

  两种刷新的区别： F5只对当前页面进行刷新，只刷新本地缓存；Ctrl + F5 会把浏览器临时文件夹中的文件删除，再从服务器重新下载。

• 浏览器前进、后退、跳转页面链接：依旧有效