1. enter 回车
首先不是直接发送http请求,而是根据缓存的http头中Cache-Control值判断是否走缓存,如果走缓存,则根据Expires字段判断缓存是否过期。
Cache-Control max-age=315360000
Expires
Sun, 22 Feb 2026 15:14:57 GMT
走缓存,并且未过期,不用发送http请求,走本地缓存;否则发起http请求。
图一 enter
2. f5 刷新 等同于右键刷新\地址栏的刷新
发送http请求,http请求头中包含两个字段:If-Modified-Since、If-None-Match ; 对比服务端的Last-Modified、Etag,如果完全一致,则走缓存。
浏览器:
If-Modified-Since Wed, 03 Sep 2014 10:00:27 GMT
If-None-Match "1ec5-502264e2ae4c0"
服务端:
Last-Modified
Wed, 03 Sep 2014 10:00:27 GMT
Etag
"1ec5-502264e2ae4c0"
两者一致,走缓存
图二 f5
3. 强刷 ctrl + f5
发送http请求,并设置两个字段,用来告诉服务器,不用判断是否走缓存,直接返回文件;
Cache-Control no-cache
Pragma no-cache
图三 ctrl + f5
总结:
enter 浏览器判断是否走本地缓存(Cache-Control、Expires)
f5 发送请求,由服务器判断是否走本地缓存(If-Modified-Since、If-None-Match)
ctrl + f5 强制刷新,不走本地缓存,从服务器读取数据(Cache-Control、Pragma
)