前端的强缓存和协商缓存

前端缓存机制

前端缓存主要分为两种类型:强缓存协商缓存

强缓存(HTTP Cache-Control)

  • 通过设置HTTP响应头中的Cache-Control实现。
  • 浏览器根据Cache-Control的值决定是否重新请求资源。
  • 指令示例:
    • no-cache:重新验证缓存资源。
    • no-store:禁止缓存。
    • public:允许中间缓存存储响应。
    • private:仅用户可缓存。
    • max-age=<seconds>:设置缓存时间。

协商缓存(Conditional Cache)

  • 缓存过期后,浏览器通过发送请求头查询资源是否更新。
  • 使用ETagLast-Modified与服务器进行验证。
  • 如果资源未更新,服务器返回304 Not Modified

协商缓存的HTTP头

  • ETag:资源版本标识符,用于If-None-Match
  • Last-Modified:上次修改日期,用于If-Modified-Since

区别和使用场景

  • 强缓存:适用于不常变动的资源,减少请求。
  • 协商缓存:适用于可能更新的资源,验证资源更新。

实践建议

  • 合理设置Cache-Control实现强缓存。
  • 对动态内容使用ETagLast-Modified实现协商缓存。
  • 结合使用两种缓存策略,优化网站性能和用户体验。
相关推荐
战南诚7 分钟前
VUE中,keep-alive组件与钩子函数的生命周期
前端·vue.js
发现一只大呆瓜8 分钟前
React-彻底搞懂 Redux:从单向数据流到 useReducer 的终极抉择
前端·react.js·面试
霍理迪32 分钟前
Vue的响应式和生命周期
前端·javascript·vue.js
李剑一37 分钟前
别再瞎写了!Cesium 模型 360° 环绕,4 套源码全公开,项目直接用
前端
小码哥_常1 小时前
Android消息机制:Handler、Looper和Message的深度剖析
前端
小码哥_常1 小时前
安卓开发新姿势:文件Picker全攻略,无痛适配不再难
前端
happymaker06261 小时前
web前端学习日记——DAY04
前端·学习
发现一只大呆瓜1 小时前
React-路由监听 / 跳转 / 守卫全攻略(附实战代码)
前端·react.js·面试
swipe2 小时前
为什么 RAG 一定离不开向量检索:从文档向量化到语义搜索的工程实现
前端·llm·agent
OpenTiny社区2 小时前
AI-Extension:让 AI 真的「看得到、动得了」你的浏览器
前端·ai编程·mcp