前端缓存问题详解

前端缓存是提升网页性能和用户体验的重要手段，但也常导致资源更新不及时等问题。以下是关于前端缓存的核心知识点和解决方案：

一、缓存类型及工作原理

1. HTTP缓存（最核心）

   • 强缓存：直接从本地读取，不请求服务器
     • Expires：HTTP/1.0，绝对时间（如Expires: Wed, 21 Oct 2025 07:28:00 GMT）
     • Cache-Control：HTTP/1.1，相对时间（如max-age=31536000表示缓存1年）
   • 协商缓存：先请求服务器判断是否需更新
     • Last-Modified/If-Modified-Since：基于文件修改时间
     • ETag/If-None-Match：基于文件内容哈希值（更精准）

2. 其他缓存机制

   • localStorage/sessionStorage：存储键值对数据，需手动管理
   • Cookie：存储少量数据，随请求发送，有大小限制
   • Service Worker：可编程控制的缓存，支持离线功能

二、常见缓存问题及解决

1. 资源更新不及时

   • 方案1：文件指纹
     给静态资源加哈希后缀（如app.8f3d7.js），内容变更则哈希变化，自动失效旧缓存
   • 方案2：合理设置Cache-Control

     # HTML文件（不缓存或协商缓存）
     Cache-Control: no-cache# 静态资源（长期强缓存+指纹）
     Cache-Control: max-age=31536000, immutable
     

   • 方案3：版本号策略
     在URL加版本参数（如lib.js?v=2），更新时改变版本号

2. 缓存冗余导致的空间占用

   • 定期清理localStorage中不再使用的数据
   • 对Service Worker缓存设置容量限制和淘汰策略

3. 跨域资源缓存

   • 服务器需设置Access-Control-Allow-Origin头
   • 对CDN资源确保正确配置缓存策略

三、缓存优化最佳实践

1. 分层缓存策略

   • HTML：协商缓存（no-cache）
   • CSS/JS/图片：强缓存+指纹（长期缓存）
   • API数据：结合业务设置合理的缓存时间

2. 缓存调试工具

   • Chrome DevTools的Network面板查看缓存状态
   • 关注Size列：from memory cache（内存）、from disk cache（磁盘）

3. 版本发布策略

   • 静态资源部署到CDN，使用指纹命名
   • HTML放在自己服务器，不设置强缓存
   • 大版本更新可考虑域名切换

合理利用缓存能显著提升页面加载速度，但需平衡缓存效率和内容新鲜度，根据资源类型制定差异化策略。