深入解析HTTP缓存策略从原理到实现的全方位指南与优化技巧

引言：HTTP缓存的重要性

HTTP缓存是Web性能优化的核心技术之一，它通过在客户端（浏览器）和中间代理服务器上存储资源副本，显著减少网络请求、降低服务器负载并提升用户体验。理解HTTP缓存策略不仅能帮助开发者优化网站加载速度，还能有效控制资源更新机制，避免不必要的带宽浪费。

在现代Web开发中，缓存策略直接影响首屏加载时间、用户交互响应速度以及整体用户体验。据统计，合理配置HTTP缓存可使页面加载速度提升50%以上，服务器请求量减少70%以上。本文将从缓存的基本原理出发，深入解析各类缓存策略的实现方式，并提供实用的优化技巧。

缓存的工作原理

HTTP缓存机制基于客户端-服务器之间的请求-响应模型。当浏览器首次请求资源时，服务器通过响应头告诉浏览器如何缓存该资源。后续请求时，浏览器会根据缓存策略决定是使用本地缓存还是向服务器请求新资源。

缓存系统主要包含两类存储：

浏览器缓存：存储在用户设备上的本地缓存
代理缓存：位于客户端和源服务器之间的中间缓存（如CDN、反向代理）

缓存决策过程通常遵循以下流程：

检查资源是否已缓存
验证缓存是否过期/有效
根据策略决定使用缓存或重新请求
如需重新请求，可能携带验证信息（如ETag）

缓存相关的HTTP头部

HTTP缓存主要通过请求头和响应头中的字段来控制。以下是关键头部字段及其作用：

Cache-Control

这是HTTP/1.1引入的最重要的缓存控制头部，用于指定资源的缓存策略。它支持多个指令的组合：

Cache-Control: public, max-age=3600, must-revalidate

常用指令：

public：响应可被任何缓存存储
private：响应仅能被用户浏览器缓存
max-age=<seconds>：资源在客户端缓存的最大有效期（秒）
s-maxage=<seconds>：仅适用于共享缓存（如代理），优先级高于max-age
no-cache：缓存但必须重新验证（使用条件请求）
no-store：禁止缓存，每次都要从服务器获取
must-revalidate：缓存过期后必须重新验证
proxy-revalidate：仅适用于共享缓存

Expires

HTTP/1.0时代的产物，指定资源过期的绝对时间（GMT格式）。在HTTP/1.1中，Cache-Control的max-age优先级更高。

Expires: Thu, 31 Dec 2023 23:59:59 GMT

ETag

实体标签（Entity Tag）是服务器分配给资源的唯一标识符。当资源内容改变时，ETag也会改变。用于条件请求验证。

ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"

Last-Modified

资源最后修改时间，用于条件请求验证。精度不如ETag。

Last-Modified: Tue, 12 Dec 2023 08:00:00 GMT

If-Modified-Since

请求头，基于Last-Modified的条件请求。如果资源自指定时间后未修改，返回304 Not Modified。

If-Modified-Since: Tue, 12 Dec 2023 08:00:00 GMT

If-None-Match

请求头，基于ETag的条件请求。如果ETag匹配，返回304 Not Modified。

If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"

缓存策略分类

1. 强缓存（Strong Caching）

强缓存是最快的缓存策略，浏览器在缓存有效期内不会向服务器发送任何请求，直接使用本地缓存。

实现方式：

响应头设置 Cache-Control: max-age=<seconds> 或 Expires
浏览器根据本地时间判断缓存是否过期

示例：

HTTP/1.1 200 OK
Cache-Control: public, max-age=3600
Content-Type: text/css

/* 资源内容 */

浏览器行为：

首次请求：获取资源并缓存
3600秒内再次请求：直接使用缓存，不发送网络请求
3600秒后：缓存过期，发起新请求

适用场景：

静态资源（CSS、JS、图片）
不经常变化的API响应
版本化资源（如app.v1.2.3.js）

2. 协商缓存（协商缓存）

