1. 前言
浏览器缓存分为强制缓存和协商缓存,过程如下:
Step 1:浏览器发送请求前,根据请求头Cache-Control和Expires判断是否命中强缓存,如果命中强缓存,直接从缓存获取资源,且不会发送请求。
Step 2:如果未命中强缓存,浏览器会向服务器发送请求,服务器根据请求头的If-None-Match和If-Modified-Since判断是否命中协商缓存,如果命中,直接从缓存获取资源。
Step 3:如果未命中协商缓存,则从服务获取资源。
本篇浏览器缓存机制做一下梳理和总结。
2. 强缓存
- 第一请求,没有缓存结果和缓存标识,直接向服务器发送请求
- 存在缓存结果和缓存标识,但强缓存已失效,则使用协商缓存
- 存在缓存结果和缓存标识,且强缓存有效,直接返回缓存中的资源
HTTP头 | 说明 | |
Cache-Control | 功能:用于控制网页绑上 取值: no-cache - 不使用强缓存 no-store - 不使用缓存(强缓存和协商缓存) max-age=xx(xx是number类型)-缓存在xx秒后失效 注:Cache-Control是HTTP1.1的规则 | 作为响应头 作为请求头 |
Expires | 功能:缓存过期时间,指定资源到期的时间,是服务器端的绝对时间点 Expires = max-age + 请求时间 注:Expires是HTTP 1.0的产物,受限于本地时间,如修改本地时间,可能造成缓存失效 | 作为响应头 |
3. 协商缓存
携带If-None-Match和If-Modified-Since请求头向服务器发起请求:
- 协商缓存有效,返回304 Not Modified
- 协商缓存无效,返回200 OK和请求结果
HTTP头 | 说明 | |
Etag | 功能:浏览器首先发送一个请求,让服务器响应头中Etag带上标记资源文件的哈希值 | 作为响应头 |
If-None-Match | 功能:浏览器在下次请求中,请求头If-None-Match带上Etag的值,和服务器端资源的Etag值进行比对,一致的话,表示资源未改变,服务器返回正文为空的响应,让浏览器从缓存读取资源。 | 作为请求头 |
Last-Modified | 功能:浏览器首先发送一个请求,让服务端响应头中Last-Modified带上资源上次更新时间 注:Last-Modified保存的是绝对时间,单位以秒为单位,就感知不到1秒内资源改变,各环境读的时间可能不一样 | 作为响应头 |
If-Modfied-Since | 功能:浏览器在下次请求中,请求头If-Modified-Since带上Last-Modfied的值,和服务端资源修改时间进行比对,一致的话,表示资源未改变,服务器返回正文为空的响应,让浏览器从缓存读取资源。 | 作为请求头 |
4. 其他
- 在浏览器地址栏输入地址,查找disk cache中是否匹配,有匹配则使用,没有匹配就发送网络请求
- F5刷新,memory cache可以使用,有就使用,没有再从disk cache中找
- Ctrl+F5,浏览器不使用缓存,发送请求头带上Cache-Control: no-cache(同时还带上Pragma: no-cache),服务器返回200 OK和最新内容
注:以上,如有不合理之处,还请帮忙指出,大家一起交流学习~