前端的强缓存和协商缓存

前端缓存机制

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

强缓存(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实现协商缓存。
  • 结合使用两种缓存策略,优化网站性能和用户体验。
相关推荐
艾小码13 分钟前
还在重复造轮子?掌握这7个原则,让你的Vue组件复用性飙升!
前端·javascript·vue.js
pipip.1 小时前
Redis vs MongoDB:内存字典与文档库对决
数据库·redis·缓存
2401_831501731 小时前
Web网页之前端三剑客汇总篇(基础版)
前端
木易 士心2 小时前
Vue 3 Props 响应式深度解析:从原理到最佳实践
前端·javascript·vue.js
海鸥两三5 小时前
uniapp 小程序引入 uview plus 框架,获得精美的UI框架
前端·vue.js·ui·小程序·uni-app
lightgis6 小时前
16openlayers加载COG(云优化Geotiff)
前端·javascript·html·html5
小飞大王6666 小时前
TypeScript核心类型系统完全指南
前端·javascript·typescript
你的人类朋友8 小时前
✍️记录自己的git分支管理实践
前端·git·后端
合作小小程序员小小店9 小时前
web网页开发,在线考勤管理系统,基于Idea,html,css,vue,java,springboot,mysql
java·前端·vue.js·后端·intellij-idea·springboot
防火墙在线9 小时前
前后端通信加解密(Web Crypto API )
前端·vue.js·网络协议·node.js·express