协商缓存需要与服务器通信验证资源是否有效。如果资源未修改，服务器返回304状态码，浏览器继续使用缓存；如果已修改，返回200和新资源。

实现方式：

基于ETag的验证：使用 If-None-Match
基于Last-Modified的验证：使用 If-Modified-Since

示例：

# 首次请求响应
HTTP/1.1 200 OK
ETag: "v1.0"
Last-Modified: Tue, 12 Dec 2023 08:00:00 GMT

# 后续请求
GET /api/data HTTP/1.1
If-None-Match: "v1.0"
If-Modified-Since: Tue, 12 Dec 2023 08:00:00 GMT

# 服务器响应（未修改）
HTTP/1.1 304 Not Modified
Cache-Control: max-age=3600

# 服务器响应（已修改）
HTTP/1.1 200 OK
ETag: "v1.1"
Last-Modified: Tue, 12 Dec 2023 09:00:00 GMT
Content-Type: application/json
{"data": "new content"}

浏览器行为：

缓存过期后，发送条件请求验证
服务器比较ETag或Last-Modified
304响应：使用缓存，节省带宽
200响应：使用新资源

适用场景：

API响应
动态内容但可缓存
需要实时性但允许短暂延迟的资源

3. 缓存验证

缓存验证是协商缓存的核心机制，确保浏览器使用的是最新资源。

ETag验证流程：

服务器生成资源的唯一标识（ETag）
浏览器在后续请求中携带 If-None-Match: <ETag>
服务器比较ETag，决定返回304或200

Last-Modified验证流程：

服务器返回资源最后修改时间
浏览器在后续请求中携带 If-Modified-Since: <时间>
服务器比较时间，决定返回304或200

ETag vs Last-Modified：

特性	ETag	Last-Modified
精度	高（内容哈希）	低（秒级）
可靠性	高（内容改变即改变）	低（可能因元数据改变）
性能	需要计算哈希	只需读取时间戳
分布式系统	需要协调	无需协调

缓存策略配置

1. 静态资源缓存策略

静态资源（CSS、JS、图片、字体）通常采用强缓存+版本化策略。

最佳实践：

使用文件名哈希或版本号（如app.a1b2c3.js）
设置较长的max-age（如1年）
配置Cache-Control: public, max-age=31536000, immutable

Nginx配置示例：

location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
    # 强缓存1年
    expires 1y;
    add_header Cache-Control "public, max-age=31536000, immutable";
    
    # 开启Gzip压缩
    gzip on;
    gzip_types text/css application/javascript image/svg+xml;
    
    # 跨域设置（如果需要）
    add_header Access-Control-Allow-Origin "*";
}

Apache配置示例：

<FilesMatch "\.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$">
    Header set Cache-Control "public, max-age=31536000, immutable"
</FilesMatch>

2. 动态内容缓存策略

动态内容（API响应、HTML页面）需要更精细的控制。

HTML页面缓存策略：

Cache-Control: no-cache
# 或
Cache-Control: public, max-age=0, must-revalidate

API响应缓存策略：

# 可缓存1分钟
Cache-Control: public, max-age=60

# 用户特定数据，仅浏览器缓存
Cache-Control: private, max-age=300

# 禁止缓存
Cache-Control: no-store, no-cache, must-revalidate
Pragma: no-cache
Expires: 0

3. 缓存清除策略

文件名哈希策略：

<!-- 每次构建生成新哈希 -->
<script src="app.a1b2c3.js"></script>
<link rel="stylesheet" href="styles.d4e5f6.css">

URL参数策略：

<!-- 版本号作为参数 -->
<script src="app.js?v=1.2.3"></script>

Cache-Busting策略：

# 对于未版本化的资源，设置较短的缓存时间
location ~* \.(php|aspx|jsp)$ {
    expires -1;
    add_header Cache-Control "no-cache, no-store, must-revalidate";
}

高级缓存策略

1. 缓存键（Cache Key）优化

在多租户或个性化内容场景下，需要自定义缓存键。

