提升静态资源缓存命中率的实用方法

为什么缓存命中率会影响网页速度

打开一个网页，浏览器需要下载HTML、CSS、JavaScript、图片等文件。如果每次访问都要重新下载这些静态资源，页面加载就会变慢。而缓存命中率高，意味着大部分资源可以直接从本地读取，不用走网络，自然就快了。

合理设置HTTP缓存头

服务器返回静态资源时，可以通过设置 Cache-Control 和 Expires 头来控制缓存行为。比如，对于长期不变的JS或CSS文件，可以设置较长的缓存时间：

Cache-Control: public, max-age=31536000

这表示该资源可以在客户端缓存一年。注意：资源内容变更后，需要通过更改文件名或添加版本号来强制更新。

使用文件指纹避免缓存失效问题

直接缓存 app.js 会导致更新后用户仍用旧版本。更稳妥的做法是在构建时给文件名加上哈希值，例如：

<script src="app.a1b2c3d.js"></script>

只要文件内容变化，哈希值就会变，浏览器就会重新下载，否则一直使用缓存，完美兼顾长期缓存和及时更新。

启用CDN并配置缓存策略

CDN不仅加速分发，还能在边缘节点缓存资源。把静态资源托管到CDN上，并设置合适的缓存规则，可以让用户从离自己最近的节点获取文件。比如在Nginx中配置CDN回源缓存：

location ~* \.(js|css|png|jpg)$ {
    expires 1y;
    add_header Cache-Control "public";
}

避免随意更改URL参数

有些项目喜欢在静态资源URL后加 ?v=1.0 来刷新缓存，但这样做会让原本能命中的缓存失效。更好的方式是结合构建工具自动管理版本，而不是手动加参数。

利用强缓存与协商缓存结合

强缓存（如 max-age）效率最高，但无法感知服务端是否更新。协商缓存通过 ETag 或 Last-Modified 验证资源是否过期。对于频繁变动的资源，可设置较短的 max-age 并配合 ETag：

Cache-Control: public, max-age=3600
ETag: "abc123"

这样既减少重复下载，又保证内容一致性。

监控实际缓存效果

再好的策略也得看数据。通过浏览器开发者工具查看“Size”列，如果是 from memory cache 或 from disk cache，说明命中成功。也可以在日志系统中统计服务器收到的静态资源请求频率，判断缓存是否生效。