http的缓存问题

一句话概括:浏览器请求资源的时候,会首先检查本地是否有缓存,减少向服务器请求的次数

一、缓存类型:

1. 强缓存(本地缓存):直接读本地,不发请求
  • 控制方式:
    • ① Cache-Control(HTTP1.1):优先级高
      max-age=秒数
      public:可被缓存,包括代理服务器
      private:客户端缓存
      no-cache:强制走协商缓存验证(不要直接用本地缓存,必须去验证,验证完了再说用不用)
      no-store:禁止缓存,每次都需要请求服务器
      通常情况时服务端配置,少数情况前端可通过meta标签配置,但优先级低于服务端响应头,(<meta http-equiv="Cache-Control" content="max-age=3600">
    • ② Expires(HTTP1.0):指定资源过期时间
2. 协商缓存(服务器验证):浏览器发请求验证是否可用,返回304则可用
  • 控制方式
    • ① Last-Modified + If-Modified-Since
      服务器返回资源时带LM(最后修改时间)
      浏览器下次请求时带IMS(上次修改时间),服务器对比是否更新
      ** Last-Modified服务器主动添加,表示资源的最后修改时间;If-Modified-Since浏览器自动发送,无需手动添加 **
    • ② ETag + If-None-Match 更精准
      服务器返回资源时带ETag(资源内容hash)
      浏览器下次请求时带If-None-Match,服务器对比hash

总结:浏览器缓存分为强缓存协商缓存 。强缓存即直接读取本地缓存,它的控制方式是cache-control,可以设置过期时间,也可以设置no-cache强制走协商缓存 。协商缓存即是浏览器先发一个请求验证缓存是否可用,若返回304则可用,验证的方式有两种,一种是对比修改时间 ,一种是对比内容hash

二、如何设计缓存策略(数据类型,更新频率,用户体验)

1. 浏览器原生缓存

场景:存储资源

强缓存:静态资源(图片、CSS、js、字体)设置长一些的过期时间

协商缓存:结合ETag对比更新;版本控制 --> URL版本号(?v=1.0.0)

2. 本地存储

场景:存储用户配置、登录信息、需跨页面共享的临时数据

  • localStorage :数据永久保存(除非手动清除或浏览器清除),容量较大,同源共享
    • 适用于:缓存用户配置、主题偏好等
  • sessionStorage :会话级,浏览器关闭后自动删除,容量较大,不同标签页不共享
    • 适用于:缓存分页状态等
  • cookie :自动发送到服务端(fetch默认不带),容量小,可设置过期时间,可配置作用域
    • 适用于:登录凭证JWT,服务端会话状态SessionID
3. 内存缓存

场景:存储频繁访问、更新频率低的数据(下拉列表选项等)

通过维护全局变量,一次请求,后续直接读取,可配合定时器或事件监听定时更新

4. 接口请求缓存(Axios等库自定义缓存)

场景:列表数据、详情页数据

axios-interceptors拦截请求,判断是否读取缓存
根据用户操作调整策略:下拉刷新 --> 强制更新,手动刷新按钮

三、调试:

Chrome浏览器的开发工具:Chrome DevTools -> Network -> Size显示from cache表示使用缓存

勾选 Disable cache 可强制禁用缓存(开发时常用)·

相关推荐
像风一样自由20202 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术3 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing3 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止3 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall3 小时前
npm install安装的node_modules是什么
前端·npm·node.js
会飞的鱼先生3 小时前
Node.js-http模块
网络协议·http·node.js
烛阴3 小时前
简单入门Python装饰器
前端·python
袁煦丞4 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作