示例：基于Cookie的缓存：

# 根据Cookie值决定是否缓存
map $cookie_user_type $cache_policy {
    default "private";
    "premium" "public";
}

server {
    location /api/content {
        if ($cookie_user_type = "guest") {
            add_header Cache-Control "public, max-age=300";
        }
        if ($cookie_user_type != "guest") {
            add_header Cache-Control "private, max-age=60";
        }
    }
}

2. 缓存分层（Cache Hierarchy）

浏览器缓存 → CDN缓存 → 源服务器缓存：

# 源服务器响应
HTTP/1.1 200 OK
Cache-Control: public, max-age=3600, s-maxage=7200
ETag: "v1.0"

max-age=3600：浏览器缓存1小时
s-maxage=7200：CDN缓存2小时

3. 条件请求优化

减少条件请求：

# 设置合理的max-age，避免频繁验证
Cache-Control: public, max-age=86400  # 24小时

# 使用ETag避免Last-Modified的精度问题
ETag: "a1b2c3d4e5f6"

避免不必要的304响应：

# 对于静态资源，即使过期也直接返回200，避免条件请求
location ~* \.(js|css)$ {
    expires 1h;
    add_header Cache-Control "public, max-age=3600";
    # 不设置ETag，避免条件请求
    etag off;
}

4. 缓存预热

预热策略：

// 在应用启动时预加载关键资源
const criticalResources = [
    '/css/main.css',
    '/js/app.js',
    '/images/logo.png'
];

criticalResources.forEach(url => {
    fetch(url, { mode: 'no-cors' });
});

缓存策略优化技巧

1. 分层缓存策略

静态资源：

Cache-Control: public, max-age=31536000, immutable

动态API：

Cache-Control: private, max-age=60, must-revalidate

HTML文档：

Cache-Control: no-cache
# 或
Cache-Control: public, max-age=0, must-revalidate

2. 版本化与指纹

Webpack配置示例：

// webpack.config.js
module.exports = {
    output: {
        filename: '[name].[contenthash:8].js',
        chunkFilename: '[name].[contenthash:8].chunk.js'
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash:8].css'
        })
    ]
};

构建后HTML：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/css/main.a1b2c3d4.css">
</head>
<body>
    <script src="/js/app.e5f6g7h8.js"></script>
</body>
</html>

3. 缓存失效策略

主动失效：

# 删除缓存（需要Nginx Plus或第三方模块）
location ~ /purge(/.*) {
    allow 127.0.0.1;
    deny all;
    proxy_cache_purge STATIC "$1";
}

被动失效：

# 设置合理的max-age，让缓存自然过期
Cache-Control: public, max-age=3600

4. 性能监控与调优

监控指标：

缓存命中率（Cache Hit Rate）
304响应比例
平均资源加载时间

Node.js监控示例：

const http = require('http');
const fs = require('fs');

// 模拟缓存命中率统计
const cacheStats = {
    hits: 0,
    misses: 0,
    total: 0
};

const server = http.createServer((req, res) => {
    const ifNoneMatch = req.headers['if-none-match'];
    const ifModifiedSince = req.headers['if-modified-since'];
    
    cacheStats.total++;
    
    // 模拟ETag验证
    if (ifNoneMatch === '"v1.0"') {
        cacheStats.hits++;
        res.writeHead(304, { 'Cache-Control': 'max-age=3600' });
        res.end();
    } else {
        cacheStats.misses++;
        res.writeHead(200, {
            'Content-Type': 'application/json',
            'ETag': '"v1.0"',
            'Cache-Control': 'public, max-age=3600'
        });
        res.end(JSON.stringify({ data: 'content' }));
    }
});

server.listen(3000, () => {
    console.log('Server running on port 3000');
});

// 定期输出缓存统计
setInterval(() => {
    const hitRate = (cacheStats.hits / cacheStats.total * 100).toFixed(2);
    console.log(`Cache Hit Rate: ${hitRate}% (${cacheStats.hits}/${cacheStats.total})`);
}, 10000);

