以下是缓存响应式网站静态资源的系统化方案及技术实现：

一、HTTP缓存头配置

强缓存策略‌

设置Cache-Control: max-age=31536000使静态资源缓存1年

配合Expires头兼容旧版浏览器，如Expires: Wed, 21 May 2026 07:28:00 GMT

协商缓存机制‌

通过Etag或Last-Modified实现资源变更检测，未修改时返回304状态码

nginx

Copy Code

location ~* \.(js|css|png)$ {

  etag on;

  if_modified_since exact;

}

二、服务器端配置

服务器类型 配置示例 作用说明

Nginx expires 30d; + add_header Cache-Control "public" 图片/CSS缓存30天

Tomcat 配置ExpiresFilter设置缓存周期 动态控制JSP资源缓存

Spring Boot .setCachePeriod(3600) 静态资源缓存1小时

三、CDN加速优化

将静态资源部署至CDN边缘节点，利用Cache-Control: public实现多用户共享缓存

配置CDN回源策略，仅当资源过期时请求源服务器

四、文件版本控制

html

Copy Code

<!-- 通过哈希值实现缓存破坏 -->

<link href="/style.a1b2c3.css" rel="stylesheet">

文件内容变更时自动生成新哈希，确保用户获取最新版本

五、缓存类型选择

关键路径资源：Cache-Control: no-cache配合Etag实现协商缓存

非可变资源：Cache-Control: immutable禁止重复验证

（注：需通过Chrome DevTools的Network面板验证缓存命中率）