过期时间与etag

image.png

头信息

Expires

响应头
例如: Expires:Fri, 11 Nov 2016 06:56:15 GMT
在此日期之前，客户端都会认为缓存是有效的

Cache-Control

响应头
例如: Cache-Control:max-age=43200
一个相对的秒数，表示从现在起，43200秒内缓存都是有效的

Last-Modified

响应头
例如：Last-Modified:Fri, 06 Nov 2015 16:55:40 GMT
Last-Modified把Web组件的最后修改时间告诉客户端

If-Modified-Since

请求头
例如：If-Modified-Since:Fri, 06 Nov 2015 16:55:40 GMT
客户端在请求此Web组件的时候，会把上次服务端响应的最后修改时间作为If-Modified-Since的值发送给服务器
服务器可以通过这个值来判断是否需要重新发送，如果不需要，就简单的发送一个304状态码，客户端将从缓存里直接读取所需的Web组件

浏览器的刷新方式

F5：不允许浏览器直接使用本地缓存

image.png

Ctrl+F5：强制从服务器取文件，不会走缓存机制

image.png

地址栏里回车：优先从缓存中读取文件

image.png