1. HTTP缓存与CDN缓存的核心原理HTTP缓存和CDN缓存是现代Web性能优化的两大基石。作为从业15年的Web架构师我发现90%的性能问题都源于缓存配置不当。让我们从底层原理开始彻底搞懂这套机制。HTTP缓存基于RFC 2616规范通过响应头控制资源缓存行为。关键头部包括Cache-Control现代缓存控制核心HTTP/1.1Expires传统过期时间HTTP/1.0ETag/Last-Modified验证机制CDN缓存则在HTTP缓存基础上增加了边缘节点层。当用户请求到达CDN节点时会经历如下决策流程检查本地缓存是否有效根据Cache-Control/Expires若缓存过期向源站验证If-None-Match/If-Modified-Since源站返回304未修改或200新内容关键经验CDN节点默认不缓存动态内容如PHP/JSP静态资源缓存时长建议CSS/JS 7天图片30天字体文件1年。2. 缓存配置实战指南2.1 CDN控制台配置详解以阿里云CDN为例缓存规则配置路径CDN控制台 域名管理 目标域名 缓存配置 缓存过期时间核心参数解析参数说明推荐值类型目录或文件后缀动静分离地址路径或后缀列表/static/, .css,.js过期时间缓存时长按更新频率设置权重规则优先级具体路径通用规则典型配置方案# 静态资源长缓存 /static/ max-age2592000 (30天) /images/ max-age604800 (7天) # 动态资源不缓存 /api/ max-age0 .php max-age02.2 HTTP头部的精细控制源站应返回正确的缓存头组合# Nginx配置示例 location ~* \.(js|css)$ { add_header Cache-Control public, max-age604800; add_header ETag ; } location /api/ { add_header Cache-Control no-cache, must-revalidate; }缓存验证流程示例GET /style.css HTTP/1.1 If-None-Match: abc123 HTTP/1.1 304 Not Modified ETag: abc1233. 高级缓存策略3.1 版本化部署方案解决缓存更新的经典方案!-- 传统方式 - 需要手动刷新CDN缓存 -- link href/css/style.css relstylesheet !-- 版本化方案 - 自动失效旧缓存 -- link href/css/style.v2.css relstylesheet实现方式构建工具添加哈希后缀Webpack/Vite时间戳版本控制内容哈希推荐3.2 多级缓存架构生产环境推荐架构浏览器缓存 - CDN边缘缓存 - 源站缓存 - 数据库缓存各级缓存时长建议浏览器缓存max-age36001小时CDN缓存max-age864001天源站缓存max-age3005分钟4. 疑难排查与性能优化4.1 常见问题排查表现象可能原因解决方案更新未生效CDN缓存未刷新提交刷新任务动态内容被缓存规则配置错误检查/api/路径规则缓存命中率低过期时间过短调整max-age值4.2 性能优化指标CDN缓存命中率应90%静态资源加载时间500ms首屏资源缓存利用率80%监控命令示例# 查看缓存命中情况 curl -I https://example.com/static/logo.jpg | grep X-Cache # 测试加载速度 curl -o /dev/null -s -w \ 时间: %{time_total}s\n速度: %{speed_download}byte/s \ https://example.com/main.js5. 行业最佳实践5.1 电商网站缓存策略商品图片max-age259200030天价格APImax-age601分钟商品详情页max-age3005分钟5.2 新闻媒体策略文章内容max-age36001小时评论列表max-age3005分钟热点排行max-age601分钟实际部署中发现通过合理配置Cache-Control的s-maxage和max-age差值可以显著降低回源率Cache-Control: public, s-maxage86400, max-age3600CDN缓存1天浏览器缓存1小时