优化前端应用的数据获取与缓存策略

题目描述
数据获取与缓存是前端性能优化的核心环节。不当的数据请求会导致网络拥塞、重复加载、白屏时间延长等问题。我们需要设计智能的数据获取策略，结合多级缓存机制，减少不必要的网络请求，提升数据加载速度和用户体验。

解题过程

1. 分析数据特性与使用场景
首先需要对不同类型的数据进行分类：

• 静态数据：配置信息、城市列表等（更新频率低）
• 半静态数据：商品信息、用户资料等（适度更新）
• 动态数据：实时消息、股价等（高频更新）

关键思路：根据数据更新频率和重要性，制定不同的缓存策略。

2. 浏览器级缓存策略
利用HTTP缓存机制减少网络请求：

// 设置合适的Cache-Control头部
// 静态资源：长期缓存（可设置1年）
Cache-Control: public, max-age=31536000, immutable

// 半静态数据：短期缓存（如10分钟）
Cache-Control: max-age=600

// 动态数据：不缓存或短时间缓存
Cache-Control: no-cache  // 或max-age=0

实践技巧：对静态资源添加内容哈希，实现"永久缓存+及时更新"。

3. 应用级内存缓存实现
在内存中建立缓存池，避免重复请求：

class DataCache {
  constructor() {
    this.cache = new Map();
    this.maxSize = 100; // 防止内存泄漏
  }
  
  set(key, data, ttl = 300000) { // 默认5分钟
    if (this.cache.size >= this.maxSize) {
      this.evictOldest();
    }
    
    this.cache.set(key, {
      data,
      expireTime: Date.now() + ttl,
      lastAccess: Date.now()
    });
  }
  
  get(key) {
    const item = this.cache.get(key);
    if (!item) return null;
    
    // 检查过期
    if (Date.now() > item.expireTime) {
      this.cache.delete(key);
      return null;
    }
    
    item.lastAccess = Date.now();
    return item.data;
  }
  
  evictOldest() {
    let oldestKey = null;
    let oldestTime = Infinity;
    
    for (const [key, value] of this.cache) {
      if (value.lastAccess < oldestTime) {
        oldestTime = value.lastAccess;
        oldestKey = key;
      }
    }
    
    if (oldestKey) this.cache.delete(oldestKey);
  }
}

4. 请求去重与竞态处理
防止相同请求并发发送：

class RequestDeduplicator {
  constructor() {
    this.pendingRequests = new Map();
  }
  
  async dedupe(key, requestFn) {
    // 如果已有相同请求在进行，直接返回Promise
    if (this.pendingRequests.has(key)) {
      return this.pendingRequests.get(key);
    }
    
    const requestPromise = requestFn().finally(() => {
      this.pendingRequests.delete(key);
    });
    
    this.pendingRequests.set(key, requestPromise);
    return requestPromise;
  }
}

// 使用示例
const deduplicator = new RequestDeduplicator();

async function fetchUserData(userId) {
  return deduplicator.dedupe(`user-${userId}`, async () => {
    const response = await fetch(`/api/users/${userId}`);
    return response.json();
  });
}

5. 分层缓存策略设计
构建多级缓存体系，按优先级访问：

1. 内存缓存：最快，但页面刷新即丢失
2. SessionStorage：标签页级别持久化
3. IndexedDB：大容量结构化存储
4. HTTP缓存：网络级别缓存
5. 服务端响应：最终数据源

class LayeredCache {
  async get(key) {
    // 1. 检查内存缓存
    let data = this.memoryCache.get(key);
    if (data) return data;
    
    // 2. 检查SessionStorage
    data = await this.getFromSessionStorage(key);
    if (data) {
      this.memoryCache.set(key, data); // 回填内存缓存
      return data;
    }
    
    // 3. 检查IndexedDB（大容量数据）
    data = await this.getFromIndexedDB(key);
    if (data) {
      this.memoryCache.set(key, data);
      return data;
    }
    
    return null;
  }
}

6. 预加载与预缓存策略
基于用户行为预测提前加载数据：

// 路由级别预加载
router.beforeEach((to, from, next) => {
  // 预加载目标页面所需数据
  if (to.meta.requiredData) {
    preloadData(to.meta.requiredData);
  }
  next();
});

// 交互行为预加载
function setupPredictiveLoading() {
  // 鼠标悬停时预加载
  document.querySelector('.user-profile-link').addEventListener('mouseenter', () => {
    preloadUserData();
  });
  
  // 可视区域预加载
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        preloadComponentData(entry.target.dataset.key);
      }
    });
  });
}

7. 缓存失效与更新策略
设计合理的缓存失效机制：

• 时间基失效：TTL（Time to Live）
• 事件基失效：数据更新时主动清除相关缓存
• 版本基失效：数据版本变化时整体更新

// 事件驱动的缓存失效
class CacheManager {
  constructor() {
    this.eventHandlers = new Map();
    this.setupEventListeners();
  }
  
  setupEventListeners() {
    // 用户信息更新时，清除所有相关缓存
    eventBus.on('user-updated', (userId) => {
      this.invalidate(`user-${userId}`);
      this.invalidate(`user-profile-${userId}`);
    });
    
    // 商品信息更新
    eventBus.on('product-updated', (productId) => {
      this.invalidate(`product-${productId}`);
      this.invalidate('product-list'); // 清除列表缓存
    });
  }
  
  invalidate(pattern) {
    for (const key of this.cache.keys()) {
      if (key.includes(pattern)) {
        this.cache.delete(key);
      }
    }
  }
}

8. 离线优先策略
实现离线可用的用户体验：

// 使用Cache API实现离线缓存
async function cacheFirstWithUpdate(request) {
  const cachedResponse = await caches.match(request);
  
  if (cachedResponse) {
    // 后台更新缓存
    fetch(request).then(response => {
      if (response.ok) {
        caches.open('data-v1').then(cache => {
          cache.put(request, response);
        });
      }
    });
    
    return cachedResponse;
  }
  
  return fetch(request);
}

总结
优秀的数据获取与缓存策略需要综合考虑数据特性、用户体验和技术实现。通过多级缓存、请求优化、智能预加载等技术的组合使用，可以显著提升前端应用的性能表现。关键在于找到缓存新鲜度与性能之间的最佳平衡点。