浏览器缓存是提升网站性能的关键技术之一。本文详细介绍如何通过HTTP头、缓存策略和资源版本控制正确配置浏览器缓存，减少服务器负载并优化用户体验，涵盖ETag、Cache-Control等核心机制的实际应用。
一、为什么需要浏览器缓存？
浏览器缓存通过将静态资源（如CSS、JS、图片）存储在本地，可显著减少重复请求带来的网络开销。据统计，合理配置缓存可使页面加载速度提升40%以上，同时降低服务器带宽消耗。
二、核心缓存控制机制
1. Cache-Control头
Nginx配置示例
location ~ .(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
add_header Cache-Control "public, max-age=31536000";
}- max-age：定义资源有效期（秒）
- public：允许代理服务器缓存
- immutable：声明资源永不改变
2. ETag验证
通过文件指纹实现条件请求：
Apache配置
FileETag MTime Size三、进阶缓存策略
1. 版本化资源命名
<!-- 通过查询字符串或文件名实现版本控制 -->
<link href="/css/style.css?v=1.2.3" rel="stylesheet">2. Service Worker缓存
// 注册Service Worker
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js');
}四、常见问题解决方案
| 问题现象 | 解决方案 |
|---|---|
| 用户看不到更新内容 | 使用版本号或文件指纹强制更新 |
| 登录态与缓存冲突 | 对敏感资源设置Cache-Control: private |
五、性能优化组合拳
- 对频繁变更的资源：设置max-age=86400并配合ETag
- 对稳定第三方库：使用immutable属性
- 对API响应：添加no-store头禁止缓存
通过合理组合这些技术，可使网站在Lighthouse测试中获得90+的缓存评分。建议使用Chrome DevTools的Network面板定期验证缓存策略是否生效。
评论