常见问题与解决方案

1. 缓存污染问题

问题：用户A的私有数据被用户B的缓存返回。

解决方案：

location /api/user {
    # 根据Authorization头区分缓存
    add_header Vary "Authorization";
    add_header Cache-Control "private, max-age=60";
}

2. 缓存穿透

问题：大量请求查询不存在的资源，导致每次都穿透到数据库。

解决方案：

// 缓存空结果
async function getData(key) {
    const cached = await redis.get(key);
    if (cached) {
        return cached === 'null' ? null : JSON.parse(cached);
    }
    
    const data = await db.query(key);
    // 缓存空结果，设置较短过期时间
    await redis.setex(key, 60, data ? JSON.stringify(data) : 'null');
    return data;
}

3. 缓存雪崩

问题：大量缓存同时过期，导致请求瞬间打到数据库。

解决方案：

// 设置随机过期时间
const randomTTL = baseTTL + Math.floor(Math.random() * 600); // 0-10分钟随机
await redis.setex(key, randomTTL, value);

// 或使用缓存预热
async function preloadCache() {
    const keys = await db.getAllKeys();
    for (const key of keys) {
        const data = await db.query(key);
        await redis.setex(key, 3600, JSON.stringify(data));
    }
}

4. 缓存击穿

问题：热点key过期瞬间，大量请求同时打到数据库。

解决方案：

// 使用互斥锁（Mutex）
async function getHotData(key) {
    const lockKey = `lock:${key}`;
    const cached = await redis.get(key);
    
    if (cached) {
        return JSON.parse(cached);
    }
    
    // 获取锁
    const lock = await redis.set(lockKey, '1', 'NX', 'EX', 10);
    
    if (lock) {
        try {
            const data = await db.query(key);
            await redis.setex(key, 3600, JSON.stringify(data));
            return data;
        } finally {
            await redis.del(lockKey);
        }
    } else {
        // 等待并重试
        await new Promise(resolve => setTimeout(resolve, 100));
        return getHotData(key);
    }
}

实际案例分析

案例1：电商网站静态资源优化

场景：商品详情页的CSS、JS、图片资源

优化前：

Cache-Control: max-age=3600

优化后：

Cache-Control: public, max-age=31536000, immutable
ETag: "a1b2c3d4e5f6g7h8"

效果：

首屏加载时间从2.3s降至0.8s
服务器带宽减少85%
缓存命中率提升至98%

案例2：新闻网站API缓存

场景：新闻列表API，每分钟更新

配置：

Cache-Control: public, max-age=60, s-maxage=120
ETag: "news-v1.0"
Vary: Accept-Language

效果：

API响应时间从150ms降至5ms（缓存命中）
服务器负载降低90%
支持多语言缓存（通过Vary头）

案例3：用户仪表盘（私有数据）

场景：用户个人数据仪表盘

配置：

Cache-Control: private, max-age=300, must-revalidate
ETag: "user-12345-v1.0"

效果：

页面加载速度提升60%
确保用户数据隔离
5分钟内快速响应，之后重新验证

缓存策略测试与验证

1. 使用浏览器开发者工具

Chrome DevTools：

打开Network面板
查看资源的Size列：
- 显示具体大小：从网络加载
- 显示from memory cache或from disk cache：使用缓存
查看Response Headers中的Cache-Control和ETag

2. 使用curl测试

# 首次请求
curl -I https://example.com/app.js

# 带If-None-Match的请求
curl -I -H "If-None-Match: \"v1.0\"" https://example.com/app.js

# 带If-Modified-Since的请求
curl -I -H "If-Modified-Since: Tue, 12 Dec 2023 08:00:00 GMT" https://example.com/app.js

3. 使用WebPageTest

# 安装WebPageTest CLI
npm install -g webpagetest

# 测试缓存性能
webpagetest test https://example.com --key YOUR_API_KEY --location ec2-us-east-1 --runs 3

总结

