前端面试每日三题 - Day 12

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

• JavaScript 中的节流与防抖实现原理与区别；
• React Suspense 与 lazy 的使用场景与注意事项；
• 系统设计实战：构建高并发场景下的任务调度系统。

---

✅ 题目 1：JavaScript 中的节流与防抖实现原理与区别

解析：

节流（throttle） 和 防抖（debounce） 是前端开发中控制高频事件触发的常见方式。

特性	节流 (throttle)	防抖 (debounce)
执行频率	固定间隔执行一次	停止触发一段时间后执行
适用场景	页面滚动、resize、input 实时校验等	搜索框输入、按钮点击防止重复提交等

代码实现：

// 防抖
function debounce(fn, delay) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

// 节流
function throttle(fn, delay) {
  let last = 0;
  return function (...args) {
    const now = Date.now();
    if (now - last >= delay) {
      fn.apply(this, args);
      last = now;
    }
  };
}

实战场景：

window.addEventListener("resize", debounce(() => {
  console.log("窗口调整完毕");
}, 500));

document.addEventListener("scroll", throttle(() => {
  console.log("滚动中");
}, 300));

记忆脑图建议：

高频事件优化

节流 throttle

防抖 debounce

固定时间间隔执行

适用场景: scroll, resize

事件停止后一段时间执行

适用场景: input 搜索, 按钮防抖

---

✅ 题目 2：React Suspense 与 lazy 的使用场景与注意事项

解析：

React 的 lazy() 和 Suspense 组合使用，实现组件级按需加载，减少首屏体积，提升性能。

基本用法：

import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    Loading...

}> ); }

✅ 使用场景：

• 路由懒加载（React Router 配合使用）
• 模块过大拆分
• 管理后台加载二级页面

⚠️ 注意事项：

• Suspense 仅支持动态 import() 的组件
• 服务端渲染（SSR）中使用 Suspense 需要特殊处理
• fallback 属性必须设置（用户体验保障）

记忆脑图建议：

React 组件懒加载

lazy

懒加载组件

Suspense

fallback 占位组件

• 注意事项：不支持 SSR，fallback 必须设置，仅支持动态 import()

---

✅ 题目 3：系统设计题 - 构建高并发场景下的任务调度系统

解析：

任务调度系统在爬虫、定时任务、消息通知、推送系统中都有应用。面对高并发任务调度需求，设计需具备：

1. 核心架构组件：

• 任务生产者（如前端或业务服务）
• 任务调度器（控制任务分发与限流）
• 任务执行器（多个 Worker 实例并发执行）
• 持久化存储（MongoDB/Redis/Kafka）

2. 架构图草图：

任务生产端 --> 消息队列 --> 任务调度中心（时间轮/优先级队列） --> Worker执行集群
                            ↑
                        状态持久化/日志系统

3. 高可用设计要点：

• 使用 Redis/Kafka 做消息缓冲，防止请求打爆服务
• 使用时间轮算法或优先队列处理延迟任务
• Worker 服务使用心跳机制与状态报告防止任务丢失

4. 示例：基于 Node.js 模拟任务调度器

const queue = [];
const MAX_WORKERS = 3;

function scheduleTask(task) {
  queue.push(task);
}

function startWorkers() {
  let running = 0;
  setInterval(() => {
    if (running < MAX_WORKERS && queue.length > 0) {
      const task = queue.shift();
      running++;
      task().finally(() => running--);
    }
  }, 100);
}

// 模拟任务
scheduleTask(() => new Promise(res => setTimeout(() => {
  console.log("任务完成"); res();
}, 1000)));

startWorkers();

记忆脑图建议：

任务生产者

消息队列 Kafka/Redis

任务调度中心

任务优先队列/延迟时间轮

Worker 执行器集群

执行任务 + 上报状态

状态日志与监控系统

---

今日总结

题目	知识点	重点关键词
JavaScript 节流与防抖	高频事件优化	debounce、throttle
React Suspense 与 lazy	组件懒加载	fallback、lazy、Suspense
高并发任务调度系统设计	系统设计	消息队列、调度中心、Worker

---

明日预告（Day 13）

• JavaScript 内存泄漏场景与排查技巧
• React 状态提升与 prop drilling 的权衡实践
• 系统设计实战：设计一个高可用的权限系统

---

坚持每日三题，未来更进一步！如果你也在准备面试，欢迎一起刷题打卡！