场景设计题
本文件按题型收录 场景设计题 相关前端面试题索引。 共收录 513 道题（基础 18 / 进阶 230 / 深入 179 / 架构 86）。 每道题都附带完整参考答案与评分维度，点击链接可查看原文。
基础题（18 道）
JavaScript（1 道）
计算机网络（1 道）
Vue（1 道）
AI 工程化（2 道）
Node.js / BFF（1 道）
Git 工作流与变更管理（1 道）
开发者体验与工程效能（1 道）
部署与 SRE（1 道）
包管理与供应链安全（1 道）
实时与协同（1 道）
Serverless/Edge（1 道）
团队领导力（4 道）
- FB-38-SC-B-006 两位 senior 因技术方案争执不下，作为 TL 你怎么介入？
- FB-38-SC-B-007 你如何为前端团队设计合理的绩效考核体系？
- FB-38-SC-B-008 如何在团队中建立有效的 1:1 机制？
- FB-38-SC-B-009 作为 Tech Lead，你如何平衡编码与管理工作？
招聘（1 道）
低代码（1 道）
进阶题（230 道）
TypeScript（1 道）
Browser（2 道）
计算机网络（1 道）
Web 安全（1 道）
HTML/CSS（4 道）
- FB-06-SC-A-001 设计一个响应式导航栏。
- FB-06-SC-A-002 解释一下容器查询（Container Query）及其使用场景。
- FB-06-SC-A-003 如何设计一个响应式图片组件？
- FB-06-SC-A-004 实现一个可拖拽排序列表的 HTML/CSS 思路
可访问性（a11y）（3 道）
数据结构与算法（2 道）
设计模式（2 道）
构建工具（1 道）
Monorepo（6 道）
- FB-11-SC-A-001 设计一个 Monorepo 下组件库的发布流程。
- FB-11-SC-A-002 设计一个 Monorepo 下共享 hooks 包的管理方案。
- FB-11-SC-A-003 设计一个 Monorepo 中共享 types 包的演进方案。
- FB-11-SC-A-016 设计一个 Monorepo 下共享 icons / assets 资源包的管理方案。
- FB-11-SC-A-022 设计一个 Monorepo 下共享设计 tokens 和主题包的管理方案。
- FB-11-SC-A-023 如何为 Monorepo 设计 CI/CD 流水线？
CI/CD（2 道）
代码质量与测试（4 道）
- FB-13-SC-A-001 如何为一个包含 API 调用的表单组件设计集成测试？
- FB-13-SC-A-002 如何测试一个上传文件组件？
- FB-13-SC-A-003 如何为一个带防抖的搜索输入框设计测试？
- FB-13-SC-A-004 如何为一个使用 localStorage 的自定义 Hook 设计测试？
设计系统与组件库（21 道）
- FB-14-SC-A-001 如何基于 Design Token 实现多主题切换？
- FB-14-SC-A-002 设计一个组件库的深色模式（Dark Mode）方案时需要考虑哪些问题？
- FB-14-SC-A-003 如何提高组件库的可组合性（Composability）？
- FB-14-SC-A-004 设计一个通用 Modal 组件时，API 应该如何设计？
- FB-14-SC-A-005 如何为组件库设计一致且可访问的键盘导航？
- FB-14-SC-A-006 如何设计支持响应式的组件？
- FB-14-SC-A-007 如何建立高效的 design-dev handoff（设计-研发交付）流程？
- FB-14-SC-A-008 如何设计一个支持多尺寸变体的 Button 组件？
- FB-14-SC-A-009 设计一个通用 Form 组件时，如何统一校验与错误提示？
- FB-14-SC-A-010 如何为组件库设计一套图标按需加载方案？
- FB-14-SC-A-011 设计一个可复用的 Table 组件需要考虑哪些扩展点？
- FB-14-SC-A-012 如何在组件库中实现平滑的动画与过渡效果？
- FB-14-SC-A-013 如何设计一个通用 Notification/Toast 组件？
- FB-14-SC-A-014 如何为组件库设计一致的间距与布局系统？
- FB-14-SC-A-015 组件库如何与 TypeScript 类型系统深度结合？
- FB-14-SC-A-016 如何设计组件库的按需加载（Tree Shaking + 按需引入）？
- FB-14-SC-A-017 如何设计一个 DatePicker 组件？
- FB-14-SC-A-018 如何设计一个支持虚拟滚动的 Select？
- FB-14-SC-A-019 如何设计一个 Skeleton 加载组件？
- FB-14-SC-A-020 如何设计一个 Steps 步骤条组件？
- FB-14-SC-A-021 组件库中如何实现响应式断点？
Vue（1 道）
跨端技术（2 道）
AI 工程化（2 道）
Git 工作流与变更管理（4 道）
- FB-20-SC-A-012 遇到 Git 冲突时，你的解决流程是什么？如何预防冲突？
- FB-20-SC-A-041 代码审查中发现敏感信息已提交到仓库，如何处理？
- FB-20-SC-A-044 线上发现缺陷，如何回滚已合并到 main 的提交？
- FB-20-SC-A-048 多人协作时，如何优雅地处理 rebase 后的冲突？
开发者体验与工程效能（7 道）
- FB-21-SC-A-014 团队里不同成员使用 VS Code / WebStorm，如何保证编辑器配置和扩展一致？
- FB-21-SC-A-040 新工具引入团队时，如何制定推广策略？
- FB-21-SC-A-043 跨团队协作时，如何管理 API 文档以提升 DX？
- FB-21-SC-A-047 如何设计一个有效的内部技术分享机制？
- FB-21-SC-A-072 新成员入职第一周配不好环境，如何设计一键 onboarding 方案？
- FB-21-SC-A-077 多个业务线共用组件库但需求冲突，如何设计治理机制？
- FB-21-SC-A-078 在 Vite 项目中需要支持 Babel 插件时，如何设计集成方案而不显著牺牲构建速度
部署与 SRE（3 道）
- FB-22-SC-A-010 蓝绿部署在前端如何实现？有哪些风险？
- FB-22-SC-A-011 如何设计前端金丝雀发布方案？
- FB-22-SC-A-012 基于 OSS 托管前端静态资源，如何设计多环境、多版本的发布架构？
包管理与供应链安全（1 道）
前端运维与监控（3 道）
- FB-24-SC-A-001 如何在项目中接入 Sentry 并设置性能监控？
- FB-24-SC-A-005 如何设计前端告警策略，避免告警疲劳？
- FB-24-SC-A-007 前端服务降级有哪些常见策略？
系统架构设计（7 道）
- FB-25-SC-A-001 你负责一个大型中后台系统，如何进行模块拆分和分层？
- FB-25-SC-A-009 设计一个前端配置中心（Feature Flag）系统
- FB-25-SC-A-010 设计一个前端埋点与监控 SDK 架构
- FB-25-SC-A-011 如何设计一个支持多租户的前端应用？
- FB-25-SC-A-012 大型中后台系统如何进行模块拆分
- FB-25-SC-A-013 前端应用灰度发布的技术方案
- FB-25-SC-A-014 如何设计一个可扩展的权限前端架构
微前端（6 道）
- FB-26-SC-A-013 设计一个子应用间通信方案，比较不同通信方式的适用场景。
- FB-26-SC-A-014 微前端子应用间如何通信
- FB-26-SC-A-015 微前端中如何共享登录态与权限
- FB-26-SC-A-016 微前端子应用如何独立开发与联调
- FB-26-SC-A-017 微前端与 Monorepo 如何结合
- FB-26-SC-A-018 微前端中的异常边界如何设计
性能工程（5 道）
- FB-27-SC-A-006 预加载（preload）、预取（prefetch）、预连接（preconnect）有什么区别？如何在一个电商详情页中使用它们？
- FB-27-SC-A-007 节流和防抖有什么区别？分别适用什么场景？
- FB-27-SC-A-008 如何排查页面卡顿
- FB-27-SC-A-009 如何优化首屏白屏时间
- FB-27-SC-A-010 如何优化电商大促活动页性能
质量保障（6 道）
- FB-28-SC-A-001 如何保证前端代码评审质量
- FB-28-SC-A-002 如何设计前端组件的测试策略
- FB-28-SC-A-003 如何保障前端发布质量
- FB-28-SC-A-004 前端如何保障兼容性质量
- FB-28-SC-A-005 如何提升前端测试的可维护性
- FB-28-SC-A-006 前端如何做回归测试策略
数据与状态管理（6 道）
- FB-29-SC-A-001 如何设计前端数据缓存策略
- FB-29-SC-A-002 如何设计跨组件共享的数据源
- FB-29-SC-A-003 如何处理前端分页与无限滚动状态
- FB-29-SC-A-004 如何设计前端搜索筛选状态
- FB-29-SC-A-005 前端购物车状态如何设计
- FB-29-SC-A-006 如何设计前端搜索状态与历史记录
可观测性（8 道）
- FB-30-SC-A-009 如果一个页面白屏，如何利用可观测性数据定位根因？
- FB-30-SC-A-014 如何处理前端高频埋点/性能数据上报不阻塞业务？
- FB-30-SC-A-015 遇到线上故障，你的处理流程是什么？
- FB-30-SC-A-016 页面白屏如何定位
- FB-30-SC-A-017 如何监控微前端子应用健康度
- FB-30-SC-A-018 如何利用监控数据驱动性能优化
- FB-30-SC-A-019 如何利用监控快速定位线上问题
- FB-30-SC-A-020 前端灰度发布监控
安全架构（1 道）
实时与协同（7 道）
- FB-32-SC-A-001 设计一个实时消息推送系统
- FB-32-SC-A-002 实时系统中的心跳设计
- FB-32-SC-A-003 实时聊天前端架构设计
- FB-32-SC-A-004 实时系统中如何做限流与降级
- FB-32-SC-A-005 实时系统中的多端一致性
- FB-32-SC-A-006 实时消息队列前端处理
- FB-32-SC-A-007 实时白板冲突处理
国际化（7 道）
- FB-33-SC-A-001 如何设计前端多语言资源管理
- FB-33-SC-A-002 国际化与路由/SEO 的结合
- FB-33-SC-A-003 前端如何做语言切换体验
- FB-33-SC-A-004 如何处理翻译中的占位符和 HTML
- FB-33-SC-A-005 如何在前端做翻译质量检查
- FB-33-SC-A-006 多语言下的日期格式化
- FB-33-SC-A-007 RTL 测试要点
可视化与图形（8 道）
- FB-34-SC-A-010 一个 10 万数据点的散点图在 SVG/Canvas 中卡顿，你会从哪些层面优化？
- FB-34-SC-A-011 如何设计一个可配置的图表组件
- FB-34-SC-A-012 如何实现图表的响应式布局
- FB-34-SC-A-013 如何导出图表为图片/PDF
- FB-34-SC-A-014 可视化项目中的数据格式设计
- FB-34-SC-A-015 如何设计实时数据可视化
- FB-34-SC-A-016 图表响应式适配方案
- FB-34-SC-A-017 图表导出图片方案
Serverless/Edge（7 道）
- FB-35-SC-A-001 前端如何使用边缘函数做 A/B 测试
- FB-35-SC-A-002 前端 BFF 放在 Serverless 的考量
- FB-35-SC-A-003 边缘函数如何做地理位置定向
- FB-35-SC-A-004 如何在 Serverless 中实现用户鉴权
- FB-35-SC-A-005 Serverless 应用如何做本地开发
- FB-35-SC-A-006 Serverless 下的 CI/CD 流程
- FB-35-SC-A-007 Serverless 下前端部署流程
前端数据工程（7 道）
- FB-36-SC-A-001 如何设计前端埋点数据模型
- FB-36-SC-A-002 如何设计前端实时数据看板
- FB-36-SC-A-003 如何设计埋点数据的质量校验
- FB-36-SC-A-004 如何设计前端数据采集 SDK
- FB-36-SC-A-005 如何保障报表数据的实时性
- FB-36-SC-A-006 如何做埋点事件的归因分析
- FB-36-SC-A-007 前端埋点数据采集设计
业务洞察（9 道）
- FB-37-SC-A-001 如何为 B2B SaaS 产品的“试用转付费”设计前端数据埋点与指标看板？
- FB-37-SC-A-003 需求优先级排序常见框架有哪些？如何应用于前端排期？
- FB-37-SC-A-005 如果电商大促页面转化率低于预期，前端应从哪些维度排查？
- FB-37-SC-A-008 成本效益分析中，如何量化前端性能优化带来的业务价值？
- FB-37-SC-A-009 你负责的电商大促页面在流量高峰时转化率异常下跌，如何定位并解决？
- FB-37-SC-A-010 新功能上线后核心指标没有变化，如何向业务方解释并建议下一步？
- FB-37-SC-A-011 业务方要求上线一个未经充分验证的“爆款”活动页面，你如何把控风险？
- FB-37-SC-A-012 如何帮助业务方识别“伪需求”并引导到正确方向？
- FB-37-SC-A-013 产品要进入下沉市场，前端策略需要哪些调整？
团队领导力（9 道）
- FB-38-SC-A-001 如何从 0 到 1 组建一支高效的前端团队？
- FB-38-SC-A-003 1on1 中下属只谈业务不谈个人，如何引导深入沟通？
- FB-38-SC-A-004 跨职能协作中前端团队与产品、后端、测试经常冲突，如何建立协作机制？
- FB-38-SC-A-006 团队士气低落时，有哪些可操作的提振动作？
- FB-38-SC-A-007 远程 / hybrid 团队中如何保证信息透明与沟通效率？
- FB-38-SC-A-008 两位 senior 工程师都想升职但名额有限，你如何沟通？
- FB-38-SC-A-009 团队关键成员提出离职，你如何挽留和交接？
- FB-38-SC-A-010 你如何让远程或混合办公的前端团队保持高效协作？
- FB-38-SC-A-011 公司要求前端团队降本增效，你会从哪些方面入手？
技术战略（8 道）
- FB-39-SC-A-001 如何为前端团队制定一份可落地的年度技术规划？
- FB-39-SC-A-003 面对一个创新型前端项目，如何设计孵化流程？
- FB-39-SC-A-005 如何判断一个业务领域是否值得做中台/平台化？
- FB-39-SC-A-006 技术战略与公司‘降本增效’目标冲突时，你如何取舍？
- FB-39-SC-A-007 如何评估一个技术项目是否应该继续、扩大还是停止？
- FB-39-SC-A-008 如何推动前端团队从“需求执行者”向“技术合伙人”转变？
- FB-39-SC-A-009 技术战略中，如何为“创新”分配资源？
- FB-39-SC-A-010 如何在技术战略中平衡“内部效率工具”与“面向用户产品”的投入？
沟通表达（10 道）
- FB-40-SC-A-001 产品提出不可能完成的 deadline，你如何沟通？
- FB-40-SC-A-002 两位 senior 对技术方案意见冲突，你如何协调？
- FB-40-SC-A-003 如何向非技术人员解释技术风险？
- FB-40-SC-A-004 如何推动团队采纳一项有争议的技术决策？
- FB-40-SC-A-005 前后端接口责任边界不清，怎么处理？
- FB-40-SC-A-008 项目延期，如何同步业务和老板？
- FB-40-SC-A-009 业务方在会上当众质疑前端交付质量，你如何回应？
- FB-40-SC-A-010 如何让沉默寡言的团队成员在会议中发声？
- FB-40-SC-A-011 如何用“讲故事”的方式汇报技术项目成果？
- FB-40-SC-A-012 当团队成员在公开场合互相指责时，你如何介入？
项目管理（8 道）
- FB-41-SC-A-001 需求方频繁变更需求，作为前端负责人你如何应对？
- FB-41-SC-A-002 项目进度落后两周，你将如何制定追赶计划？
- FB-41-SC-A-003 前端项目上线后出现严重线上 Bug，如何进行应急响应与根因分析？
- FB-41-SC-A-008 团队成员能力参差不齐，如何分配任务并保证交付质量？
- FB-41-SC-A-009 项目进度严重落后，你如何向业务和团队同步并调整？
- FB-41-SC-A-010 如何管理项目中的关键路径？
- FB-41-SC-A-011 项目上线前，你会做哪些检查和准备？
- FB-41-SC-A-012 项目上线后出现严重 Bug，你如何组织应急响应？
招聘（7 道）
- FB-42-SC-A-009 如何为一个新业务设计完整的面试流程？
- FB-42-SC-A-012 如何识别简历中的“水分”和过度包装？
- FB-42-SC-A-016 如何设计多元包容的招聘策略？
- FB-42-SC-A-017 如何设计前端工程师的职级标准和晋升体系？
- FB-42-SC-A-018 如何在招聘中平衡“文化契合”与“多样性”？
- FB-42-SC-A-019 如何通过技术博客/开源贡献吸引优秀前端人才？
- FB-42-SC-A-020 面试中如何评估候选人的代码可维护性意识？
技术品牌与布道（8 道）
- FB-43-SC-A-001 如何从 0 到 1 运营一个团队技术公众号或博客？
- FB-43-SC-A-002 如何在公司内部组织一场高质量的技术分享会？
- FB-43-SC-A-005 如何设计一套内部技术分享激励机制，让大家愿意分享？
- FB-43-SC-A-007 技术大会演讲的选题和提案（CFP）如何准备更容易被选中？
- FB-43-SC-A-008 公司内部如何建立技术分享的氛围？
- FB-43-SC-A-009 技术布道活动中，如何平衡“宣传公司”和“提供价值”？
- FB-43-SC-A-010 如何衡量一篇技术文章是否成功？
- FB-43-SC-A-011 如何帮助团队成员建立个人技术影响力？
技术治理与合规（10 道）
- FB-44-SC-A-001 如何在前端团队落地一套代码规范并保证执行？
- FB-44-SC-A-002 如何识别和量化前端技术债？
- FB-44-SC-A-003 设计一个前端架构评审 checklist。
- FB-44-SC-A-004 前端如何应对安全合规审计？
- FB-44-SC-A-005 如何建立前端数据分类分级与访问控制机制？
- FB-44-SC-A-006 如何防止前端代码库出现“架构腐化”？
- FB-44-SC-A-007 如何管理前端项目的第三方依赖风险？
- FB-44-SC-A-008 如何建立前端的安全治理流程？
- FB-44-SC-A-009 如何确保前端项目符合 GDPR、CCPA 等隐私法规？
- FB-44-SC-A-010 如何治理前端项目中的“影子 IT”或未经审批的工具？
Electron（5 道）
- FB-48-SC-A-004 如何实现 Electron 多窗口管理与状态同步？
- FB-48-SC-A-005 Electron 中如何实现多窗口管理？
- FB-48-SC-A-006 Electron 应用如何实现自定义标题栏？
- FB-48-SC-A-007 Electron 中如何实现托盘图标和菜单？
- FB-48-SC-A-008 Electron 如何与本地数据库交互？
多媒体（Multimedia）（1 道）
低代码（3 道）
简历与面试技巧（1 道）
行业特化（3 道）
- FB-56-SC-A-002 电商大促场景下前端稳定性保障要点有哪些？
- FB-56-SC-A-003 金融行业前端如何应对监管与合规要求？
- FB-56-SC-A-004 toB 产品如何做好权限设计与数据隔离？
深入题（179 道）
JavaScript（2 道）
TypeScript（2 道）
- FB-02-SC-P-001 解释 declare、namespace、module 的区别与使用场景。
- FB-02-SC-P-002 TypeScript 编译配置 strict: true 会开启哪些检查？实际项目中如何取舍？
Browser（3 道）
- FB-03-SC-P-001 设计一个浏览器端图片懒加载与占位方案。
- FB-03-SC-P-002 浏览器的内存泄漏常见场景有哪些？如何排查？
- FB-03-SC-P-003 如何设计浏览器端的安全架构防御 XSS、CSRF、点击劫持？
计算机网络（5 道）
- FB-04-SC-P-001 如何设计一个支持高并发的 WebSocket 聊天室？
- FB-04-SC-P-002 如何设计 RESTful API 的幂等性、版本控制与分页？
- FB-04-SC-P-003 区分以下 HTTP 状态码的使用场景：200、201、204、301、302、400、401、403、404、429、500、502、503、504。
- FB-04-SC-P-004 设计一个高并发短链服务的前后端接口
- FB-04-SC-P-005 设计一个断点续传上传组件
Web 安全（1 道）
HTML/CSS（1 道）
可访问性（a11y）（1 道）
数据结构与算法（2 道）
设计模式（1 道）
构建工具（5 道）
- FB-10-SC-P-001 在微前端项目中，构建工具应该如何配合设计？
- FB-10-SC-P-002 构建工具如何配合微前端实现独立部署与共享依赖？
- FB-10-SC-P-003 如何在构建阶段实现国际化资源的分包和按需加载？
- FB-10-SC-P-019 微前端多技术栈项目的构建隔离与共享依赖如何设计？
- FB-10-SC-P-020 如何为大型项目设计渐进式构建迁移方案？
Monorepo（5 道）
- FB-11-SC-P-001 多包版本策略：fixed mode vs independent mode
- FB-11-SC-P-002 多团队 Monorepo 中如何防止包依赖失控？
- FB-11-SC-P-003 设计 Monorepo 下多包联合调试方案。
- FB-11-SC-P-016 如何设计和执行 Monorepo 的包拆分或重构？
- FB-11-SC-P-017 Monorepo 中如何设计子包的测试策略？
代码质量与测试（6 道）
- FB-13-SC-P-001 测试不稳定（Flaky Test）有哪些常见原因？如何解决？
- FB-13-SC-P-002 E2E 测试中如何设计可维护的页面对象（POM）？
- FB-13-SC-P-003 如何设计一个前端 Mock 平台供多个团队使用？
- FB-13-SC-P-004 如何为一个多步骤表单 Wizard 设计 E2E 测试？
- FB-13-SC-P-005 如何为一个基于 WebSocket 的实时消息列表设计测试？
- FB-13-SC-P-006 如何设计质量门禁（Quality Gate）？
设计系统与组件库（15 道）
- FB-14-SC-P-001 组件库出现破坏性变更（Breaking Change）时应如何处理？
- FB-14-SC-P-002 如何设计可扩展的主题系统，支持业务线二次定制？
- FB-14-SC-P-003 组件库大版本升级时，如何制定迁移方案？
- FB-14-SC-P-004 组件库的性能优化有哪些手段？
- FB-14-SC-P-005 如何设计一个支持动态表单的 Form Engine？
- FB-14-SC-P-006 组件库如何做 API 兼容与废弃治理？
- FB-14-SC-P-007 如何设计支持国际化的组件库？
- FB-14-SC-P-008 组件库与低代码平台如何结合？
- FB-14-SC-P-009 如何设计组件库的插件与扩展机制？
- FB-14-SC-P-010 大型组件库如何做版本灰度与 AB 实验？
- FB-14-SC-P-011 如何设计一个可拖拽的组件？
- FB-14-SC-P-012 如何设计组件库的国际化文案管理？
- FB-14-SC-P-013 如何设计组件库的错误边界和降级策略？
- FB-14-SC-P-014 组件库如何支持微前端下的样式隔离？
- FB-14-SC-P-015 如何设计组件库的埋点与可观测性？
Vue（1 道）
跨端技术（5 道）
- FB-17-SC-P-021 跨端应用如何做好路由管理和深层链接（Deep Link）？
- FB-17-SC-P-022 如何为 React Native / Flutter / Electron 开发原生模块？
- FB-17-SC-P-023 跨端应用如何适配不同屏幕尺寸、安全区和暗黑模式？
- FB-17-SC-P-055 跨端应用中的音视频播放方案如何设计？
- FB-17-SC-P-056 跨端应用中的 JSBridge 设计
AI 工程化（1 道）
Node.js / BFF（6 道）
- FB-19-SC-P-051 BFF 层如何对下游微服务进行统一超时、重试、降级与缓存？
- FB-19-SC-P-054 如何设计 BFF 层的统一错误码与响应结构？
- FB-19-SC-P-055 Deno 和 Bun 与 Node.js 相比各有什么优缺点？什么场景下会选择它们？
- FB-19-SC-P-056 tRPC 和 gRPC 各适用于什么场景？在 BFF 中如何选择？
- FB-19-SC-P-057 在 BFF 中使用消息队列有哪些典型场景？如何保证消息不丢失？
- FB-19-SC-P-058 BFF 层统一响应结构设计
开发者体验与工程效能（1 道）
部署与 SRE（3 道）
- FB-22-SC-P-002 SSR 前端部署策略
- FB-22-SC-P-019 Serverless 与边缘部署如何落地前端 SSR/SSG？
- FB-22-SC-P-020 大规模前端缓存失效策略有哪些？
系统架构设计（8 道）
- FB-25-SC-P-002 设计一个 SDUI（Server-Driven UI）系统
- FB-25-SC-P-005 设计一个插件化的前端应用，支持第三方扩展
- FB-25-SC-P-009 设计一个支持百万级数据的表格前端架构
- FB-25-SC-P-010 设计一个前端国际化架构
- FB-25-SC-P-011 设计一个前端权限架构（RBAC/ABAC）
- FB-25-SC-P-012 前端如何应对高并发秒杀活动的流量峰值
- FB-25-SC-P-013 微服务架构下前端的数据一致性策略
- FB-25-SC-P-014 设计一个支持离线使用的复杂表单系统
微前端（3 道）
性能工程（3 道）
质量保障（9 道）
- FB-28-SC-P-021 灰度发布中如何保障前端质量？
- FB-28-SC-P-022 蓝绿部署与金丝雀部署有什么区别？前端如何选择？
- FB-28-SC-P-023 故障演练与混沌工程在前端如何落地？
- FB-28-SC-P-024 线上出现 Bug 后，除了修复，你还应该做什么？
- FB-28-SC-P-025 前端 E2E 测试不稳定如何治理
- FB-28-SC-P-026 前端如何做视觉回归测试
- FB-28-SC-P-027 如何治理前端技术债
- FB-28-SC-P-028 如何设计前端错误监控的质量闭环
- FB-28-SC-P-029 如何建立前端 bug 预防机制
数据与状态管理（5 道）
- FB-29-SC-P-001 Redux Toolkit、Zustand、Jotai、Recoil 的适用场景分别是什么？
- FB-29-SC-P-002 如何处理前端表单复杂状态
- FB-29-SC-P-003 如何设计前端权限状态与路由联动
- FB-29-SC-P-004 前端如何处理多标签页状态同步
- FB-29-SC-P-005 前端如何处理服务端推送状态
可观测性（4 道）
- FB-30-SC-P-020 告警策略如何设计？如何解决告警风暴与降噪？
- FB-30-SC-P-022 如何在微前端/跨端场景下统一可观测性？
- FB-30-SC-P-023 如何设计前端告警策略
- FB-30-SC-P-024 如何设计监控采样策略
实时与协同（3 道）
国际化（4 道）
- FB-33-SC-P-001 如何处理 ICU 复数与插值
- FB-33-SC-P-002 如何设计组件库的多语言支持
- FB-33-SC-P-003 国际化项目的测试策略
- FB-33-SC-P-004 如何处理多语言下的 SEO 与预渲染
可视化与图形（3 道）
Serverless/Edge（4 道）
- FB-35-SC-P-001 设计一个基于边缘的 SSR 渲染方案
- FB-35-SC-P-002 Serverless 下如何管理环境变量和密钥
- FB-35-SC-P-003 Serverless 函数的测试策略
- FB-35-SC-P-004 Serverless 下的数据库连接管理
前端数据工程（6 道）
- FB-36-SC-P-001 前端如何做数据清洗与校验
- FB-36-SC-P-002 前端如何处理大数据表格
- FB-36-SC-P-003 前端如何做数据导出与下载
- FB-36-SC-P-004 前端如何支持多维分析（OLAP）
- FB-36-SC-P-005 如何设计数据权限在前端的体现
- FB-36-SC-P-006 前端数据异常如何自动发现
业务洞察（8 道）
- FB-37-SC-P-002 设计一个支持 A/B 实验的前端实验平台，需要哪些核心模块？
- FB-37-SC-P-005 如何构建面向业务指标的实时数据看板？前端在数据采集与展示上的关键设计是什么？
- FB-37-SC-P-006 作为前端负责人，你如何决定一个创新项目是“加大投入”还是“及时止损”？
- FB-37-SC-P-007 如何为一个内容平台设计创作者经济体系的前端支撑？
- FB-37-SC-P-008 如何利用前端数据帮助业务方识别高价值用户并优化运营策略？
- FB-37-SC-P-009 面对流量红利见顶，前端如何帮助业务实现“存量深耕”？
- FB-37-SC-P-010 如果业务方要求你同时支撑多个战略方向，但资源有限，你如何决策？
- FB-37-SC-P-011 如何设计一个面向销售团队的前端工具，提升成单效率？
团队领导力（6 道）
- FB-38-SC-P-001 设计一套可量化的前端团队绩效评估体系
- FB-38-SC-P-003 如何搭建人才梯队与继任计划，降低关键岗位单点风险？
- FB-38-SC-P-004 在裁员或低绩效淘汰场景下，如何合法合规并维护团队信任？
- FB-38-SC-P-007 团队内部出现“小团体”现象，影响协作，你怎么处理？
- FB-38-SC-P-008 如何在团队中推广“Ownership”文化？
- FB-38-SC-P-009 你如何管理一位比你资历更深、技术更强的下属？
技术战略（4 道）
- FB-39-SC-P-002 如何评估一个新技术是否值得引入生产环境？
- FB-39-SC-P-006 如何制定企业的开源战略并规避法律与供应链风险？
- FB-39-SC-P-007 当核心技术人员离职或关键供应商停止维护时，如何保障技术连续性？
- FB-39-SC-P-008 如何设计一个既有技术前瞻性又能落地的年度技术规划？
沟通表达（5 道）
- FB-40-SC-P-001 如何准备一场高质量的技术宣讲/分享？
- FB-40-SC-P-002 跨文化团队出现沟通误解，你如何排查与修复？
- FB-40-SC-P-003 如何在资源有限时说服管理层投入技术基建？
- FB-40-SC-P-004 线上事故后，如何组织复盘并撰写事故报告？
- FB-40-SC-P-006 团队内部出现“谁来做这个脏活”的推诿，你如何推动解决？
项目管理（6 道）
- FB-41-SC-P-003 多项目并行时，如何识别资源冲突并制定优先级策略？
- FB-41-SC-P-005 前端项目如何制定并管理项目预算与 ROI？
- FB-41-SC-P-006 如何管理一个跨团队、跨地域的大型前端项目？
- FB-41-SC-P-007 项目范围不断蔓延（Scope Creep），你如何应对？
- FB-41-SC-P-008 如何在敏捷开发中做好版本规划和发布管理？
- FB-41-SC-P-009 项目资源不足时，你如何调整项目计划？
招聘（2 道）
技术品牌与布道（3 道）
- FB-43-SC-P-002 开源项目从“没人用”到“有人用、有人贡献”的冷启动策略有哪些？
- FB-43-SC-P-004 如何打造一支“技术明星团队”，既出业务结果又出行业影响力？
- FB-43-SC-P-005 技术布道的内容如何从“自嗨”变成“对用户/开发者真正有价值”？
技术治理与合规（9 道）
- FB-44-SC-P-001 如何建立前端开源合规治理体系？
- FB-44-SC-P-002 如何设计和实施前端 IT 内控？
- FB-44-SC-P-003 如何处理历史遗留系统的数据治理与隐私合规？
- FB-44-SC-P-004 如何设计前端审计与风控日志体系？
- FB-44-SC-P-005 如何设计前端的技术债治理机制？
- FB-44-SC-P-006 如何建立前端性能的持续治理机制？
- FB-44-SC-P-007 前端如何实现可访问性（Accessibility）治理？
- FB-44-SC-P-008 如何建立前端的数据埋点治理机制？
- FB-44-SC-P-009 如何设计前端架构评审流程？
小程序（5 道）
- FB-45-SC-P-007 小程序全局状态管理有哪些方案？如何选择？
- FB-45-SC-P-008 微信小程序如何实现一个复杂的表单页面？
- FB-45-SC-P-009 微信小程序如何做状态管理？
- FB-45-SC-P-010 微信小程序如何实现支付功能？
- FB-45-SC-P-011 微信小程序如何做版本更新处理？
Flutter（1 道）
Electron（5 道）
- FB-48-SC-P-007 Electron 跨平台兼容性如何处理？
- FB-48-SC-P-008 Electron 应用的性能优化有哪些方向？
- FB-48-SC-P-009 Electron 应用如何做进程间状态共享？
- FB-48-SC-P-010 Electron 如何集成 WebRTC 或音视频能力？
- FB-48-SC-P-011 Electron 应用如何做国际化（i18n）？
多媒体（Multimedia）（2 道）
低代码（3 道）
行业特化（2 道）
架构题（86 道）
JavaScript（1 道）
TypeScript（1 道）
Browser（1 道）
Web 安全（2 道）
HTML/CSS（1 道）
数据结构与算法（5 道）
- FB-08-SC-R-001 设计一个前端 LRU 缓存。
- FB-08-SC-R-002 设计一个前端请求去重/合并系统。
- FB-08-SC-R-003 设计一个前端任务调度器。
- FB-08-SC-R-004 设计一个虚拟列表的算法方案。
- FB-08-SC-R-005 设计一个 Undo/Redo 系统。
设计模式（3 道）
- FB-09-SC-R-001 在设计大型前端组件库时，你会如何运用设计模式？
- FB-09-SC-R-002 如何将一个继承过深的组件体系重构为组合式架构？
- FB-09-SC-R-003 如何在大型前端项目中选择与应用设计模式？
构建工具（5 道）
- FB-10-SC-R-001 设计一个支持多环境、多团队的前端构建平台。
- FB-10-SC-R-002 设计一个支持 A/B 测试的前端构建与发布方案
- FB-10-SC-R-003 设计一个前端依赖治理与构建安全审计流程
- FB-10-SC-R-010 多仓库/多团队统一构建规范与治理机制如何设计？
- FB-10-SC-R-011 如何设计支持微前端的构建方案？
Monorepo（1 道）
CI/CD（1 道）
代码质量与测试（1 道）
设计系统与组件库（6 道）
- FB-14-SC-R-001 从 0 到 1 建设组件库，如何进行技术选型？
- FB-14-SC-R-002 如何从业务组件沉淀到通用组件库？
- FB-14-SC-R-003 如何平衡组件库的一致性与业务灵活性？
- FB-14-SC-R-004 组件库团队如何与产品、设计、业务团队协作？
- FB-14-SC-R-005 如何从设计系统沉淀业务设计语言？
- FB-14-SC-R-006 如何评估组件库的商业价值？
AI 工程化（4 道）
- FB-18-SC-R-029 如何设计一个 Agent 系统？对比 ReAct 和 Plan-and-Execute
- FB-18-SC-R-030 如何设计一个面向复杂表单的 AI 自动填充 Agent？
- FB-18-SC-R-031 如何设计一个支持多人协作的 AI 白板系统？
- FB-18-SC-R-061 设计一个跨端 AI Agent 系统
开发者体验与工程效能（1 道）
部署与 SRE（2 道）
- FB-22-SC-R-001 在 Kubernetes 容器化场景下，如何为前端服务设计 Error Budget 与发布节奏？
- FB-22-SC-R-002 Kubernetes 前端 Error Budget 与发布节奏
包管理与供应链安全（4 道）
- FB-23-SC-R-026 从 0 开始设计一个 Monorepo 包管理方案
- FB-23-SC-R-029 设计一个依赖漏洞应急响应流程
- FB-23-SC-R-030 如何设计前端构建产物供应链安全方案？
- FB-23-SC-R-031 如何设计前端构建产物供应链安全方案？
系统架构设计（3 道）
- FB-25-SC-R-003 设计一个大型电商活动搭建平台的前端架构
- FB-25-SC-R-011 设计一个跨团队协作的组件共建与治理体系
- FB-25-SC-R-012 如果你发现一个项目的架构严重影响了业务发展，但重写成本极高，你会怎么做？
微前端（2 道）
性能工程（1 道）
质量保障（3 道）
数据与状态管理（3 道）
- FB-29-SC-R-027 设计一个高并发的购物车状态管理方案
- FB-29-SC-R-028 如何设计多端状态同步方案（Web、小程序、App）？
- FB-29-SC-R-029 设计一个前端实时协作的状态系统
可观测性（2 道）
Serverless/Edge（1 道）
前端数据工程（1 道）
团队领导力（3 道）
- FB-38-SC-R-003 业务扩张期，如何通过团队结构升级支撑多产品线并行？
- FB-38-SC-R-007 两个子团队各自为政、重复造轮子，如何打破壁垒建立共享平台？
- FB-38-SC-R-008 作为技术 VP / 前端负责人，你如何规划前端团队未来 1-3 年的技术战略？
技术战略（2 道）
项目管理（1 道）
技术品牌与布道（1 道）
技术治理与合规（1 道）
小程序（2 道）
Flutter（5 道）
- FB-47-SC-R-004 Flutter Web 和桌面端（Windows/macOS/Linux）支持有哪些关键考虑？
- FB-47-SC-R-005 Flutter 大型项目如何组织代码架构？
- FB-47-SC-R-006 Flutter 跨平台开发中如何处理平台差异？
- FB-47-SC-R-007 Flutter 项目中如何做状态管理选型？
- FB-47-SC-R-008 Flutter 应用的测试策略如何设计？
Electron（1 道）
WebAssembly（7 道）
- FB-49-SC-R-001 如何设计一个前端图像处理系统，引入 WebAssembly 进行计算加速？
- FB-49-SC-R-002 设计一个浏览器端视频编解码方案，WebAssembly 扮演什么角色？
- FB-49-SC-R-003 如何在大型前端项目中组织 WASM 模块的构建、加载与版本管理？
- FB-49-SC-R-004 WebAssembly 在游戏引擎/WebGL 渲染管线中如何落地？
- FB-49-SC-R-005 AI/ML 模型前端推理方案中，WASM 与 WebGPU/WebGL 如何协作？
- FB-49-SC-R-006 设计一个基于 WebAssembly 的浏览器端图片编辑器架构。
- FB-49-SC-R-007 WebAssembly 未来可能如何改变前端开发？
WebGPU / 图形学（4 道）
- FB-50-SC-R-025 如何优化一个包含百万级对象的大型 3D 场景？
- FB-50-SC-R-030 如何为一个跨平台 3D 可视化产品选择 WebGPU 与 Native 图形方案？
- FB-50-SC-R-031 设计一个基于 WebGPU 的浏览器端 3D 数据可视化引擎。
- FB-50-SC-R-032 WebGPU 的未来发展趋势是什么？