浏览器缓存更新与HTTP协议实现

当第一次打开网页的时候，浏览器会将一些js、css、图片等资源缓存到本地，在下次浏览时如果需要用到这些资源时就不必再从服务器端请求下载，直接从缓存读取，提高了网页浏览速度。

 

一个标准的HTTP请求格式如下

 

当请求的资源在本地有缓存时，向服务器发出的请求如下图。与之前相比较，客户端发出的请求增加了If-Modified-Since、If-None-Match标签，服务器返回响应增加了Last-Modified、ETag标签

 Etag/If-None-Match

　　一对验证文件实体的标记“Entity Tag”的响应/请求头Apache中，ETag的值，默认是对文件的索引节（INode），大小（Size）和最后修改时间（MTime）进行Hash后得到的。

 

Last-Modified/If-Modified-Since

　　一对验证文件的修改时间的响应/请求头Expires、Cache-Control、Last-Modified、ETag是RFC 2616（HTTP/1.1）协议中和网页缓存相关的几个字段。前两个用来控制缓存的失效日期，浏览器可通过它来判定，需不需要发出HTTP请求；后两个用来验证网页的有效性，服务器端利用它来验证这个文件是否需要重新返回。

 

Last-Modified VS Etag

　　既然有了Last-Modified，为什么还要用ETag字段呢？因为如果在一秒钟之内对一个文件进行两次更改，Last-Modified就会不正确。因此，HTTP/1.1利用Entity Tag头提供了更加严格的验证。

 

 

 

页面刷新的方式：

 

普通页面跳转（地址栏回车、用js脚本打开新页面、链接点击跳转）：无缓存情况下，请求会返回所有资源结果，设置Expires并且未过期时，浏览器将不会发出http请求；如果Expires过期，则会发送相应请求，并附带上Last-Modifed等信息，供服务器校验。

 

F5:页面刷新这种情况一下，一般会看到很多304的请求，就是说即便资源设置了Expires且未过期，浏览器也会发送相应请求。

　
Ctrl+F5: 强制刷新 效果和无缓存时候一致，返回200的结果。