1、概念
HTTP缓存就是把一个已经请求过的Web资源（如html页面，图片，js，数据等）储存在本地(内存或者硬盘)。当下一次请求要发出的时候，如果是相同的URL，浏览器会根据缓存机制决定是直接使用先前存储的资源，还是向源服务器再次发送请求。
2、过程
主要实现过程如图：
(1)、本地缓存（强缓存）
浏览器进程通过IPC通信机制把处理好的URL请求发送至网络进程，网络进程接收到该URL请求后就会发起真正的URL请求流程。在发起URL请求流程之前网络进程会检查本地是否缓存了URL资源，如果有该URL的缓存数据且不过期的话就可以直接使用浏览器缓存的数据，就不需要向服务器发出请求。这个过程就是判断本地缓存是否生效的过程。 如果不生效将会进入协商缓存阶段。
当浏览器接收到URL资源请求后首先会进行本地缓存（强制缓存） 一共有三种情况
- 浏览器缓存中没有找到该资源的缓存结果和缓存标识，浏览器就会第一次向服务器发出该URL的资源请求，服务器接收到请求后返回请求结果和缓存标识，然后浏览器将其存入浏览器缓存中。
- 浏览器中存在该缓存结果和缓存标识，并且没有失效过期，强制缓存生效，浏览器直接返回缓存的资源。
- 浏览器中存在该缓存结果和缓存标识，但结果已经过期失效，强制缓存失效，进入到协商缓存阶段
那么如何判断是否过期呢？
浏览器缓存标识中有expire，和cache-control字段，用于记录过期时间 ，
expires是http1.0控制页面缓存的字段，记录的是请求结果的到期时间，是绝对时间，但因为expires控制缓存的原理是使用客户端的时间和服务端返回的时间进行对比，那么客户端和服务端因为某些原因（时区不同，客户端或者服务端的时间不准确）发生误差，那么就会造成强制缓存失效。
cache-control是HTTP/1.1提出的，其中max-age字段记录的是缓存有效的周期，例如60S是相对的时间，准确度更高，所以在判断是否过期时,cache-control的优先级比expire更高。
(2)、协商缓存
因为缓存失效，浏览器缓存仅返回了缓存标识给浏览器，浏览器带着该资源的缓存标识向服务端发出http请求，发送请求后在服务器中比较最后的修改时间来判断资源的最后修改时间，如果服务器中的最后修改时间更晚则表示资源已经更新，需要向服务器请求新的资源，服务器响应的返回码就为200,如果对比最后的修改时间资源没有更新的话就返回304，重定向到本地使用本地缓存的资源。
那么如何判定的呢？
通过Last-Modified / If-Modified-Since和Etag / If-None-Match
Last-Modified / If-Modified-Since：Last-Modified是服务器响应请求时，返回该资源文件在服务器最后被修改的时间
If-Modified-Since则是客户端再次发起该请求时，携带上次请求返回的Last-Modified值，通过此字段值告诉服务器该资源上次请求返回的最后被修改时间。服务器收到该请求，发现请求头含有If-Modified-Since字段，则会根据If-Modified-Since的字段值与该资源在服务器的最后被修改时间做对比，若服务器的资源最后被修改时间大于If-Modified-Since的字段值，则重新返回资源，状态码为200；否则则返回304，代表资源无更新，可继续使用缓存文件
Etag / If-None-Match
Etag是服务器响应请求时，返回当前资源文件的一个唯一标识(由服务器生成)，如下。
If-None-Match是客户端再次发起该请求时，携带上次请求返回的唯一标识Etag值，通过此字段值告诉服务器该资源上次请求返回的唯一标识值。服务器收到该请求后，发现该请求头中含有If-None-Match，则会根据If-None-Match的字段值与该资源在服务器的Etag值做对比，一致则返回304，代表资源无更新，继续使用缓存文件；不一致则重新返回资源文件，状态码为200，如下。
Etag / If-None-Match优先级高于Last-Modified / If-Modified-Since，同时存在则只有Etag / If-None-Match生效。
(3)、DNS缓存
当需要向服务器发起请求时，需要DNS解析将URL进行解析生成对应的IP地址，它然后建立连接进行通信。
www.dnscache.com (域名) - DNS解析 -> 11.222.33.444 (IP地址)
这个过程会对网络请求带来一定的损耗，所以浏览器在第一次获取到IP地址后，会将其缓存起来。下次相同域名再次发起请求时，浏览器会先查找本地缓存，如果缓存有效，则会直接返回该IP地址，否则会继续开始寻址之旅（DNS解析）。
参考文献
[1](彻底理解浏览器的缓存机制 - 掘金 (juejin.cn))
[2](浏览器缓存缓存策略（看完就懂） - 掘金 (juejin.cn))
