前端的强缓存和协商缓存

前端缓存机制

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

强缓存(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 小时前
软考网络工程师|案例分析:Eth‑Trunk 链路聚合、iStack 堆叠、CSS 集群核心考点总结
前端·css·网络
珐恩AI-人工智能14 小时前
大模型意图召回偏差分析:GEO如何解决“有收录却不触发问答曝光”的难题
大数据·前端·人工智能·html·流量运营·geo优化
程序员老赵14 小时前
Docker 部署禅道 ZenTao:轻松搭建研发项目管理平台
前端·后端·github
玛丽莲茼蒿14 小时前
Redis(六)—— Redis高级
数据库·redis·缓存
前端小卡拉14 小时前
用了大半年 AI 编程工具,我才搞懂 Skill 到底是什么
前端·javascript
hunterandroid15 小时前
[鸿蒙从零到一] HarmonyOS 单元测试与 UI 自动化测试实战:从代码质量到用户体验的全链路保障
前端
郭邯15 小时前
用 Intl.DateTimeFormat 手写一个时区转换器,顺便聊聊我和 AI 结对编程的日常
前端·javascript
阿奇__15 小时前
微前端、iframe与Auth Code技术方案对比
前端
FungLeo15 小时前
React 管理后台实战 · 前端请求层怎么写?401 静默刷新、token 并发竞争、强制改密拦截一次说清
前端·react.js·前端框架
Wang's Blog15 小时前
PostgreSQL笔记27: 双缓存架构下的内存管理与性能观测实践
笔记·缓存·postgresql