前端面试每日三题 - Day 9

前端面试每日三题 - Day 9

这是我为准备前端/全栈开发工程师面试整理的第九天每日三题练习，涵盖：

• JavaScript 中的事件机制与实践
• React 中的全局状态管理 Context API 使用技巧
• 系统设计实战：如何构建高可用的分布式缓存系统

---

✅ 题目 1：JavaScript 中的事件代理与事件冒泡机制详解

解析：

事件代理（Event Delegation）是一种利用事件冒泡的机制，将子元素的事件委托到父元素上，从而提高性能、节省内存。

• 事件冒泡：事件会从最具体的元素（事件源）向外一层层传播到 document。
• 事件代理：给父元素绑定一个事件监听器，判断事件的 target 是哪个子元素，再做相应处理。

示例代码：

<ul id="list">
  <li data-id="1">Item 1li>
  <li data-id="2">Item 2li>
ul>

<script>
  document.getElementById('list').addEventListener('click', function (event) {
    if (event.target.tagName === 'LI') {
      console.log('Clicked item ID:', event.target.dataset.id);
    }
  });
script>

记忆脑图建议：

事件机制
├── 冒泡阶段
├── 捕获阶段
└── 应用：事件代理
      └── 优点：节省资源、动态元素绑定

---

✅ 题目 2：React 中的 Context API 使用与性能问题

解析：

Context API 是 React 提供的跨组件传值方案，适用于主题、用户信息等全局数据共享，但也存在性能问题，主要是：任何使用 Context 的组件在 Context 值变动时都会重新渲染。

示例代码：

// 创建上下文
const UserContext = React.createContext();

// 父组件提供数据
function App() {
  const [user, setUser] = React.useState({ name: 'Alice' });

  return (
    
      
    
  );
}

// 子组件消费数据
function UserProfile() {
  const user = React.useContext(UserContext);
  return 
{user.name}
;
}

性能优化建议：

• 使用 React.memo 包裹组件，避免非必要的重新渲染。
• 拆分 Context，按需最小粒度拆分数据。
• 结合 useMemo/useCallback 保持引用稳定。

记忆脑图建议：

Context API
├── 场景：全局共享状态
├── 问题：所有使用组件会重新渲染
└── 优化：
    ├── React.memo
    ├── Context 拆分
    └── useMemo/useCallback

---

✅ 题目 3：系统设计：如何设计一个高可用的分布式缓存系统

解析：

分布式缓存系统广泛用于提升系统性能与响应速度，关键在于：高可用性、数据一致性、扩展性与容错机制。

⚙️ 架构设计要点：

1. 缓存层选择：如 Redis（支持主从复制、哨兵机制、集群模式）。
2. 数据一致性策略：
   • Cache Aside（旁路缓存）
   • Read/Write Through
3. 高可用设计：
   • 哨兵 Sentinel + 主从架构（故障自动转移）
   • Redis Cluster 分片机制
4. 缓存穿透/击穿/雪崩处理：
   • 布隆过滤器、互斥锁、降级机制等

Cache Aside 模式代码示意（Node.js 示例）：

const redis = require("redis");
const client = redis.createClient();
const db = require("./database");

async function getUser(userId) {
  const cached = await client.get(`user:${userId}`);
  if (cached) return JSON.parse(cached);

  const user = await db.getUserById(userId);
  await client.set(`user:${userId}`, JSON.stringify(user));
  return user;
}

记忆脑图建议：

分布式缓存系统设计
├── 关键目标：高可用 + 一致性 + 扩展性
├── 架构选型：Redis 主从/哨兵/集群
├── 策略：
│   ├── 缓存更新策略
│   ├── 缓存穿透/击穿/雪崩
└── 接入模式：Cache Aside 为主流

---

今日总结

题目编号	核心知识点	实用建议与示例
题目 1	事件代理与冒泡机制	统一监听，提高性能，适用于动态元素
题目 2	React Context API 性能问题	使用 React.memo、Context 拆分优化渲染
题目 3	分布式缓存系统设计	Redis + Cache Aside，处理一致性与可用性问题

---

明日预告

这是我为准备前端开发面试规划的第十天每日三题预告：

• JavaScript 中 this 的指向详解与常见陷阱
• Vue 生命周期钩子的执行顺序与场景实践
• 系统设计实战：内容推荐系统的核心架构设计

---

✨ 坚持学习，慢慢积累，厚积薄发，终将迎来你的高光时刻！