本地缓存-强缓存
此时的请求过程：
第一次请求
当浏览器还是第一次发送请求到后端的时候，本地还没有缓存资源，这个时候的服务器返回给浏览器的资源，响应码是200
当浏览器收到资源后，会将资源和对应的响应头一起缓存下来。
第二次请求
第二次浏览器准备发送请求给服务器时候，浏览器会先检查上一次服务端返回的响应头信息中的Cache-Control(它的值是一个相对值，单位为秒，表示资源在客户端缓存的最大有效期)
过期时间为第一次请求的时间加上Cache-Control的值，
过期时间跟当前的请求时间比较，如果本地缓存资源没过期，那么命中缓存，不再请求服务器。
如果没有命中，浏览器就会把请求发送给服务器，进入缓存协商阶段。
缓存协商
场景1
当客户端浏览器第一次请求的时候，分为两种情况：
第一种：服务器端返回的响应头中没有Cache-Control和Expires或者Cache-Control和Expires
第二种：Cache-Control的属性设置为no-cache时
场景2
浏览器第二次请求时就会与服务器进行协商，对比浏览器中的缓存资源，是否是最新的。
当缓存和服务端资源的最新版本是一致的，那么就无需再次下载该资源，服务端直接返回重定向304 Not Modified 状态码，
如果服务器发现浏览器中的缓存已经是旧版本了，那么服务器就会把最新资源的完整内容返回给浏览器，状态码就是200
服务端是根据HTTP的另外两组头信息，分别是：Last-Modified/If-Modified-Since 与 ETag/If-None-Match，这两组数据一 一对应，互相结合使用
本地缓存-强缓存相关字段解析
Cache-control 缓存头部
Cache-Control是HTTP缓存策略中最重要的头信息，它是HTTP/1.1中出现的
Cache-Control 头用来区分对缓存机制的支持情况， 请求头和响应头都支持这个属性。通过它提供的不同的值来定义缓存策略
没有缓存
缓存中不得存储任何关于客户端请求和服务端响应的内容。每次由客户端发起的请求都会下载完整的响应内容。
缓存但重新验证
如下头部定义，此方式下，每次有请求发出时，缓存会将此请求发到服务器（译者注：该请求应该会带有与本地缓存相关的验证字段），服务器端会验证请求中所描述的缓存是否过期，若未过期（注：实际就是返回304），则缓存才使用本地缓存副本。
私有和公共缓存
"public" 指令表示该响应可以被任何中间人（译者注：比如中间代理、CDN等）缓存。若指定了"public"，则一些通常不被中间人缓存的页面（译者注：因为默认是private）（比如 带有HTTP验证信息（帐号密码）的页面 或 某些特定状态码的页面），将会被其缓存。
Cache-Control: private
Cache-Control: public
过期
"，表示资源能够被缓存（保持新鲜）的最大时间。相对Expires而言，max-age是距离请求发起的时间的秒数。针对应用中那些不会改变的文件，通常可以手动设置一定的时长以保证缓存有效，例如图片、css、js等静态资源。
Cache-Control: max-age=31536000
验证方式
Cache-Control: must-revalidate
Expires
Cache-Control与Expires可以在服务端配置同时启用，同时启用的时候Cache-Control优先级高
cache-control:max-age=691200
expires:Fri, 06 Mar 2022 22:53:02 GMT缓存验证
用户点击刷新按钮时会开始缓存验证。如果缓存的响应头信息里含有"Cache-control: must-revalidate”的定义，在浏览的过程中也会触发缓存验证。另外，在浏览器偏好设置里设置Advanced->Cache为强制验证缓存也能达到相同的效果。
协商缓存相关字段概念
ETags
Etag的优先级高于Last-Modified
作为缓存的一种强校验器，ETag 响应头是一个对用户代理(User Agent, 下面简称UA)不透明（注：UA无需理解，只需要按规定使用即可）的值。
对于像浏览器这样的HTTP UA，不知道ETag代表什么，不能预测它的值是多少。如果资源请求的响应头里含有ETag, 客户端可以在后续的请求的头中带上 If-None-Match 头来验证缓存。
Last-Modified
当向服务端发起缓存校验的请求时，服务端会返回 200 ok表示返回正常的结果或者 304 Not Modified(不返回body)表示浏览器可以使用本地缓存文件。304的响应头也可以同时更新缓存文档的过期时间。
Last-Modified 响应头可以作为一种弱校验器。说它弱是因为它只能精确到一秒。如果响应头里含有这个信息，客户端可以在后续的请求中带上 If-Modified-Since 来验证缓存。
Vary
当缓存服务器收到一个请求，只有当前的请求和原始（缓存）的请求头跟缓存的响应头里的Vary都匹配，才能使用缓存的响应。
Vary是一个HTTP响应头部信息，它决定了对于未来的一个请求头，应该用一个缓存的回复(response)还是向源服务器请求一个新的回复。它被服务器用来表明在 content negotiation algorithm（内容协商算法）中选择一个资源代表的时候应该使用哪些头部信息（headers）.
Vary: User-Agent
因为移动版和桌面的客户端的请求头中的User-Agent不同， 缓存服务器不会错误地把移动端的内容输出到桌面端到用户。
浏览器缓存的优缺点
缺点
正如字面意思，缓存，就意味着使用缓存的时候，服务器的资源有可能不是最新版本，这就需要在使用的时候，控制缓存的资源和时间，包括常见的CDN手段。
优点
在前端优化的手段当中，减少http请求的方式，也是其中一种，有效使用缓存，可以减少服务器的压力，提升网站的性能。
程序员布欧，不定期更新技术入门文章
创作不易，转载请注明出处和作者。