浏览器缓存机制简单概括和分析

浏览器缓存：

对于访问的页面和请求，为了缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷，浏览器和服务器都有可能会对请求资源进行缓存，接下来的文章就简单介绍和分析浏览器的缓存机制。

浏览器缓存机制

概括和分析

深入理解浏览器的缓存机制： https://www.jianshu.com/p/54cc04190252

作者：浪里行舟

来源：简书

这篇文章已经有详细的讲解，这里就概括一下：

以简书首页的请求为例：

1、强制缓存策略(Expires和Cache-Control)：当浏览器发起http请求的时候，如果配置了缓存策略且缓存在有效期内，会直接使用浏览器缓存。不使用强制缓存（Cache-Control=no-chache，或者 max-age=0 ）

简书首页的请求

（1）、图中请求服务器：是max-age=0 的情况，浏览器直接请求服务器资源，而不是用本地缓存

（2）、图中磁盘缓存和内存缓存：就是浏览器使用了本地缓存而不再请求服务器资源

2、协商缓存策略（Last-Modified和If-Modified-Since， ETag和If-None-Match）：当浏览器发起http请求的时候，如果强制缓存策略失效，或者者禁用了强制缓存，这时候会根据 If-Modified-Since 中的值与服务器中这个资源的最后修改时间对比，如果没有变化，返回304和空的响应体，直接从缓存读取，如果If-Modified-Since的时间小于服务器中这个资源的最后修改时间，说明文件有更新，于是返回新的资源文件和200。

不使用协商缓存（Cache-Control=no-store），这个参数同时也会禁用强制缓存。

（1）、服务器资源返回无更新，浏览器使用上次请求的资源

协商缓存有效

（2）、服务器资源有更新，返回200并返回最新的资源

协商缓存失效，服务器重新返回资源

3、不使用缓存策略（Cache-Control=no-store）：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存。当response head 设置了no-store，浏览器不会对返回的资源做缓存，每次请求都是直接请求服务器。这可以保证浏览器每次都能拿最新的资源，即使资源对比上次请求没有任何更新，但同时也降低了页面的响应速度，和增加了网络的IO与服务器的压力。

可以明显的看到请求时间，请求服务器资源时间 >> 请求磁盘缓存 > 请求内存缓存，所以合适的缓存策略，可以在不影响业务的情况下，极大地提升客户体验和后台服务器压力。