页面文件与浏览器缓存

打开浏览器调试器,当我们首次打开一个页面时,浏览器会从服务器获取页面的html,css,js,image等文件,从调试器的Network选项查看这些资源状态码大都为200.

看看直接请求的html文件的Response-Header

可以看到它的Cache-Control/max-age和Last-Modified信息.
而当我们再次访问该页面时,发现a.html的状态码变成了304

再来看看Request-Header

看看304和Last-Modified/If-Modified-Since的关系,Last-Modified/If-Modified-Since：本地文件在服务器上的最后一次修改时间。缓存过期时把浏览器端缓存页面的最后修改时间发送到服务器去，服务器会把这个时间与服务器上实际文件的最后修改时间进行对比，如果时间一致，那么返回304，客户端就直接使用本地缓存文件。

对比第一次请求的Response-Header的Last-Modified和第二次请求的Request-Header的If-Modified-Since发现一致,说明浏览器在第二次请求时是以上次请求到的资源的信息去服务器做比对.在第二次请求这个资源时服务器会把这次请求的If-Modified-Since和服务器上的这个资源的Last-Modified作对比,发现相同.此时服务器会对这个请求返回304,随后浏览器收到304会认为这个本地资源是最新的资源,它会从浏览器缓存中直接加载这个资源.

如果说两次请求之间服务器上的这个资源做了变动,那在再次请求时会发现Last-Modified和If-Modified-Since不一致,会直接返回服务器的资源,同时状态码为200

要是超过Cache-Control/max-age或Expires的有效期(这两个同时存在时前者会覆盖后者),浏览器会去直接请求这个页面.