Question

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

Answer 1

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

深入理解浏览器的缓存机制：  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与服务器的压力。

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