强缓存与协商缓存详解

被冷落许久的博客,是时候该更新了。刚好最近又做了些总结,给大家分享分享,有不足之处欢迎指正!

隆重介绍下今天的两位主角------强缓存协商缓存

一、为什么要使用缓存?

综合来说,主要由两个优点:高性能高并发
1、高性能

当应用程序需要访问数据库或其他外部资源时,如果这些资源的数据不经常变化,那么每次请求都需要重新获取数据,这会导致应用程序的响应时间变慢。使用缓存可以将这些数据存储在缓存中,这样下一次请求相同的数据时就可以直接从缓存中获取,而不需要再次查询数据库或其他外部资源,从而提高了应用程序的性能。同时还能能减少数据库负载。
2、高并发

当多个用户同时访问应用程序时,如果每个用户都需要访问数据库或其他外部资源,那么会对系统造成很大的负担。使用缓存可以将一些常用的数据存储在缓存中,这样多个用户同时访问时就可以共享缓存中的数据,从而减轻了系统的负担。

二、 浏览器缓存过程

  1. 浏览器发送http请求前,先访问浏览器缓存,有缓存则进行下一步,否则,进行第5步;
  2. 在浏览器缓存中查找该请求的结果以及缓存标识: 若请求头包含expirescache-control,则为强缓存策略:根据根据cache-contrle:max-age=xxxx(优先)expires计算缓存时间,若未超时,则进行第4步,若超时则强制缓存实效,进行下一步;
  3. 浏览器会发送请求,若请求头未包含的etaglast-modified,则进行第5步;否则判断为协商缓存,执行协商流程判定:
    1). 浏览器首次获取某个资源的时候,服务器会在返回资源的同时在响应头部加上Etag(资源的唯一标识字符串)、Last-Modified(资源最后一次在服务器上被修改的时间);
    2). 当浏览器再次请求该资源的时候,会在请求头加上If-None-Match字段(值为 1)Etag值)、If-Modified-Since(值为 1)Last-Modified值)
    3). 服务器收到传过来的值,再次生成该资源得Etag,并判定EtagIf-None-Match、该资源服务器上的最后修改时间与If-Modified-Since是否相等,如果相同,则满足协商缓存进行第5步。
    4). 如果不满足协商缓存,则进行第6步,更新资源并更新Etag的值、Last-Modified的值。
  4. 从缓存读取,进行第7步;
  5. 向web服务器发送请求,进行下一步;
  6. 请求响应,缓存协商,进行下一步;
  7. 数据展示

三、强缓存

命中强缓存,不会将请求发送给服务器,http返回码是200,size例显示from cache。

Expires或者Cache-Control两个字段来控制,用来表示资源的缓存时间。Cache-Control的优先级更高。

Expires

缓存过期时间,用来指定资源到期的时间,是服务器端的具体的时间点。如:Expires: Mon, 01 Jul 2024 13:31:00 GMT。客户端的时间与服务器返回的时间进行比较,如果在缓存有效期内,则可以直接使用强缓存。

注意 :因为Expires表示的是服务器具体的时间点,如果客户端与服务器端时间有误差,就可能出现强缓存一直是无效的情况。比如强缓存定义的是2024年7月1日13:00之前有效,但是客户端的时间偏快,此时已经13:30了,那一开始强缓存就是无效的。

Cache-Control

Cache-Control是一个相对时间,例如Cache-Control:max-age=3600,代表着资源的有效期是3600秒。由于是相对时间,并且都是与客户端时间比较,所以服务器与客户端时间偏差也不会导致问题。

四、协商缓存

若未命中强缓存,则浏览器会将请求发送至服务器。服务器根据http头信息中的Last-Modify/If-Modify-SinceEtag/If-None-Match来判断是否命中协商缓存。如果命中,则http返回码为304,浏览器从缓存中加载资源。

Last-Modify/If-Modify-Since

浏览器第一次请求一个资源的时候,服务器返回的header中会加上Last-ModifyLast-modify是一个时间标识该资源的最后修改时间,例如Last-Modify: Thu,31 Dec 2037 23:59:59 GMT

当浏览器再次请求该资源时,发送的请求头中会包含If-Modify-Since,该值为缓存之前返回的Last-Modify。服务器收到If-Modify-Since后,根据资源的最后修改时间判断是否命中缓存。

如果命中缓存,则返回http304,并且不会返回资源内容,并且不会返回Last-Modify。由于对比的服务端时间,所以客户端与服务端时间差距不会导致问题。

但是有时候通过最后修改时间来判断资源是否修改还是不太准确(资源变化了最后修改时间也可以一致)。于是出现了ETag/If-None-Match

ETag/If-None-Match

Last-Modify/If-Modify-Since不同的是,Etag/If-None-Match返回的是一个校验码。ETag可以保证每一个资源是唯一的,资源变化都会导致ETag变化ETag值的变更则说明资源状态已经被修改。服务器根据浏览器上发送的If-None-Match值来判断是否命中缓存。

以上就是我个人的见解,如有不足或补充,欢迎留言!!!

相关推荐
前端啊龙2 分钟前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠6 分钟前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds26 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4113 小时前
无网络安装ionic和运行
前端·npm
理想不理想v3 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试