HTTP缓存策略是Web性能优化的基石。通过合理配置Cache-Control、ETag、Last-Modified等头部，结合版本化、指纹等技术，可以显著提升用户体验并降低服务器成本。

核心原则：

静态资源：长缓存+版本化（max-age=1年）
动态内容：短缓存+验证（max-age=0-60秒）
私有数据：仅浏览器缓存（private）
公共数据：多级缓存（public + s-maxage）
持续监控：关注缓存命中率和性能指标

通过本文的指南和技巧，您可以构建高效、可靠的HTTP缓存系统，为用户提供极致的Web体验。# 深入解析HTTP缓存策略从原理到实现的全方位指南与优化技巧

引言：HTTP缓存的重要性

缓存的工作原理

缓存系统主要包含两类存储：

浏览器缓存：存储在用户设备上的本地缓存
代理缓存：位于客户端和源服务器之间的中间缓存（如CDN、反向代理）

缓存决策过程通常遵循以下流程：

检查资源是否已缓存
验证缓存是否过期/有效
根据策略决定使用缓存或重新请求
如需重新请求，可能携带验证信息（如ETag）

缓存相关的HTTP头部

HTTP缓存主要通过请求头和响应头中的字段来控制。以下是关键头部字段及其作用：

Cache-Control

这是HTTP/1.1引入的最重要的缓存控制头部，用于指定资源的缓存策略。它支持多个指令的组合：

Cache-Control: public, max-age=3600, must-revalidate

常用指令：

public：响应可被任何缓存存储
private：响应仅能被用户浏览器缓存
max-age=<seconds>：资源在客户端缓存的最大有效期（秒）
s-maxage=<seconds>：仅适用于共享缓存（如代理），优先级高于max-age
no-cache：缓存但必须重新验证（使用条件请求）
no-store：禁止缓存，每次都要从服务器获取
must-revalidate：缓存过期后必须重新验证
proxy-revalidate：仅适用于共享缓存

Expires

HTTP/1.0时代的产物，指定资源过期的绝对时间（GMT格式）。在HTTP/1.1中，Cache-Control的max-age优先级更高。

Expires: Thu, 31 Dec 2023 23:59:59 GMT

ETag

实体标签（Entity Tag）是服务器分配给资源的唯一标识符。当资源内容改变时，ETag也会改变。用于条件请求验证。

ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"

Last-Modified

资源最后修改时间，用于条件请求验证。精度不如ETag。

Last-Modified: Tue, 12 Dec 2023 08:00:00 GMT

If-Modified-Since

请求头，基于Last-Modified的条件请求。如果资源自指定时间后未修改，返回304 Not Modified。

If-Modified-Since: Tue, 12 Dec 2023 08:00:00 GMT

If-None-Match

请求头，基于ETag的条件请求。如果ETag匹配，返回304 Not Modified。

If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"

缓存策略分类

1. 强缓存（Strong Caching）

强缓存是最快的缓存策略，浏览器在缓存有效期内不会向服务器发送任何请求，直接使用本地缓存。

实现方式：

响应头设置 Cache-Control: max-age=<seconds> 或 Expires
浏览器根据本地时间判断缓存是否过期

示例：

HTTP/1.1 200 OK
Cache-Control: public, max-age=3600
Content-Type: text/css

/* 资源内容 */

浏览器行为：

首次请求：获取资源并缓存
3600秒内再次请求：直接使用缓存，不发送网络请求
3600秒后：缓存过期，发起新请求

适用场景：

静态资源（CSS、JS、图片）
不经常变化的API响应
版本化资源（如app.v1.2.3.js）

2. 协商缓存（协商缓存）

协商缓存需要与服务器通信验证资源是否有效。如果资源未修改，服务器返回304状态码，浏览器继续使用缓存；如果已修改，返回200和新资源。

实现方式：

基于ETag的验证：使用 If-None-Match
基于Last-Modified的验证：使用 If-Modified-Since

示例：

