浏览器缓存机制

浏览器会把一些重复请求的数据保存在缓存中，可以很好的加快请求响应速度，提高了用户体验，但是一些情况下又会缓存已经过时的老数据，使得页面展示错误。
浏览器会根据缓存机制决定使用缓存还是再次向服务器发送请求。

缓存.png

• from memory cache：内存缓存
  快速读取：将编译解析后的文件，直接存入该进程的内存中。
  时效性：一旦该进程关闭，则该进程的内存则会清空。

• from disk cache：硬盘缓存
  将缓存写入硬盘文件中，读取缓存需要对该缓存存放的硬盘文件进行I/O操作，然后重新解析该缓存内容，读取复杂，速度比内存缓存慢。
  一般情况下，css文件和大的文件使用硬盘缓存，普通html和js文件使用内存缓存

1.缓存过程

• 浏览器每次发起请求，都会先在浏览器缓存中查找是否有缓存
• 浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中

• 是否缓存将由服务器端控制，服务器端在响应头中写入一些字段

  
  缓存过程.png

2.强制缓存

控制强制缓存的字段分别是Expires和Cache-Control，Cache-Control优先级高于Expires。

1）Expires 规定资源的失效时间

Expires 的值为服务器返回该请求结果缓存的到期时间，即再次发起该请求时，如果客户端的时间小于Expires的值时，直接使用缓存结果。

2） Cache-Control 规定资源是否需要被浏览器缓存以及缓存的有效时间等

Cache-Control的取值有：

• public：所有内容都将被缓存（客户端和代理服务器都可缓存）
• private：所有内容只有客户端可以缓存，Cache-Control的默认值
• no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
• no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
• max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效

3）强制缓存的三种情况

• 不存在该缓存结果，强制缓存失效，则直接向服务器发起请求
• 存在该缓存结果，但该结果已失效，强制缓存失效，则使用协商缓存
• 存在该缓存结果，且该结果尚未失效，强制缓存生效，直接返回该结果

4）优缺点

Expires 是HTTP/1.0控制网页缓存的字段，到了HTTP/1.1，Expire已经被Cache-Control替代，原因在于Expires控制缓存的原理是使用客户端的时间与服务端返回的时间做对比，那么如果客户端与服务端的时间因为某些原因（例如时区不同；客户端和服务端有一方的时间不准确）发生误差，那么强制缓存则会直接失效。

到了HTTP/1.1，Expire已经被Cache-Control替代，原因在于Expires控制缓存的原理是使用客户端的时间与服务端返回的时间做对比，那么如果客户端与服务端的时间因为某些原因（例如时区不同；客户端和服务端有一方的时间不准确）发生误差，那么强制缓存则会直接失效。

3.协商缓存

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程。
控制字段有Last-Modified / If-Modified-Since和Etag / If-None-Match，其中Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高。

1）Last-Modified / If-Modified-Since

• Last-Modified：response中，表示文件最后被修改的时间
• If-Modified-Since：request中，携带上次请求返回的Last-Modified值

服务器根据If-Modified-Since的值与该资源在服务器的最后被修改时间做对比，若服务器的资源最后被修改时间大于If-Modified-Since的字段值，则重新返回资源和新的Last-Modified值，状态码为200；否则则返回304，代表资源无更新，可继续使用缓存文件

2）Etag / If-None-Match

• Etag：response中，服务器返回当前资源文件的一个唯一标识(由服务器生成)
• If-None-Match：request中，携带上次请求返回的唯一标识Etag值

服务器根据请求头中If-None-Match值与该资源在服务器的Etag值做对比，一致则返回304，代表资源无更新，继续使用缓存文件；不一致则重新返回资源文件，状态码为200

3）协商缓存的两种情况

• 该资源无更新，协商缓存生效，返回304
• 该资源已更新，协商缓存失效，返回200和请求结果结果

4）优缺点

• Last-Modified 标注的最后修改只能精确到秒级，如果某些文件在1秒钟以内被修改多次的话，它将不能准确标注文件的修改时间；
• 如果某些文件会被定期生成，但有时内容并没有任何变化，但 Last-Modified 却改变了，导致文件没法使用缓存；
• 有可能存在服务器没有准确获取文件修改时间，或者与代理服务器时间不一致等情形；

4.总结

强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)。
协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，重新获取请求结果，再存入浏览器缓存中；生效则返回304，继续使用缓存。