主题
附录 A2 · 大厂场景设计题方法论
一句话开篇：场景题考的是"前端架构师"思维——不是写代码，而是搭舞台。能不能把一个模糊的需求拆成清晰的方案、能不能把一个看似简单的功能讲出 80 个细节、能不能在权衡中给出有理有据的取舍，这些就是 P5/P6/P7 的分水岭。
0. 生活类比：场景题就是"装修一套房子"
把每道场景题想象成"业主告诉你要装修一套房子"：
| 阶段 | 装修类比 | 答题阶段 |
|---|---|---|
| 听需求 | 三口之家 / 60㎡ / 预算 30 万 | 还原需求：用户量？性能要求？兼容性？ |
| 画图纸 | 户型规划 + 主材清单 | 架构设计：模块划分、数据流、技术选型 |
| 挑材料 | 地板用瓷砖还是木地板？ | 技术选型：为什么用 X 不用 Y？ |
| 施工细节 | 水管走顶还是走地？ | 关键技术点：核心算法、关键 API |
| 难点处理 | 承重墙不能拆怎么办？ | 难点与权衡：性能/体验/成本的平衡 |
| 验收 | 业主突然要加装中央空调 | 加分项：可扩展性、监控、灰度 |
| 保修 | 漏水了怎么办？ | 兜底容错：降级、重试、监控告警 |
新人只会说"先量房，再做柜子"；老司机会问"承重墙在哪？水电预留多少？通风怎么走？要不要做地暖？"——问题问得好不好，决定了你的等级。
1. 场景题为什么这么重要？
1.1 它在面试中的占比
| 岗位级别 | 场景题占比 | 评价权重 |
|---|---|---|
| 校招 | 10% | 加分项 |
| P5 / 初级 | 20% | 区分"会写"和"会想" |
| P6 / 中级 | 40% | 决定 offer 等级 |
| P7+ / 高级 | 60%+ | 几乎全是场景题 |
1.2 它考察什么？
┌─────────────────────────────────────────────────────┐
│ 场景题考察维度 │
├─────────────────────────────────────────────────────┤
│ ① 需求理解力 ── 能不能问对问题、提对假设 │
│ ② 系统设计力 ── 能不能画出合理的模块/数据/调用链 │
│ ③ 技术选型力 ── 能不能解释"为什么用 X 不用 Y" │
│ ④ 工程素养 ── 有没有想到监控/降级/灰度/可观测性 │
│ ⑤ 边界思考力 ── 弱网/异常/极端用户/竞态等 │
│ ⑥ 表达组织力 ── 能不能 5 分钟内讲清一个复杂系统 │
└─────────────────────────────────────────────────────┘2. 场景题的"通用答题框架"（必背）
2.1 五段式结构
这个结构来自 Google / Meta 系统设计面试的标准模板，国内大厂同样适用。
┌──────────────────────────────────────────────────────┐
│ Step 1：明确需求（Requirements） 1 min │
│ Step 2：高层设计（High-Level Design） 2 min │
│ Step 3：核心组件（Components & Tech） 3 min │
│ Step 4：难点权衡（Trade-offs） 2 min │
│ Step 5：扩展兜底（Scale & Fallback） 2 min │
└──────────────────────────────────────────────────────┘2.2 五段式详解
Step 1：明确需求（最容易跳过，但最关键）
"面试官，我先确认几个前提，方便我设计：……"
必问的 5 件事：
- 核心流程：典型用户场景一句话
- 规模：QPS / DAU / 数据量 / 文件大小
- 性能要求：首屏 / FCP / LCP / 接口耗时
- 兼容性：浏览器 / 移动端 / 微信内
- 特殊约束：弱网 / 离线 / 国际化 / 隐私
示例（大文件分片上传）：
- "用户量大概多少？最大文件多大？"（决定要不要分布式存储）
- "需要断点续传吗？秒传？"（决定要不要 hash）
- "并发上传支持几个？"（决定限流逻辑）
- "上传失败要不要自动重试？"（决定容错策略）
Step 2：高层设计（先画图，再讲）
"整体我会分成 4 个模块：…… 它们的数据流是这样的：……"
必画一张架构图（ASCII 即可）。
┌──────────┐ ┌──────────┐ ┌──────────┐
│ UI │────▶│ 逻辑层 │────▶│ 服务端 │
│ (View) │ │ (Service) │ │ (API) │
└──────────┘ └──────────┘ └──────────┘
│
▼
┌──────────┐
│ 数据层 │
│ (Cache) │
└──────────┘Step 3：核心组件（细化每个模块）
每个组件要讲清：接口定义 / 关键算法 / 关键 API。
示例（无限滚动）：
- 数据层：分页接口设计（cursor 还是 offset）
- 检测层：用 IntersectionObserver 检测底部
- 渲染层：虚拟列表（只渲染可视区域 + 缓冲区）
- 状态层：去重、loading、has more、错误重试
Step 4：难点与权衡
"这里有 3 个值得讨论的权衡：……"
每道题都至少列 2 个权衡：
| 维度 | 方案 A | 方案 B | 选哪个？为什么 |
|---|---|---|---|
| 性能 vs 体验 | 节流 | 防抖 | 滚动用节流，输入用防抖 |
| 一致性 vs 可用性 | 强一致 | 最终一致 | 离线场景选最终一致 |
| 兼容性 vs 体验 | 老 API | 新 API | 移动端有 polyfill 用新 API |
Step 5：扩展兜底
"如果用户量翻 10 倍 / 接口挂了 / 弱网下，我会这样兜底：……"
必讲的 5 件事：
- 降级：核心功能有兜底（接口 500 → 显示缓存）
- 重试：失败重试策略（指数退避）
- 监控：埋点上报（性能、异常、行为）
- 灰度：新功能小范围灰度，再全量
- 可扩展：未来扩展点预留（插件化、配置化）
3. 场景题"加分话术"模板
3.1 体现工程经验
| 话术 | 加分点 |
|---|---|
| "我会先做埋点，用数据驱动优化方向" | 数据驱动思维 |
| "灰度 1% → 10% → 50% → 100%" | 风险意识 |
| "上线前压测，给出 QPS 上限" | 性能意识 |
| "我会预留插件机制，方便业务方扩展" | 可扩展性 |
| "弱网下用 LocalStorage 缓存上次结果" | 用户体验 |
3.2 体现技术深度
| 话术 | 加分点 |
|---|---|
| "首屏用 SSR，二屏用 CSR Hydrate" | 性能优化 |
| "用 IntersectionObserver 而不是 scroll，避免 layout thrashing" | 浏览器原理 |
| "WebWorker 跑 hash 计算，避免主线程卡顿" | 性能优化 |
| "用 OffscreenCanvas 异步渲染" | 前沿 API |
| "用 SharedArrayBuffer 实现多 Tab 共享状态" | 高级特性 |
3.3 体现产品思维
| 话术 | 加分点 |
|---|---|
| "我会先和产品对齐：是 PC 优先还是移动优先？" | 业务理解 |
| "考虑到 SEO，我会做 SSR" | 业务结果 |
| "为了海外用户，CDN 会选边缘节点" | 全球化视角 |
| "可访问性要兼顾屏幕阅读器" | A11y 意识 |
4. 15 道场景题地图
┌────────────────────────────────────────────────────────────────┐
│ 15 道大厂场景题地图（按主题分组） │
├────────────────────────────────────────────────────────────────┤
│ │
│ ① 文件与流（1） │
│ Q1 大文件分片上传（断点续传 / 秒传 / 并发控制） │
│ │
│ ② 列表与渲染（2） │
│ Q2 无限滚动列表（虚拟列表 + IntersectionObserver） │
│ Q9 复杂表单设计（嵌套 / 动态字段 / 校验联动） │
│ │
│ ③ 权限与登录（2） │
│ Q3 权限系统（菜单/按钮/接口三级） │
│ Q4 单点登录 SSO │
│ │
│ ④ 性能与体验（2） │
│ Q5 SPA 首屏优化 │
│ Q14 国际化 i18n │
│ │
│ ⑤ 监控与数据（3） │
│ Q6 前端埋点系统 │
│ Q7 错误监控系统 │
│ Q15 A/B 测试系统 │
│ │
│ ⑥ 通信与协作（2） │
│ Q8 多 Tab 通信 │
│ Q11 实时聊天界面（WebSocket） │
│ │
│ ⑦ 编辑器与画布（2） │
│ Q10 富文本编辑器 │
│ Q12 撤销重做画板 │
│ │
│ ⑧ 架构（1） │
│ Q13 微前端架构（qiankun / Module Federation） │
│ │
└────────────────────────────────────────────────────────────────┘5. 高频技术点速查表
下表是这 15 道题中最常出现的 30 个技术点，至少要混个脸熟：
| 技术点 | 涉及题号 | 一句话 |
|---|---|---|
IntersectionObserver | Q2/Q5/Q6 | 元素可见性观察器，性能优于 scroll 监听 |
requestIdleCallback | Q5/Q6 | 浏览器空闲时执行任务 |
| Web Worker | Q1/Q12 | 主线程之外跑 CPU 密集任务 |
| Service Worker | Q5 | 离线缓存 / PWA |
| WebSocket | Q11 | 全双工实时通信 |
| BroadcastChannel | Q8 | 同源多 Tab 广播 |
| SharedWorker | Q8 | 多 Tab 共享 Worker |
| postMessage | Q8/Q13 | iframe / window 通信 |
| localStorage | Q1/Q4/Q8/Q15 | 5MB 持久化存储 |
| IndexedDB | Q1/Q11 | 浏览器结构化数据库 |
| File API + Blob | Q1 | 文件读取与切片 |
| Range / Selection | Q10 | 富文本光标 / 选区 |
| contenteditable | Q10 | 原生富文本基石 |
| Canvas / OffscreenCanvas | Q12 | 画板 / 性能优化 |
| CSP / SOP | Q4/Q13 | 安全策略 |
| JWT / OAuth 2.0 / CAS | Q4 | 鉴权协议 |
| RBAC / ABAC | Q3 | 权限模型 |
| 路由守卫 / Vue Router beforeEach | Q3/Q5 | SPA 前端守卫 |
| qiankun / single-spa / MF | Q13 | 微前端框架 |
| Webpack 5 Module Federation | Q13 | 远程模块加载 |
| 骨架屏 / 路由懒加载 | Q5 | 首屏体验 |
| HTTP/2 Server Push | Q5 | 资源推送 |
| Performance API | Q5/Q6 | 性能采集 |
error / unhandledrejection | Q7 | 异常监听 |
| Source Map | Q7 | 错误反查源码 |
| sendBeacon / fetch keepalive | Q6/Q7 | 离开页面时上报 |
| MutationObserver | Q6/Q10 | DOM 变化监听 |
| 命令模式 | Q12 | 撤销重做的核心 |
| ICU / i18n format | Q14 | 复数 / 性别 / 时间格式化 |
| Cookie SameSite | Q4 | 跨域登录 |
6. 答场景题的"6 个雷区"
| # | 雷区 | 后果 |
|---|---|---|
| 1 | 不问需求直接答 | 显得不懂业务 |
| 2 | 一头扎进代码细节 | 看不到全局，没架构感 |
| 3 | 只讲方案不讲权衡 | 像背书，不像设计 |
| 4 | 没有 ASCII 图 | 表达能力差，听者没画面 |
| 5 | 不讲监控/降级 | 没做过线上系统 |
| 6 | 用最新最潮的技术全部往上堆 | 显得没经验，"屠龙术"思维 |
7. 训练方法（4 周提升计划）
第一周：模板与套路
- 把"五段式答题框架"背熟
- 选 3 道经典题（大文件上传 / 无限滚动 / 错误监控），每道写出 80 行答案
第二周：技术广度
- 把"30 个技术点速查表"逐个搜资料、看 MDN、写 demo
- 不必精通，但要"听过、知道在哪用"
第三周：模拟面试
- 找 1-2 个朋友模拟，对方扮演面试官，强行打断追问
- 录音回听，找出"啰嗦 / 跳跃 / 没自信"的地方
第四周：复盘与定制
- 准备 2-3 个"自己做过的项目"，能用本框架讲清
- 回看面经，遇到没见过的题，用框架现场套
8. ⚠️ 易踩的坑
| # | 坑 | 解决 |
|---|---|---|
| 1 | 不画图，光用嘴说，听者没画面 | 强制自己画 ASCII 架构图 |
| 2 | 把单个 API 当成方案（"用 IntersectionObserver 就行"） | 至少讲 3 个组件协同 |
| 3 | 选型只说"好"，不说"为什么不用别的" | 必带"对比表" |
| 4 | 把网上文章的方案原样复述 | 加入自己的项目经验 |
| 5 | 完美主义，啥都要讲到 | 控制在 5-8 分钟 |
| 6 | 听不进面试官的"反问"，硬刚 | 反问是引导，请尝试调整方案 |
9. 配套文件
- 📖
qa.md：15 道题完整答案（按 5 段式结构） - 💻
examples/：典型场景的核心代码片段（分片上传、虚拟列表、命令模式等） - 🌐
demo/index.html：交互式演示（大文件分片上传可视化 + 虚拟无限滚动）
10. 一句话总结
场景题的核心不是"知道一个 API"，而是能把这个 API 放进一个"系统"里，讲清它的位置、它的边界、它失败时的兜底。从"会写"到"会想"，是前端工程师真正的成长。
11. 延伸阅读
- 《Designing Data-Intensive Applications》——系统设计圣经
- System Design Primer
- 前端九部 - 入门者手册
- 极客时间《前端工程师 30 道场景题》专栏
- 配套：
qa.md（15 道题完整解答）/examples/（核心代码）/demo/index.html