通俗解释浏览器缓存机制

转自https://zhuanlan.zhihu.com/p/23299600?referstudy-fe1. 思路1无缓存浏览器向服务器请求资源 a.jpg服务器找到对应资源把内容返回给浏览器。当浏览器再次向服务器请求资源a.jpg时服务器重新发送完整的数据文件给浏览器。优点简单啥都不用做缺点每次请求都查找并返回原始文件浪费带宽1990年的带宽很贵啊2. 思路2有缓存无更新浏览器第一次请求a.jpg 时服务器会发送完整的文件浏览器可以把这个文件存到本地缓存下次再需要这个文件时直接从本地获取就行了这样就能省下带宽了。优点: 省带宽缺点: 如果服务器上a.jpg的文件内容变了浏览器每次都从缓存读取无法获取最新文件3. 思路3 缓存 更新机制浏览器第一次请求a.jpg 时服务器会发送完整的文件服务器在发送文件的时候还附带发送一些额外信息——过期时间如 Expires:Mon,10 Dec 1990 02:25:22GMT。浏览器可以把这个文件和额外信息存到本地。当再次需要a.jpg的时候浏览器用当前浏览器时间和Expires做个比较如果当前时间在过期时间以内就直接使用缓存文件((200, from xx cache)如果在过期时间以外就重新向服务器发送请求要资源(200)。 服务器在每次给资源的时候都会发送新的过期时间优点缓存可控制缺点控制的功能太单一这种格式的时间很容易写错4. 思路4 缓存 更新机制升级版比如浏览器第一次请求a.jpg 时服务器会发送完整的文件并附带额外信息Cache-Control: max-age300浏览器把文件和附带信息保存起来。当再次需要a.jpg 时如果是在300秒以内发起的请求则直接使用缓存(200, from xx cache)否则重新发起网络请求(200)。下面是Cache-Control常见的几个值Public表示响应可被任何中间节点缓存如 Browser -- proxy1 -- proxy2 -- Server中间的proxy可以缓存资源比如下次再请求同一资源proxy1直接把自己缓存的东西给 Browser 而不再向proxy2要。Private表示中间节点不允许缓存对于Browser -- proxy1 -- proxy2 -- Serverproxy 会老老实实把Server 返回的数据发送给proxy1,自己不缓存任何数据。当下次Browser再次请求时proxy会做好请求转发而不是自作主张给自己缓存的数据。no-cache表示不使用 Cache-Control的缓存控制方式做前置验证而是使用 Etag 或者Last-Modified字段来控制缓存no-store 真正的不缓存任何东西。浏览器会直接向服务器请求原始文件并且请求中不附带 Etag 参数(服务器认为是新请求)。max-age表示当前资源的有效时间单位为秒。优点缓存控制功能更强大缺点假如浏览器再次请求资源a.jpg的时间间隔超过了max-age这时候向服务器发送请求服务器应该会重新返回a.jpg的完整文件。但如果 a.jpg 在服务器上未做任何修改发送a.jpg的完整文件就太浪费带宽了其实只要发送一个「a.jpg未被更改」的短消息标示就好了。5. 思路5 缓存 更新机制终极版比如浏览器第一次请求a.jpg 时服务器会发送完整的文件并附带额外信息其中Etag 是 对a.jpg文件的编码如果a.jpg在服务端未被修改这个值就不会变Cache-Control: max-age300 ETag:W/e-cbxLFQW5zapn79tQwb/g6Q浏览器把a.jpg和额外信息保存到本地。假如浏览器在300秒以内再次需要获取a.jpg时浏览器直接从缓存读取a.jpg(200, from xx cache)。假如浏览器在300秒之后再次需要获取a.jpg时浏览器发现该缓存的文件已经不新鲜了于是就向服务器发送请求 重新获取a.jpg, 在发送请求的时候附带刚刚保存的a.jpg的ETag ( If-None-MatchW/e-cbxLFQW5zapn79tQwb/g6Q)。 服务器在接收到请求后拿浏览器请求的 Etag 和当前文件重新计算后端 Etag 做个比较如果二者相等表示文件在未修改则发送个短消息响应头不包含图片内容, 304如果二者不等则发送新文件和新的 ETag浏览器获取新文件并更新该文件的 Etag。与 ETag 类似功能的是Last-Modified/If-Modified-Since。当资源过期时max-age超时发现资源具有Last-Modified声明则再次向web服务器请求时带上头 If-Modified-Since表示请求时间。web服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对。若最后修改时间较新说明资源又被改动过则响应整片资源内容200若最后修改时间较旧说明资源无新修改则响应HTTP 304 告知浏览器继续使用所保存的cache。