浏览器缓存

浏览器缓存，我们可以分为两种，一种是强制缓存，一种是协商缓存。

浏览器缓存过程

浏览器与服务器是通过http请求来进行通信的，也就是说，浏览器发起http请求，服务器响应这个请求并返回结果，当浏览器第一次向服务器发起http请求后得到结果，那么会根据响应头信息中的缓存标识来决定是否缓存结果，如果是，那么就将请求结果和缓存标识保存在浏览器缓存中。

如上图，浏览器每次发起http请求的时候，都会先去浏览器缓存看一下是否存在这个http请求的缓存结果以及缓存标识，并且浏览器每次得到请求返回的结果都会将请求结果和缓存标识保存在浏览器缓存中。

强制缓存

强制缓存就是浏览器向服务器发起http请求时，向浏览器缓存查找这个http请求的请求结果，并根据请求结果的缓存标识来决定是否使用该缓存结果的过程。

强制缓存主要存在三种情况：

• 1、强制缓存失败，直接向服务器发起http请求
• 2、强制缓存失效，使用协商缓存
• 3、强制缓存生效，直接使用缓存结果

强制缓存的缓存规则

当浏览器发起http请求时，服务器会将缓存规则保存在响应头信息中，和结果一起返回给浏览器，而控制强制缓存的字段分别是：Expires和Cache-Control，其中Cache-Control的优先级比Expires高。

Expires

Expires指的是浏览器返回该http请求结果缓存的过期时间，比如再次发起请求时，如果浏览器的时间小于Expires的值时，那么就表示缓存结果还没有过期，就直接使用缓存结果。

在http/1.1，Expires已经被Cache-Control替代，主要是因为Expires控制缓存的原理是使用客户端(浏览器)的时间与服务器返回的时间做对比，如果客户端与服务器的时间存在误差，那么导致强制缓存直接失效，这样的话强制缓存就没有意义了。

Cache-Control

Cache-Control字段的值一般我们会用到的是no-cache,no-store,max-age这三个比较常用。

• no-cache表示内容会被缓存，但不使用强制缓存，会使用协商缓存来决定是否使用浏览器缓存
• no-store表示内容不会被缓存，即不使用强制缓存，也不使用协商缓存
• max-age表示缓存内容会在多少秒之后失效，比如max-age=10,表示缓存内容会在10秒后失效。

注意点：Expires中的值是一个绝对时间值，max-age中的值是一个相对时间值，Cache-Control的优先级比Expires要高，如果两个同时存在，那么只会有Cache-Control会生效。

浏览器的缓存存放位置

我们刷新浏览器的时候，会发现有些资源会出现from memory cache和from disk cache，这说明浏览器的缓存时存放在memory和disk中。

from memory cache表示的是使用内存中的缓存，from disk cache表示的是使用硬盘中的缓存。浏览器读取缓存的顺序是先读取内存中的缓存，再读取硬盘中的缓存，内存中的缓存保存在浏览器的内存中，一旦关闭浏览器那么就会清空内存。硬盘中的缓存会写入到硬盘文件中，当浏览器读取缓存时会进行硬盘的I/O操作，速度会比内存缓存的慢，一般只有比较大的文件才会被保存在硬盘中。

协商缓存

协商缓存会在强制缓存失效后，浏览器携带缓存标识向服务器发起http请求，服务器会根据缓存标识来决定是否使用缓存的过程。

协商缓存主要存在以下两种情况：

• 1、协商缓存生效，返回304
• 2、协商缓存不生效，返回200和请求结果

协商缓存的缓存规则

浏览器在发起http请求时，服务器会将缓存规则保存在响应头信息中，和结果一起返回给浏览器，控制协商缓存的字段是：Last-Modified/If-Modified-Since和Etag/If-None-Match，其中Etag/If-None-Match的优先级要高于Last-Modified/If-Modified-Since。

Last-Modified/If-Modified-Since

Last-Modified是服务器响应请求时，返回该资源文件在服务器最后被修改的时间，If-Modified-Since是浏览器再次发起请求时携带的上次请求返回的Last-Modified的值。服务器收到这个请求后，发现存在If-Modified-Since字段，然后会根据这个值和文件最后一次被修改的时间做对比，如果服务器资源的最后一次修改时间大于If-Modified-Since，那么表示该资源被修改过，也就是资源更新了，那么就重新返回最新资源，状态码为200，否则返回状态码304，表示资源没有更新，可以继续使用浏览器缓存的资源。

Etag/If-None-Match

Etag是服务器响应请求时，返回当前资源文件的一个唯一标识，这个是由服务器产生的，If-None-Match是浏览器再次发起请求时，携带的上次返回结果中的Etag的值，服务器收到请求后，发现存在If-None-Match字段。然后会根据这个字段的值与服务器上的Etag值进行比较，如果一样，那么就返回304，表示资源没有更新，可以继续使用浏览器缓存的资源，如果不一样，那么就返回200，表示资源已经更新了，重新返回最新资源。

总结

强制缓存的优先级高于协商缓存，如果强制缓存生效，那么就直接使用浏览器缓存，如果不生效，那么就使用协商缓存，协商缓存由服务器决定是否使用浏览器的缓存，如果协商缓存生效，那么就直接返回304，并使用浏览器缓存，如果协商不生效，那么就返回200，并重新获取请求结果，再保存到浏览器缓存中。