第48期 | 面试准备系统设计与项目深挖——二面通关指南 今天你将学会项目讲解的 STAR 技术深度框架前端系统设计题的答题方法论AI前端方向的系统设计加分项用 AI 模拟系统设计面试 核心知识技术二面和一面不同——一面考你知道什么二面考你能做多深。面试官会就你的项目追问到底层实现或者给你一个系统设计题看你怎么拆解。今天讲两件事项目深挖怎么把你的 3 个项目讲出深度系统设计前端系统设计题怎么答一、项目讲解框架1.1 项目讲解结构面试官说介绍一下你的 TechAssist 项目你要在 3-5 分钟内讲清楚1. 背景30秒为什么做这个项目 2. 架构1分钟整体技术方案 3. 难点2分钟你遇到的最大技术挑战 怎么解决 4. 成果30秒量化结果 5. 反思30秒如果重做会怎么改进1.2 TechAssist 项目讲解示例背景TechAssist 是我做的一个 AI 知识库助手。当时在学习 RAG 技术发现市面上的教程都偏后端前端实现缺乏参考就自己做了一个完整的前端方案。架构技术栈是 React 18 TypeScript Vite后端用 Vercel Serverless Functions数据库用 SupabasePostgreSQL pgvector。整体架构是前端 → API Route后端代理→ OpenAI API。API Key 存在服务端环境变量前端只与同域 API 通信避免 Key 泄露。RAG 流程是用户上传文档 → 后端分片 → OpenAI Embedding → 存入 pgvector。用户提问时问题 → Embedding → 向量搜索 → Top K 相关片段 用户问题一起发给 GPT → 流式返回答案。难点1流式 Markdown 渲染最大的技术难点是流式 Markdown 渲染。AI 返回的内容是分块的可能一个代码块还没闭合就来了下一块直接用 markdown 库渲染会显示错误。我的方案是维护一个 buffer每次收到 chunk 就追加然后用 react-markdown 重新渲染。但这样性能很差——每次更新都重新解析整个 Markdown。优化方案把 Markdown 按块级元素分割段落、代码块、列表只重新渲染最后一个未完成的块。代码块用单独的 CodeBlock 组件支持流式追加和高亮。最终效果流式打字效果流畅长文档渲染不卡顿。难点2长列表性能另一个难点是消息列表性能。对话历史可能有上千条消息直接渲染会导致 DOM 节点过多、页面卡顿。我用 react-window 做了虚拟列表——只渲染可视区域的 ~7 条消息滚动时动态替换。但虚拟列表和流式追加有冲突——新消息到来时要自动滚动到底部。解决方案监听消息数量变化当用户在底部时自动滚动用户手动上滑时不自动滚动避免打断阅读。成果最终 Lighthouse 性能评分 95支持 10000 条消息流畅滚动部署在 Vercel 上。回答准确率通过 50 个测试问题评估达到 85%。反思如果重做我会考虑两个改进一是用 IndexedDB 做本地缓存避免重复 Embedding 调用二是引入 Web Worker 处理 Markdown 解析进一步减少主线程阻塞。1.3 面试官追问预判面试官听完你的讲解会追问。提前准备好这些问题的答案追问回答方向为什么选 pgvector 不选 Pinecone自建 vs 托管的 trade-offSupabase 一站式分片策略是什么chunk size 怎么定按段落分 overlapchunk 500-1000 token如果文档量很大10万怎么办分库分表、缓存 Embedding、近似搜索向量搜索的相似度算法余弦相似度 vs 欧氏距离怎么处理用户上传恶意文件文件类型校验、大小限制、内容扫描流式响应中断了怎么办断点续传、状态恢复、重试机制为什么不用 Next.jsSPA 够用 Vite 开发体验好 部署简单核心原则每个技术决策都要能说出 “为什么选 A 而不选 B”——这体现的是你的技术判断力。二、FlowAI 项目讲解背景 我做了一个 AI 工作流编排工具 FlowAI类似 n8n 或 Dify。做这个项目 是因为在工作中发现 AI 应用开发经常需要串联多个步骤先检索 → 再 生成 → 再格式化手动写代码太低效需要一个可视化工具。 架构 用 React Flow 构建可视化编辑器Zustand 管理状态。 工作流数据模型是 DAG有向无环图节点边配置参数。 难点1执行引擎设计 最大难点是工作流执行引擎。需要一个算法确定节点执行顺序还要处理 条件分支——条件节点的不同结果走不同的后续路径。 我用 Kahn 算法做拓扑排序确定执行顺序。执行时维护一个 executedPaths 集合条件节点返回分支 ID只有匹配的下游边才会执行。 不匹配的节点标记为 skipped。 难点2撤销/重做系统 画布操作需要撤销/重做。我用双栈结构——past 栈存历史快照future 栈存 redo。每次操作前 push 当前快照到 pastundo 时把当前推入 future 并恢复 past 顶部。 难点3状态管理 React Flow 自带的 useNodesState 和配置面板的数据同步是个问题。 我把所有状态统一到 Zustand store配置面板修改 store画布订阅 store 更新。这样数据流是单向的不会有同步问题。 成果 支持 4 种节点类型、条件分支、执行可视化、撤销/重做、键盘快捷键。 部署在 Vercel 上。 反思 如果重做会考虑1支持节点分组和子工作流2执行引擎支持 并行3节点市场让用户分享自定义节点。三、系统设计题前端系统设计题通常是这样问的“设计一个 XX 功能你怎么做”3.1 答题方法论Step 1: 理解需求2分钟 - 功能需求做什么 - 非功能需求性能、并发、兼容性 - 确认范围不做什么 Step 2: 整体架构2分钟 - 画架构图组件 数据流 - 技术选型及理由 Step 3: 核心模块设计5分钟 - 逐个模块讲实现方案 - 数据结构设计 - API 设计 Step 4: 深入难点3分钟 - 性能优化 - 边界情况 - 扩展性 Step 5: 总结1分钟 - 方案优缺点 - 如果有更多时间会怎么改进3.2 示例题设计一个 AI 聊天界面Step 1: 理解需求确认一下需求功能用户输入消息AI 流式返回回答需要支持多轮对话、Markdown 渲染、代码高亮非功能首字延迟 1s长时间对话不卡顿不需要多用户实时聊天、文件上传可以先不做Step 2: 整体架构┌──────────┐ ┌──────────────┐ ┌──────────┐ │ React │ SSE │ API Route │ │ OpenAI │ │ 前端 │←────│ (后端代理) │←───→│ API │ │ │ │ │ │ │ │ - ChatUI │ │ - 限流 │ │ GPT-4o │ │ - Store │ │ - Key 保护 │ │ │ │ - Render │ │ - 请求转发 │ │ │ └──────────┘ └──────────────┘ └──────────┘前端用 React Zustand 管理对话状态。后端用 Vercel API Route 做代理保护 API Key。前后端用 SSEServer-Sent Events做流式通信。Step 3: 核心模块模块1ChatStore状态管理interfaceChatStore{conversations:Conversation[]// 所有对话currentConversationId:stringisStreaming:boolean// 操作sendMessage:(content:string)PromisevoidstopStreaming:()voidcreateConversation:()voiddeleteConversation:(id:string)void}interfaceConversation{id:stringtitle:stringmessages:Message[]createdAt:string}interfaceMessage{id:stringrole:user|assistantcontent:stringstatus:sending|streaming|complete|error}设计要点消息有 status 字段UI 根据 status 显示不同状态loading 动画、流式打字、错误重试stopStreaming 用 AbortController 实现用户可以中断生成模块2流式通信asyncfunctionstreamMessage(messages:Message[],onChunk:(text:string)void,signal:AbortSignal){constresponseawaitfetch(/api/chat,{method:POST,body:JSON.stringify({messages}),signal,})constreaderresponse.body!.getReader()constdecodernewTextDecoder()while(true){const{done,value}awaitreader.read()if(done)breakconsttextdecoder.decode(value,{stream:true})// 解析 SSE 格式constlinestext.split(\n)for(constlineoflines){if(line.startsWith(data: )line!data: [DONE]){const{content}JSON.parse(line.slice(6))onChunk(content)}}}}模块3Markdown 渲染流式 Markdown 渲染的难点是内容是不完整的可能代码块没闭合、表格没画完。方案维护一个 buffer每次 chunk 追加后重新渲染。优化按块级元素分割只重渲染最后一个未完成块。代码高亮用 highlight.js在代码块完整后延迟高亮避免流式过程中频繁高亮。模块4自动滚动functionuseAutoScroll(messages:Message[]){constcontainerRefuseRefHTMLDivElement(null)const[isAtBottom,setIsAtBottom]useState(true)// 监听滚动位置useEffect((){constcontainercontainerRef.currentif(!container)returnconsthandleScroll(){const{scrollTop,scrollHeight,clientHeight}containersetIsAtBottom(scrollHeight-scrollTop-clientHeight50)}container.addEventListener(scroll,handleScroll)return()container.removeEventListener(scroll,handleScroll)},[])// 自动滚动useEffect((){if(isAtBottomcontainerRef.current){containerRef.current.scrollTopcontainerRef.current.scrollHeight}},[messages,isAtBottom])return{containerRef,isAtBottom}}设计要点用户上滑时不自动滚动避免打断阅读在底部时才跟随新内容滚动。Step 4: 深入难点性能优化长对话用 react-window 虚拟列表Markdown 解析放 Web Worker防抖滚动事件边界情况网络断开显示重连提示保留已生成内容API 限流指数退避重试超长输入前端截断 提示扩展性支持多模型切换在 store 加 model 字段支持插件系统消息渲染用策略模式Step 5: 总结这个方案的优点是架构清晰、流式体验好、可扩展。缺点是没有做消息持久化刷新丢失如果要加可以用 IndexedDB。另外 Markdown 渲染性能在超长内容时仍有优化空间。四、常见系统设计题题目核心考点设计一个前端组件库组件设计、样式方案、文档、按需加载设计一个富文本编辑器contenteditable、状态管理、选区操作设计一个实时协作编辑器OT/CRDT、WebSocket、冲突解决设计一个前端监控系统错误采集、性能埋点、数据上报、可视化设计一个无限滚动列表虚拟列表、分页、IntersectionObserver设计一个 AI 聊天界面流式通信、Markdown 渲染、状态管理设计一个拖拽看板Trello拖拽 API、状态同步、动画五、AI 方向加分项如果你面试的是 AI 相关岗位以下知识点是加分项5.1 AI 架构理解面试官可能问前端在 AI 应用中扮演什么角色 回答框架 1. 交互层把 AI 能力以用户友好的方式呈现 - 流式打字效果让等待不那么焦虑 - 思考过程可视化让 AI 更透明 - 工具调用展示让 Agent 行为可理解 2. 体验层处理 AI 的不确定性 - 加载状态管理AI 响应慢 - 错误处理和重试AI 可能出错 - 内容审核AI 可能生成不当内容 3. 性能层优化 AI 应用的性能 - 流式渲染减少首字延迟 - 虚拟列表处理长对话 - Web Worker 处理重计算 4. 安全层AI 应用的特殊安全 - API Key 保护 - Prompt 注入防御 - 用户数据隐私5.2 RAG 系统设计面试官可能问如果让你设计一个企业知识库系统前端怎么做 加分回答 1. 知识库管理界面 - 文档上传拖拽 进度 - 分片预览和编辑 - 向量索引状态监控 2. 检索测试界面 - 输入问题 → 显示检索到的 Top K 片段 - 相似度分数可视化 - 支持调整 topK 和相似度阈值 3. 对话界面 - 答案下方显示引用来源 - 点击引用可跳转到原文位置 - 支持继续追问和换个答案 4. 管理后台 - Token 使用统计 - 模型切换 - 用户权限管理 AI协作实战场景AI 模拟系统设计面试Prompt你是一位资深前端架构师正在进行系统设计面试。 请按以下规则进行 1. 给出一个系统设计题目 2. 我先用 5 分钟分析需求和整体架构 3. 你追问细节至少 3 个追问 4. 我回答追问 5. 你给出评分和改进建议 考察维度 - 需求分析能力 - 架构设计能力 - 技术选型合理性 - 性能和扩展性考虑 - 边界情况处理 我的背景AI 前端方向有 RAG 应用和工作流编辑器开发经验。 请出题。模拟示例AI 面试官请设计一个「AI 代码审查助手」的前端界面。 功能用户提交 PR 后AI 自动审查代码并给出建议。 我先确认需求... - 是实时审查还是异步通知 - 需要在界面内嵌代码 diff 吗 - 多人协作场景需要吗 AI 面试官好问题。假设 - 异步审查PR 创建后触发 - 需要展示代码 diff 和 AI 评论 - 暂不考虑多人协作 我整体架构... 前端用 React TypeScript。 核心组件 1. PR 列表页 - 展示所有 PR 和审查状态 2. PR 详情页 - 左侧代码 diff右侧 AI 审查结果 3. 审查进度 - 实时显示 AI 分析进度 技术选型 - 代码 diff 用 react-diff-viewer - AI 评论用类似 GitHub PR review 的 UI - 进度用 WebSocket 或轮询 AI 面试官追问1代码 diff 很大时1000 行怎么保证性能 我虚拟化 diff 渲染。只渲染可视区域的 diff hunk。 另外按文件分组折叠默认只展开有 AI 评论的文件。 AI 面试官追问2AI 审查结果可能很多用户怎么快速找到重要问题 我按严重程度分类Error/Warning/Suggestion。 顶部显示统计摘要3 errors, 5 warnings, 12 suggestions。 支持按严重程度过滤。点击评论跳转到对应代码行。 AI 面试官追问3如果 AI 审查需要 30 秒用户体验怎么优化 我 1. 分步展示文件解析 → 代码分析 → 生成建议每步有进度 2. 先展示快速检查结果ESLint 规则再等 AI 深度分析 3. 完成后推送通知用户可以切走做别的 AI 面试官评分 8/10。 优点需求分析清晰、架构合理、用户体验考虑周到。 不足没有提到离线支持用户可能想在地铁上看审查结果、 没有考虑移动端适配。 建议系统设计要先考虑用户在什么场景下使用。学到了什么系统设计面试先问需求再画架构——不要一上来就开始写代码面试官的追问是重点——每个追问都指向一个你没考虑到的维度AI 模拟面试时让 AI 追问至少 3 次——这样才能暴露你的知识盲区系统设计没有标准答案但要有结构化思维——需求 → 架构 → 模块 → 难点 → 总结 动手练习练习1项目讲解练习简单对着镜子或录音用 3-5 分钟讲一遍 TechAssist 项目检查背景/架构/难点/成果/反思 是否都讲到了让 AI 听你的讲解并追问 3 个问题练习2系统设计练习中等选一道系统设计题如设计一个 AI 聊天界面用 5 步法写出完整方案让 AI 模拟面试官追问根据追问补充你的方案练习3全真模拟面试挑战用 AI 模拟一次完整的 45 分钟二面包含项目讲解 15 分钟 系统设计 20 分钟 反问环节 10 分钟记录 AI 的总评和改进建议连续做 3 次模拟对比进步 本期要点项目讲解 5 步法背景 → 架构 → 难点 → 成果 → 反思3-5 分钟讲完技术决策要说出 trade-off——为什么选 A 不选 B体现的是技术判断力系统设计 5 步法理解需求 → 整体架构 → 核心模块 → 深入难点 → 总结AI 方向加分项理解前端在 AI 应用中的 4 层角色交互/体验/性能/安全AI 模拟面试是最佳训练方式——追问暴露盲区评分量化进步 下期预告第49期求职策略与渠道。简历准备好了、面试也练了接下来怎么投递内推怎么找AI 时代前端岗位有什么趋势我们来制定你的求职策略。如果你没有苹果电脑需要上传ios到APPStore可以访问以下网站iPA上传工具 - IPA解析与AppStore提交