浏览器缓存就是把已经请求过的web资源拷贝一份放在浏览器中。当下一个请求到来的时候，如果是相同的URL，浏览器会根据缓存机制决定是直接使用副本响应访问请求还是向源服务器再次发起请求。 使用缓存可以极大地提高用户体验，缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。
从输入URL到页面呈现出来都发生了什么
1.在浏览器地址栏中输入url 2.浏览器读取地址栏中读取到url ： 浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则需要域名解析(DNS解析)，解析获取相应的IP地址。 3.浏览器访问服务器： 浏览器根据解析后的ip地址访问服务器：浏览器发送tcp连接（三次握手），建立tcp连接后，发送http请求。 4. 服务器处理请求，并响应给前端： 服务器接收到浏览器端的请求后，会根据请求的地址，找对应的文件，如果是动态的资源（如：php，jsp，py等等），则服务器端会执行该文件的代码，把执行的结果，发给浏览器端，如果是静态资源（HTML，CSS，JS，图片，声音等等），则直接发给浏览器端 5. 浏览器接收服务器端的响应： 浏览器端接收到服务器响应的结果，开始进行解析渲染页面 6.浏览器最终显示出了页面
HTTP报文 HTTP报文就是浏览器和服务器间通信时发送及响应的数据块。当客户端请求一个网页时，会先通过http协议将请求的内容封装在http请求报文(request)之中，服务器收到该请求报文后根据协议规范进行报文解析，然后向客户端返回响应报文(response)。 报文信息主要分为两部分 1.包含属性的首部(header)--------------------------附加信息（cookie，缓存信息等),与缓存相关的规则信息，均包含在header中 2.包含数据的主体部分(body)-----------------------HTTP请求真正想要传输的部分
浏览器第一次向服务器发起该请求，此时浏览器是没有对于缓存的，在拿到请求结果后，将请求结果和缓存标识存入浏览器缓存，浏览器对于缓存的处理是根据第一次请求资源时返回的响应头来确定的。具体过程如下图：
我们可以看到，浏览器每次发起请求时，都会先在浏览器缓存中查找该请求的结果以及缓存标识，而浏览器每次拿到返回的请求结果也都会将该结果和缓存标识存入浏览器缓存中。这就是浏览器缓存机制的关键，根据是否需要向服务器重新发起HTTP请求将缓存过程分为强缓存和协商缓存。
用户发送的请求，直接从客户端缓存中获取，不发送请求到服务器，不与服务器发生交互行为。该请求返回200的状态码，可以通过设置两种 HTTP Header 实现：Expires 和 Cache-Control。 Expires expires 字段规定了缓存的资源的过期时间，该字段时间格式使用GMT时间标准时间格式， js通过 new Date().toUTCString() 得到，由于时间期限是由服务器生成，存在着服务端和客户端的时间误差，相比cache-control优先级较低，所以HTTP 1.1 的版本，使用Cache-Control替代。 Cache-Control Cache-Control 常见的取值有private、public、no-cache、max-age，no-store，默认为private。
private: 表示缓存只能被单个用户缓存，不能作为共享缓存（即代理服务器不可缓存它） public: 表示响应可以被任何对象缓存，即使是通常不可缓存的内容 max-age=xxx: 缓存的内容将在 xxx秒后失效，设置缓存存储的最大周期，超过这个时间缓存将会被认为过期，与Expires相反，时间是相对于请求的时间 no-cache: 告诉浏览器、缓存服务器，不管本地副本是否过期，使用副本前一定要到源服务器进行副本有效校验 no-store: 所有内容都不会缓存，强制缓存，对比缓存都不会触发
用户发送请求，发送到服务器之后，由服务器判定是否从缓存中获取资源。协商缓存可以通过设置两种 HTTP Header 实现：Last-Modified 和 ETag Last-Modified： 表示资源最后的修改时间，在浏览器第一次发送HTTP请求时，服务器会返回该响应头，那么浏览器在下次发起HTTP请求时，会带上If-Modified-Since请求头，其值就是第一次发送HTTP请求时，服务器设置在Last-Modified响应头中的值。 两种情况：如果资源最后修改时间大于If-Modified-Since，说明资源有被改动过，则响应完整的资源内容，返回状态码200；如果小于或者等于，说明资源未被修改，则响应状态码304，告知浏览器可以继续使用所保存的缓存 ETag： 服务器响应请求时，返回当前资源文件的一个唯一标识(由服务器生成)，只要资源有变化，Etag就会重新生成。浏览器在下一次加载资源向服务器发送请求时，会将上一次返回的Etag值放到request header里的If-None-Match里，服务器只需要比较客户端传来的If-None-Match跟自己服务器上该资源的ETag是否一致，就能很好地判断资源相对客户端而言是否被修改过了。如果服务器发现ETag匹配不上，那么直接以常规GET 200回包形式将新的资源（当然也包括了新的ETag）发给客户端；如果ETag是一致的，则直接返回304知会客户端直接使用本地缓存即可。 Etag （唯一标识）优先级更高，Last-Modified/If-Modified-Since 返回给客户端最后这个资源的修改时间，优先级没有Etag高
强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，返回200，重新返回资源和缓存标识，再存入浏览器缓存中；生效则返回304，继续使用缓存。
