前言

浏览器的缓存机制也就是咱们说的HTTP缓存机制，其机制是依据HTTP报文的缓存标识进行的。

HTTP 缓存

缓存过程：

  1. 第一次申请：不存在缓存后果和缓存标识，间接向服务器发送申请

  1. 强缓存：存在该缓存后果和缓存标识，且该后果尚未生效，强制缓存失效，间接返回缓存

  1. 协商缓存：存在缓存标识和缓存后果，然而曾经生效，强制缓存生效，则应用协商缓存

1. 强缓存

强制缓存就是向浏览器缓存查找该申请后果，并依据该后果的缓存规定来决定是否应用该缓存后果的过程

条件：Cache-Control的max-age没有过期或者Expires的缓存工夫没有过期

后果：间接应用浏览器的缓存数据，不会再向服务器发送任何申请

①. Cache-Control

HTTP1.1中启用Cache-Control 来管制页面的缓存与否，Cache-Control属性是在服务器端配置的，不同的服务器有不同的配置，应用的是绝对工夫概念。

Cache-Control的属性设置：

  • (1). max-age：设置缓存的最大的无效工夫，单位为秒（s）。max-age会笼罩掉Expires
  • (2). s-maxage：只用于共享缓存，比方CDN缓存（s -> share）。与max-age 的区别是：max-age用于一般缓存，
    而s-maxage用于代理缓存。如果存在s-maxage,则会笼罩max-age 和 Expires
  • (3). public：响应会被缓存，并且在多用户间共享。默认是public
  • (4). private：响应只作为公有的缓存，不能在用户间共享。如果要求HTTP认证，响应会主动设置为private
  • (5). no-cache：指定不缓存响应，表明资源不进行缓存。然而设置了no-cache之后并不代表浏览器不缓存，而是在缓存前要向服务器确认资源是否被更改(即协商缓存)
  • (6). no-store：相对禁止缓存
  • (7). must-revalidate：如果页面过期，则去服务器进行获取

目前Cache-Control申请字段被各个浏览器反对的较好，其优先级也比拟高，当和别的字段（如Expires）一起用时，会笼罩其余字段。

②. Expires

缓存过期工夫，用来指定资源到期的工夫，是服务器端的具体的工夫点。也就是说，Expires=max-age + 申请工夫，须要和Last-modified联合应用。

Expires 是 HTTP/1 的产物，受限于本地工夫，如果批改了本地工夫，可能会造成缓存生效。

Expires属性也是在服务端配置的。

2. 协商缓存

协商缓存就是强制缓存生效后，浏览器携带缓存标识向服务器发动申请，由服务器依据缓存标识决定是否应用缓存的过程。

条件：强制缓存max-age和Expires都过期了(或都未设置)

后果：浏览器发送申请将缓存标识（Last-Modified、ETags）发送给服务器，校验（re-validate）缓存是否陈腐，而后依据新鲜度返回304或者200

①. Last-Modified和If-Modified-Since

流程：

  1. 浏览器首先发送一个申请，让服务端在response header中返回申请的资源上次更新工夫，就是last-modified，浏览器会缓存下这个工夫。
  2. 而后浏览器再下次申请中，request header中带上if-modified-since:[保留的last-modified的值]。依据浏览器发送的批改工夫和服务端的批改工夫进行比对，统一的话代表资源没有扭转，服务端返回注释为空的响应，让浏览器中缓存中读取资源。

②. ETag和If-None-Match

流程：

  1. 浏览器会先发送一个申请失去etag的值，而后再下一次申请在request header中带上if-none-match:[保留的etag的值]。
  2. 通过发送的etag的值和服务端从新生成的etag的值进行比对，如果统一代表资源没有扭转，服务端返回注释为空的响应，通知浏览器从缓存中读取资源。

etag可能解决last-modified的一些毛病，然而etag每次服务端生成都须要进行读写操作，而last-modified只须要读取操作，性能开销更大。

用户行为与禁止浏览器缓存

1. 用户行为对浏览器缓存的影响

① 关上网页，地址栏输出地址：查找 disk cache 中是否有匹配。如有则应用；如没有则发送网络申请。

② 一般刷新 (F5)：TAB 没有敞开，优先应用memory cache(如果匹配的话)，其次是 disk cache。

③ 强制刷新 (Ctrl + F5)：浏览器不应用缓存，因而发送的申请头部均带有 Cache-control:no-cache(为了兼容，还带了 Pragma:no-cache),服务器间接返回 200 和最新内容。

2. 禁止浏览器缓存

有些时候，咱们须要齐全禁止浏览器缓存，比方vue打包过后的html，为了确保用户可能即便取得最新的html，须要禁止浏览器缓存。

网上有一个meta配置no-cache

<meta http-equiv="Expires" content="0" /><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Cache-control" content="no-cache" /><meta http-equiv="Cache" content="no-cache" />

but 实际上设置是有效的(谷歌、火狐)，须要服务器端设置response header 中的 cache-control 为 no-store，因为no-cache实际上还是会走协商缓存。

参考

浏览器缓存看这一篇就够了