# 首次请求响应
HTTP/1.1 200 OK
ETag: "v1.0"
Last-Modified: Tue, 12 Dec 2023 08:00:00 GMT

# 后续请求
GET /api/data HTTP/1.1
If-None-Match: "v1.0"
If-Modified-Since: Tue, 12 Dec 2023 08:00:00 GMT

# 服务器响应（未修改）
HTTP/1.1 304 Not Modified
Cache-Control: max-age=3600

# 服务器响应（已修改）
HTTP/1.1 200 OK
ETag: "v1.1"
Last-Modified: Tue, 12 Dec 2023 09:00:00 GMT
Content-Type: application/json
{"data": "new content"}

浏览器行为：

缓存过期后，发送条件请求验证
服务器比较ETag或Last-Modified
304响应：使用缓存，节省带宽
200响应：使用新资源

适用场景：

API响应
动态内容但可缓存
需要实时性但允许短暂延迟的资源

3. 缓存验证

缓存验证是协商缓存的核心机制，确保浏览器使用的是最新资源。

ETag验证流程：

服务器生成资源的唯一标识（ETag）
浏览器在后续请求中携带 If-None-Match: <ETag>
服务器比较ETag，决定返回304或200

Last-Modified验证流程：

服务器返回资源最后修改时间
浏览器在后续请求中携带 If-Modified-Since: <时间>
服务器比较时间，决定返回304或200

ETag vs Last-Modified：

特性	ETag	Last-Modified
精度	高（内容哈希）	低（秒级）
可靠性	高（内容改变即改变）	低（可能因元数据改变）
性能	需要计算哈希	只需读取时间戳
分布式系统	需要协调	无需协调

缓存策略配置

1. 静态资源缓存策略

静态资源（CSS、JS、图片、字体）通常采用强缓存+版本化策略。

最佳实践：

使用文件名哈希或版本号（如app.a1b2c3.js）
设置较长的max-age（如1年）
配置Cache-Control: public, max-age=31536000, immutable

Nginx配置示例：

location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
    # 强缓存1年
    expires 1y;
    add_header Cache-Control "public, max-age=31536000, immutable";
    
    # 开启Gzip压缩
    gzip on;
    gzip_types text/css application/javascript image/svg+xml;
    
    # 跨域设置（如果需要）
    add_header Access-Control-Allow-Origin "*";
}

Apache配置示例：

<FilesMatch "\.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$">
    Header set Cache-Control "public, max-age=31536000, immutable"
</FilesMatch>

2. 动态内容缓存策略

动态内容（API响应、HTML页面）需要更精细的控制。

HTML页面缓存策略：

Cache-Control: no-cache
# 或
Cache-Control: public, max-age=0, must-revalidate

API响应缓存策略：

# 可缓存1分钟
Cache-Control: public, max-age=60

# 用户特定数据，仅浏览器缓存
Cache-Control: private, max-age=300

# 禁止缓存
Cache-Control: no-store, no-cache, must-revalidate
Pragma: no-cache
Expires: 0

3. 缓存清除策略

文件名哈希策略：

<!-- 每次构建生成新哈希 -->
<script src="app.a1b2c3.js"></script>
<link rel="stylesheet" href="styles.d4e5f6.css">

URL参数策略：

<!-- 版本号作为参数 -->
<script src="app.js?v=1.2.3"></script>

Cache-Busting策略：

# 对于未版本化的资源，设置较短的缓存时间
location ~* \.(php|aspx|jsp)$ {
    expires -1;
    add_header Cache-Control "no-cache, no-store, must-revalidate";
}

高级缓存策略

1. 缓存键（Cache Key）优化

在多租户或个性化内容场景下，需要自定义缓存键。

示例：基于Cookie的缓存：

# 根据Cookie值决定是否缓存
map $cookie_user_type $cache_policy {
    default "private";
    "premium" "public";
}

server {
    location /api/content {
        if ($cookie_user_type = "guest") {
            add_header Cache-Control "public, max-age=300";
        }
        if ($cookie_user_type != "guest") {
            add_header Cache-Control "private, max-age=60";
        }
    }
}

