如何通过HTTP缓存策略提升网站性能
2025-08-03 23:32:37
5
HTTP缓存基础
浏览器缓存：存储静态资源（CSS/JS/图片）
服务器响应头控制缓存行为
关键缓存头
Cache-Control（优先级最高）：max-age=3600（缓存1小时）no-cache（需重新验证）no-store（禁止缓存）public/private（代理缓存控制）Expires（HTTP/1.0，绝对时间）ETag（资源指纹，用于验证）Last-Modified（最后修改时间）
缓存策略设计
静态资源：
Cache-Control: public, max-age=31536000（1年）配合文件名哈希（如
app.a1b2c3.js）动态内容：
Cache-Control: no-cache+ETag验证或短时间缓存（如
max-age=60）
缓存验证机制
条件请求：
If-None-Match（ETag值）If-Modified-Since（时间戳）服务器返回304 Not Modified节省带宽
CDN缓存配合
边缘节点缓存静态资源
设置
CDN-Cache-Control头默认遵循源站
Cache-Control
禁用缓存的场景
用户敏感数据（
no-store）实时性要求高的API（
max-age=0）
调试工具
Chrome DevTools的Network面板
查看
size列标识（memory/disk cache）检查响应头/请求头
最佳实践组合
长期缓存 + 文件名指纹
弱ETag避免磁盘I/O
关键资源预加载
SPA使用app shell缓存
效果：二次访问可减少40-60%请求，首屏加载提升2-5倍。
