设计一个前端组件的缓存策略，如何平衡性能和内存占用？请说明缓存的位置（浏览器、服务端、本地存储）和缓存策略（如LRU、TTL）的选择。

1) 【一句话结论】
根据数据访问模式（高频/低频、时效性），采用“浏览器内存缓存（LRU）+ 服务端缓存（TTL+LRU）+ 本地存储（IndexedDB）”的三层缓存架构，平衡性能与内存占用。

2) 【原理/概念讲解】
首先明确缓存位置的三层逻辑：

• 浏览器内存缓存：位于浏览器进程内存中（如DOM Cache、HTTP Cache），访问速度快（CPU缓存级），但容量小（通常5-10MB），适合高频、小数据量（如用户个人信息、组件状态）。
• 服务端缓存：由后端服务（如Redis）提供，容量大（GB级），适合中频、大数据量（如商品列表、用户数据），通过TTL控制数据有效期（类似食品保质期）。
• 本地存储：浏览器本地存储（如IndexedDB），读写依赖磁盘I/O（速度慢），但容量大（GB级），适合离线、大文件（如图片、视频、离线包）。

然后解释核心策略：

• LRU（Least Recently Used）：最近最少使用，类似图书馆书架——热销商品（高频访问）放在显眼位置，冷门商品（低频访问）放在角落，淘汰时优先淘汰最久未使用的。实现上通常用链表+哈希表（链表记录访问顺序，哈希表快速查找）。
• TTL（Time To Live）：时间到期，设置缓存的有效期（如5分钟），过期后自动失效（类似食品过期需丢弃）。需根据数据更新频率调整TTL（太短频繁请求后端，太长数据过时）。

3) 【对比与适用场景】

缓存位置	缓存策略	定义	特性	适用场景	注意点
浏览器内存缓存	LRU	内存中缓存，按访问时间排序，淘汰最近最少使用的	速度快（CPU缓存级），容量小（5-10MB）	高频、小数据量（如用户个人信息、组件状态）	需实现LRU算法（链表+哈希表）
服务端缓存	TTL+LRU	服务端（如Redis）缓存，结合时间过期和访问频率	速度快（网络延迟低），容量大（GB级）	中频、大数据量（如商品列表、用户数据）	需合理设置TTL（避免频繁请求/数据过时）
本地存储	TTL+容量限制	浏览器本地存储（IndexedDB）	读写慢（磁盘I/O），容量大（GB级）	离线、大文件（如图片、视频、离线包）	适合不频繁访问的数据，需注意读写性能

4) 【示例】
假设前端组件需获取“用户个人信息”，流程如下：

1. 浏览器内存缓存检查：若存在“user_info”且未过期，直接返回缓存数据（性能最优）。
2. 服务端缓存检查：若内存缓存未命中，检查Redis（服务端缓存），若存在“user_info”且未过期，返回数据并更新内存缓存（LRU策略）。
3. 请求后端API：若服务端缓存未命中，请求/api/user/info获取数据，返回后更新内存缓存和服务端缓存（Redis TTL=5分钟）。

伪代码示例：

async function getUserInfo() {
  // 1. 检查内存缓存（LRU）
  const cached = memoryCache.get('user_info');
  if (cached) return cached;
  
  // 2. 检查服务端缓存（TTL）
  const serverCached = await redis.get('user_info');
  if (serverCached) {
    memoryCache.set('user_info', serverCached);
    return serverCached;
  }
  
  // 3. 请求后端API
  const data = await fetch('/api/user/info');
  const result = await data.json();
  
  // 4. 更新缓存
  memoryCache.set('user_info', result);
  redis.set('user_info', result, { EX: 300 }); // TTL=5分钟
  return result;
}

5) 【面试口播版答案】
“面试官您好，针对前端组件缓存策略，我的核心思路是采用分层缓存架构来平衡性能与内存占用。具体来说，我会根据数据的访问频率和时效性，选择不同的缓存位置和策略：
首先，高频、短时效的数据（如用户个人信息、组件状态）优先使用浏览器内存缓存，采用LRU策略，因为内存缓存访问速度快，能快速响应高频请求，同时LRU能自动淘汰最近最少使用的数据，避免内存溢出；
其次，中频、长时效的数据（如商品列表、用户数据）使用服务端缓存（如Redis），结合TTL和LRU策略，服务端缓存容量大，能存储更多数据，TTL控制数据的有效期，避免缓存数据过时，而LRU则优化了访问性能；
最后，离线、大文件或需要持久化存储的数据（如图片、视频、离线包），使用浏览器本地存储（如IndexedDB），通过TTL和容量限制管理，虽然读写速度较慢，但能保证离线场景下的数据可用性。
总结来说，这种分层策略能根据数据特性动态分配缓存资源，既保证了高频请求的性能，又控制了内存占用，同时兼顾了离线场景的需求。”

6) 【追问清单】

1. “如果缓存数据有版本号，如何更新缓存？”
   回答要点：通过版本号（如V1/V2）标记缓存，当后端数据更新时，版本号递增，前端检查版本号是否匹配，若不匹配则更新缓存。
2. “如何处理缓存击穿（Cache Bombing）或雪崩（Cache Avalanche）？”
   回答要点：缓存击穿可通过互斥锁或随机延迟避免，缓存雪崩可通过设置随机TTL或热数据预热解决。
3. “如果组件数据更新频繁，如何优化缓存更新策略？”
   回答要点：采用增量更新（只更新变化的数据）或批量更新（定期批量更新），减少缓存更新频率。
4. “离线场景下，如何保证缓存数据的一致性？”
   回答要点：结合Service Worker和IndexedDB，实现离线缓存，当网络恢复时同步数据。
5. “如果内存缓存实现LRU，具体的数据结构是怎样的？”
   回答要点：通常使用链表（记录访问顺序）+ 哈希表（快速查找），链表头为最近使用，尾为最少使用，哈希表存储键值对，访问时将节点移到链表头。

7) 【常见坑/雷区】

1. 只采用单一缓存位置（如只用内存缓存），忽略分层策略，导致高频数据缓存不足或低频数据占用过多内存。
2. LRU策略实现不当（如未使用链表+哈希表），导致缓存淘汰效率低，影响性能。
3. TTL设置不合理（如TTL过短导致频繁请求后端，过长导致数据过时），需根据数据更新频率调整。
4. 忽略缓存一致性（如后端数据更新后，前端缓存未同步），导致数据不一致。
5. 本地存储使用不当（如频繁读写大文件，导致性能下降），适合不频繁访问的数据。