2. 缓存分层（Cache Hierarchy）

浏览器缓存 → CDN缓存 → 源服务器缓存：

# 源服务器响应
HTTP/1.1 200 OK
Cache-Control: public, max-age=3600, s-maxage=7200
ETag: "v1.0"

max-age=3600：浏览器缓存1小时
s-maxage=7200：CDN缓存2小时

3. 条件请求优化

减少条件请求：

# 设置合理的max-age，避免频繁验证
Cache-Control: public, max-age=86400  # 24小时

# 使用ETag避免Last-Modified的精度问题
ETag: "a1b2c3d4e5f6"

避免不必要的304响应：

# 对于静态资源，即使过期也直接返回200，避免条件请求
location ~* \.(js|css)$ {
    expires 1h;
    add_header Cache-Control "public, max-age=3600";
    # 不设置ETag，避免条件请求
    etag off;
}

4. 缓存预热

预热策略：

// 在应用启动时预加载关键资源
const criticalResources = [
    '/css/main.css',
    '/js/app.js',
    '/images/logo.png'
];

criticalResources.forEach(url => {
    fetch(url, { mode: 'no-cors' });
});

缓存策略优化技巧

1. 分层缓存策略

静态资源：

Cache-Control: public, max-age=31536000, immutable

动态API：

Cache-Control: private, max-age=60, must-revalidate

HTML文档：

Cache-Control: no-cache
# 或
Cache-Control: public, max-age=0, must-revalidate

2. 版本化与指纹

Webpack配置示例：

// webpack.config.js
module.exports = {
    output: {
        filename: '[name].[contenthash:8].js',
        chunkFilename: '[name].[contenthash:8].chunk.js'
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash:8].css'
        })
    ]
};

构建后HTML：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/css/main.a1b2c3d4.css">
</head>
<body>
    <script src="/js/app.e5f6g7h8.js"></script>
</body>
</html>

3. 缓存失效策略

主动失效：

# 删除缓存（需要Nginx Plus或第三方模块）
location ~ /purge(/.*) {
    allow 127.0.0.1;
    deny all;
    proxy_cache_purge STATIC "$1";
}

被动失效：

# 设置合理的max-age，让缓存自然过期
Cache-Control: public, max-age=3600

4. 性能监控与调优

监控指标：

缓存命中率（Cache Hit Rate）
304响应比例
平均资源加载时间

Node.js监控示例：

const http = require('http');
const fs = require('fs');

// 模拟缓存命中率统计
const cacheStats = {
    hits: 0,
    misses: 0,
    total: 0
};

const server = http.createServer((req, res) => {
    const ifNoneMatch = req.headers['if-none-match'];
    const ifModifiedSince = req.headers['if-modified-since'];
    
    cacheStats.total++;
    
    // 模拟ETag验证
    if (ifNoneMatch === '"v1.0"') {
        cacheStats.hits++;
        res.writeHead(304, { 'Cache-Control': 'max-age=3600' });
        res.end();
    } else {
        cacheStats.misses++;
        res.writeHead(200, {
            'Content-Type': 'application/json',
            'ETag': '"v1.0"',
            'Cache-Control': 'public, max-age=3600'
        });
        res.end(JSON.stringify({ data: 'content' }));
    }
});

server.listen(3000, () => {
    console.log('Server running on port 3000');
});

// 定期输出缓存统计
setInterval(() => {
    const hitRate = (cacheStats.hits / cacheStats.total * 100).toFixed(2);
    console.log(`Cache Hit Rate: ${hitRate}% (${cacheStats.hits}/${cacheStats.total})`);
}, 10000);

常见问题与解决方案

1. 缓存污染问题

问题：用户A的私有数据被用户B的缓存返回。

解决方案：

location /api/user {
    # 根据Authorization头区分缓存
    add_header Vary "Authorization";
    add_header Cache-Control "private, max-age=60";
}

2. 缓存穿透

