前端的强缓存和协商缓存

前端缓存机制

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

强缓存(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实现协商缓存。
  • 结合使用两种缓存策略,优化网站性能和用户体验。
相关推荐
代码搬运媛3 分钟前
BFF 架构浅析:再也不用求后端改接口了
前端
ZC跨境爬虫5 分钟前
跟着 MDN 学 HTML day_50:(深入理解 DOM 中的 Text 节点)
前端·javascript·microsoft·ui·html·媒体
189228048615 分钟前
NV236美光MT29F32T08GWLBHD6-24TES:B
大数据·服务器·人工智能·科技·缓存
ZC跨境爬虫5 分钟前
跟着 MDN 学 HTML day_51:(深入理解 XPathEvaluator 接口)
前端·javascript·ui·html·音视频
wjykp11 分钟前
5.cypher语句组合与复杂操作
linux·前端·javascript
梦无矶12 分钟前
nrm自动设置npm镜像源
前端·npm·node.js
鲤鱼_59919 分钟前
记录——前端开发IDEA需要的插件
前端
代码讲故事20 分钟前
Redis生产环境批量的key需要删除,如何优雅实现且不影响线上环境?有密码认证的如何实现批量删除?有哪些实现方法?
运维·redis·缓存·高并发·删除·批量·生产环境
闵孚龙24 分钟前
Claude Code 缓存架构与断点设计全解析:Prompt Cache、上下文工程、Token 成本优化、AI Agent 长会话性能治理
人工智能·缓存·架构·prompt·claude
摘星编程25 分钟前
基于 JiuwenSwarm AgentTeam 构建混沌工程自动化实战
前端·chrome