浏览器缓存类型
-
强缓存
-
协商缓存
缓存获取流程
-
根据http header判断是否命中强缓存,如果命中,返回200状态码,让客户端直接从本地缓存中获取资源,不会向服务器请求资源
-
当没有命中强缓存时,客户端会发送请求到服务器,服务器通过request header验证该资源是否命中协商缓存
-
如果命中协商缓存,服务器直接返回请求(304状态码),不返回资源,告诉客户端直接从本地缓存中获取资源
-
如果未命中协商缓存,服务器在返回请求的同时(200状态码)将资源也返回给客户端
F5与Ctrl+F5的区别
-
F5:跳过强缓存,但会检查协商缓存
-
Ctrl+F5:直接从服务器加载,跳过强缓存和协商缓存
强缓存
-
强缓存类型
-
内存缓存(from memory cache):
-
内存缓存读取速度快
-
时效性很短(会随着进程的释放而释放)
-
小文件优先存入内存缓存(js和图片一般也是放内存缓存,因为脚本可能随时要执行,如果脚本在磁盘当中,执行脚本的时候需要进行I/O操作,频繁操作开销过大的话可能会导致浏览器失去响应)
-
-
硬盘缓存(from disk cache):
-
可存储量大,需要进行I/O操作
-
读取复杂,速度比内存缓存慢
-
大文件一般存在硬盘缓存(CSS一般也是放在硬盘缓存中,因为CSS样式加载一次即可渲染出网页)
-
-
-
匹配优先级
-
先去内存看,如果有,直接加载
-
如果内存没有,则去硬盘获取,如果硬盘上有则直接加载
-
如果硬盘也没有,那么就进行网络请求
-
加载到的资源缓存到硬盘和内存
-
-
对比
-
强缓存控制方式
-
设置缓存过期的绝对时间Expires,如:Thu, 18 Apr 2019 06:15:31 GMT;
-
设置cache-control
-
max-age=xxx,最大的有效时间,单位是秒
-
must-revalidate,如果超过了max-age的时间,必须向服务器发送请求,验证资源的有效性
-
no-cache,基本等价于max-age=0,由协商缓存来决定是否缓存资源
-
no-store,真正意义上的不缓存
-
public,所有内容都可以被缓存
-
private,所有内容只有客户端可以缓存,代理服务器不能缓存(默认值)
-
-
协商缓存
-
Last-Modified:资源最后的更新时间,随着服务器的response返回
-
If-Modified-Since:通过和Last-Modified做比较来判断资源在两次请求期间是否有过修改,如果没有就命中协商请求
-
如果资源变化的时间间隔小于秒级,比如说是毫秒级的,或者说资源直接是动态生成的,那根据Last-Modified判断,资源就是每时每刻都最新的,而Etag & If-Node-Match则可以用来解决这个问题;服务器通过请求头部的If-None-Match与当前资源的ETag是否一致来表示资源在两次请求中是否有过修改,如果没有修改,则命中协商缓存
参考资料
-
https://blog.csdn.net/weixin_44369568/article/details/92721315
-
https://blog.csdn.net/fengnext/article/details/100172186
-
https://www.jianshu.com/p/946f475a9075
-
https://www.jianshu.com/p/fd00f0d02f5f