前端的强缓存和协商缓存

前端缓存机制

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

强缓存(HTTP Cache-Control)

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

协商缓存(Conditional Cache)

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

协商缓存的HTTP头

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

区别和使用场景

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

实践建议

  • 合理设置Cache-Control实现强缓存。
  • 对动态内容使用ETag或Last-Modified实现协商缓存。
  • 结合使用两种缓存策略,优化网站性能和用户体验。
相关推荐
小羊没烦恼!18 分钟前
T-SQL查询高级—SQL Server索引中的碎片和填充因子
开发语言·前端·javascript·数据库·后端·python·web安全
lv__pf29 分钟前
redis【TL redis(6)】
数据库·redis·缓存
定栓1 小时前
Webpack迁到Vite第一节:模块系统迁移:require → import
运维·前端·webpack
小熊在忙fpga1 小时前
N32G430芯片的flash表示
前端·javascript·html
Data analyse4561 小时前
App埋点版本兼容的字段迁移校验
大数据·运维·服务器·前端·数据库·数据分析
todoitbo1 小时前
本来只想给内网开个口子,Natapp 却多给了一道防护
前端·javascript·vue.js·内网穿透·网络防护·natapp
会灭火的程序员1 小时前
SuperMap AgentX Server智能体接入WEB应用技术文档
前端·supermap·agentx·agentx server
CRMEB1 小时前
商品 SKU 设计,从简单规格到多规格踩过什么
java·前端·数据库·开源
Chloe.Zz1 小时前
一篇入门Agent
开发语言·前端·javascript
hweiyu001 小时前
Redis命令:RPOPLPUSH
redis·缓存