浏览器缓存机制详解

// 服务器端配置（Node.js + Express）
app.use(
  '/static',
  express.static('public', {
    maxAge: '1h', // 强缓存1小时
    etag: true, // 启用ETag
    lastModified: true // 启用Last-Modified
  })
)
 
// 或者使用更精细的控制
app.get('/api/data', (req, res) => {
  // 设置强缓存
  res.set('Cache-Control', 'public, max-age=3600')
 
  // 设置协商缓存
  res.set('ETag', generateETag(data))
  res.set('Last-Modified', new Date().toUTCString())
 
  res.json(data)
})

// 前端缓存控制
async function fetchWithCache(url, options = {}) {
  const cacheKey = `api-cache-${url}`
 
  // 检查本地缓存
  const cached = localStorage.getItem(cacheKey)
  if (cached) {
    const { data, timestamp } = JSON.parse(cached)
    const now = Date.now()
 
    // 缓存5分钟内有效
    if (now - timestamp < 5 * 60 * 1000) {
      return data
    }
  }
 
  // 发起网络请求
  const response = await fetch(url, options)
  const data = await response.json()
 
  // 保存到本地缓存
  localStorage.setItem(
    cacheKey,
    JSON.stringify({
      data,
      timestamp: Date.now()
    })
  )
 
  return data
}

// 图片懒加载 + 缓存
class ImageLoader {
  constructor() {
    this.cache = new Map()
  }
 
  async loadImage(src) {
    // 检查内存缓存
    if (this.cache.has(src)) {
      return this.cache.get(src)
    }
 
    return new Promise((resolve, reject) => {
      const img = new Image()
 
      img.onload = () => {
        // 缓存图片
        this.cache.set(src, img)
        resolve(img)
      }
 
      img.onerror = reject
      img.src = src
    })
  }
 
  // 预加载图片
  preload(images) {
    return Promise.all(images.map(src => this.loadImage(src)))
  }
}

// 1. 文件名加版本号
<link rel="stylesheet" href="/css/style.v1.2.3.css">
 
// 2. 文件名加哈希值
<link rel="stylesheet" href="/css/style.a1b2c3d4.css">
 
// 3. 查询参数
<link rel="stylesheet" href="/css/style.css?v=1.2.3">
 
// 4. 服务器端设置合适的缓存策略
// HTML文件：协商缓存
// 静态资源：强缓存 + 文件名变化

// 1. 设置合适的缓存头
app.get('/api/user', (req, res) => {
  res.set('Cache-Control', 'no-cache') // 强制协商缓存
  res.json(userData)
})
 
// 2. 前端控制缓存
fetch('/api/user', {
  cache: 'no-cache' // 强制重新请求
})
 
// 3. 添加时间戳
fetch(`/api/user?t=${Date.now()}`)

// 1. 设置合理的缓存时间
// 静态资源：长期缓存
Cache-Control: public, max-age=31536000 // 1年
 
// API数据：短期缓存
Cache-Control: private, max-age=300 // 5分钟
 
// 2. 定期清理缓存
if ('caches' in window) {
  caches.keys().then(names => {
    names.forEach(name => {
      // 删除过期的缓存
      if (name.includes('old-version')) {
        caches.delete(name);
      }
    });
  });
}

// 不同类型的资源使用不同的缓存策略
const cacheStrategies = {
  // HTML：协商缓存，确保内容及时更新
  html: 'no-cache',
 
  // CSS/JS：强缓存 + 文件名变化
  static: 'public, max-age=31536000',
 
  // 图片：长期缓存
  images: 'public, max-age=31536000',
 
  // API：短期缓存
  api: 'private, max-age=300'
}

// Service Worker缓存策略
self.addEventListener('fetch', event => {
  if (event.request.url.includes('/api/')) {
    // API请求：网络优先，缓存备用
    event.respondWith(
      fetch(event.request)
        .then(response => {
          const responseClone = response.clone()
          caches.open('api-cache').then(cache => {
            cache.put(event.request, responseClone)
          })
          return response
        })
        .catch(() => {
          return caches.match(event.request)
        })
    )
  } else {
    // 静态资源：缓存优先
    event.respondWith(
      caches.match(event.request).then(response => response || fetch(event.request))
    )
  }
})

// 监控缓存命中率
class CacheMonitor {
  constructor() {
    this.stats = {
      hits: 0,
      misses: 0
    }
  }
 
  recordHit() {
    this.stats.hits++
    this.logStats()
  }
 
  recordMiss() {
    this.stats.misses++
    this.logStats()
  }
 
  logStats() {
    const total = this.stats.hits + this.stats.misses
    const hitRate = ((this.stats.hits / total) * 100).toFixed(2)
    console.log(`缓存命中率: ${hitRate}%`)
  }
}