前端的强缓存和协商缓存

前端缓存机制

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

强缓存(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实现协商缓存。
  • 结合使用两种缓存策略,优化网站性能和用户体验。
相关推荐
徐小夕14 小时前
花了3天,我写了一款开源AI公众号编辑器
前端·vue.js·github
PBitW14 小时前
git 中容易遗忘的点 (二) ⚡⚡⚡
前端·git·面试
Hilaku14 小时前
2026 年前端大洗牌:React 服务端到 Vite 的底层重构
前端·javascript·程序员
PBitW14 小时前
git 中容易遗忘的点 (三) 🚀🚀🚀
前端·git·面试
名字还没想好☜14 小时前
React setState 连续调用「丢更新」排查:批量更新与函数式更新
前端·javascript·react.js·react·usestate
come1123414 小时前
Vue 2 与 Vue 3 语法区别及使用技巧
前端·javascript·vue.js
腻害兔15 小时前
【若依项目-产品经理视角】RuoYi-Vue-Pro 源码拆解:ERP 企业资源模块,一个轻量级进销存的完整实现?
前端·javascript·vue.js·人工智能·前端框架·产品经理·ai编程
虹科网络安全15 小时前
艾体宝新闻|从 SQL 注入到服务器接管:CVE-2026-57517 暴露 Web 管理面板的供应链与安全编码风险
服务器·前端·sql
糖果店的幽灵15 小时前
langgraph的四种state解析
java·前端·javascript·langgraph
顺颂时绥_115 小时前
前端大图片压缩与安卓/苹果设备矫正实践
前端