问题：大量请求查询不存在的资源，导致每次都穿透到数据库。

解决方案：

// 缓存空结果
async function getData(key) {
    const cached = await redis.get(key);
    if (cached) {
        return cached === 'null' ? null : JSON.parse(cached);
    }
    
    const data = await db.query(key);
    // 缓存空结果，设置较短过期时间
    await redis.setex(key, 60, data ? JSON.stringify(data) : 'null');
    return data;
}

3. 缓存雪崩

问题：大量缓存同时过期，导致请求瞬间打到数据库。

解决方案：

// 设置随机过期时间
const randomTTL = baseTTL + Math.floor(Math.random() * 600); // 0-10分钟随机
await redis.setex(key, randomTTL, value);

// 或使用缓存预热
async function preloadCache() {
    const keys = await db.getAllKeys();
    for (const key of keys) {
        const data = await db.query(key);
        await redis.setex(key, 3600, JSON.stringify(data));
    }
}

4. 缓存击穿

问题：热点key过期瞬间，大量请求同时打到数据库。

解决方案：

// 使用互斥锁（Mutex）
async function getHotData(key) {
    const lockKey = `lock:${key}`;
    const cached = await redis.get(key);
    
    if (cached) {
        return JSON.parse(cached);
    }
    
    // 获取锁
    const lock = await redis.set(lockKey, '1', 'NX', 'EX', 10);
    
    if (lock) {
        try {
            const data = await db.query(key);
            await redis.setex(key, 3600, JSON.stringify(data));
            return data;
        } finally {
            await redis.del(lockKey);
        }
    } else {
        // 等待并重试
        await new Promise(resolve => setTimeout(resolve, 100));
        return getHotData(key);
    }
}

实际案例分析

案例1：电商网站静态资源优化

场景：商品详情页的CSS、JS、图片资源

优化前：

Cache-Control: max-age=3600

优化后：

Cache-Control: public, max-age=31536000, immutable
ETag: "a1b2c3d4e5f6g7h8"

效果：

首屏加载时间从2.3s降至0.8s
服务器带宽减少85%
缓存命中率提升至98%

案例2：新闻网站API缓存

场景：新闻列表API，每分钟更新

配置：

Cache-Control: public, max-age=60, s-maxage=120
ETag: "news-v1.0"
Vary: Accept-Language

效果：

API响应时间从150ms降至5ms（缓存命中）
服务器负载降低90%
支持多语言缓存（通过Vary头）

案例3：用户仪表盘（私有数据）

场景：用户个人数据仪表盘

配置：

Cache-Control: private, max-age=300, must-revalidate
ETag: "user-12345-v1.0"

效果：

页面加载速度提升60%
确保用户数据隔离
5分钟内快速响应，之后重新验证

缓存策略测试与验证

1. 使用浏览器开发者工具

Chrome DevTools：

打开Network面板
查看资源的Size列：
- 显示具体大小：从网络加载
- 显示from memory cache或from disk cache：使用缓存
查看Response Headers中的Cache-Control和ETag

2. 使用curl测试

# 首次请求
curl -I https://example.com/app.js

# 带If-None-Match的请求
curl -I -H "If-None-Match: \"v1.0\"" https://example.com/app.js

# 带If-Modified-Since的请求
curl -I -H "If-Modified-Since: Tue, 12 Dec 2023 08:00:00 GMT" https://example.com/app.js

3. 使用WebPageTest

# 安装WebPageTest CLI
npm install -g webpagetest

# 测试缓存性能
webpagetest test https://example.com --key YOUR_API_KEY --location ec2-us-east-1 --runs 3

总结

核心原则：

静态资源：长缓存+版本化（max-age=1年）
动态内容：短缓存+验证（max-age=0-60秒）
私有数据：仅浏览器缓存（private）
公共数据：多级缓存（public + s-maxage）
持续监控：关注缓存命中率和性能指标

通过本文的指南和技巧，您可以构建高效、可靠的HTTP缓存系统，为用户提供极致的Web体验。