1. LLM 基础概念面试必问概念一句话必背TokenLLM 的最小文本单位计费和上下文窗口都按 token 计上下文窗口context模型一次能看到的最大 token 数超出需截断/压缩/摘要Temperature采样随机性参数越高越有创造性越低越确定幻觉Hallucination模型编造事实前端要做来源引用与兜底提示System Prompt设定角色与行为约束的系统级提示词2. 流式输出前端核心实战必背SSEServer-Sent Events是主流方案基于 HTTP单向服务端推送Content-Type: text/event-stream浏览器端用fetchReadableStream手动解析比EventSource更灵活可带 header、可 POST必背如何用reader.read()循环解析data:行、处理[DONE]、分包/粘包问题buffer chunk再按\n\n切分对比SSE vs WebSocketSSE 单向轻量、WS 双向、打字机效果的增量渲染实战坑中断生成AbortController、React 中 setState 频繁更新导致卡顿用 ref 缓冲 requestAnimationFrame 批量刷3. Function Calling / Tool Use必考流程必背用户提问 → 模型决定调用工具返回结构化 JSON 参数→ 前端/后端执行工具 → 结果回传模型 → 生成最终回答前端职责渲染工具调用卡片如正在查询订单…的过程可视化、多轮工具调用的状态机管理4. Agent 核心架构ReAct 模式Reason推理 Act行动循环Agent LLM 记忆 工具 规划多轮对话管理消息历史裁剪策略、滑动窗口、摘要压缩记忆机制短期记忆对话历史vs 长期记忆向量库常见前端场景聊天 UI 的消息状态生成中/失败/重试/停止、思考过程的折叠展示5. RAG检索增强生成流程必背文档切分Chunking→ Embedding 向量化 → 存向量库 → 检索 Top-K → 拼进 Prompt → 生成前端相关引用来源展示、上传文档的进度与状态管理6. MCPModel Context Protocol2024~2025 的高频新考点Anthropic 推出的模型-工具连接标准协议架构Host如 IDE/客户端→ Client → ServerServer 暴露 tools/resources/prompts一句话背MCP 是AI 应用的 USB-C 接口统一了工具接入标准替代各家私有的 Function Calling 插件协议7. Prompt Engineering前端也要会结构化提示词角色 背景 任务 约束 输出格式少样本 Few-shot让模型输出 JSON 的技巧与解析容错markdown 代码块包裹问题四、Agent 前端特有的场景设计题面试压轴设计一个 ChatGPT 式对话页面——考察流式渲染、虚拟列表、消息状态机、Markdown/代码高亮渲染注意 XSS用DOMPurify消毒、中断与重试长对话性能优化——消息列表越来越长怎么办虚拟滚动、避免全量 diff、分页加载历史网络不稳定下 SSE 断连——断线重连、Last-Event-ID续传、降级为轮询工具调用过程的 UI 交互设计——多步 Agent 执行时的进度可视化、失败重试粒度安全性——模型输出渲染 XSS、Prompt 注入在前端的防御边界说明注入主要靠服务端防御前端要做输出消毒五、手写代码 Top 8背熟防抖 节流Promise 并发限制器用 fetch ReadableStream 实现 SSE 流式解析⭐ 本岗位最核心手写题深拷贝处理循环引用数组扁平化 / 去重虚拟列表核心逻辑发布订阅模式EventEmitterAbortController取消请求封装SSE 流式解析参考实现必背骨架async function streamChat(url, body, onChunk, signal) { const res await fetch(url, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify(body), signal, }); const reader res.body.getReader(); const decoder new TextDecoder(); let buffer ; while (true) { const { done, value } await reader.read(); if (done) break; buffer decoder.decode(value, { stream: true }); const parts buffer.split(\n\n); buffer parts.pop(); // 处理分包最后一段可能不完整 for (const part of parts) { const line part.trim(); if (!line.startsWith(data:)) continue; const data line.slice(5).trim(); if (data [DONE]) return; onChunk(JSON.parse(data)); } } }六、复习优先级建议优先级内容理由P0JS 基础 框架原理 手写题任何前端岗位的门槛P0SSE 流式输出 对话页设计本岗位核心场景P1Function Calling / ReAct / MCPAgent 岗位差异化考点P1性能优化虚拟列表、首屏常见追问P2RAG、Prompt 工程、多 Agent 架构加分项能聊出深度即可P2微前端、SSR视 JD 而定 Agent前端面试基础
1. LLM 基础概念面试必问概念一句话必背TokenLLM 的最小文本单位计费和上下文窗口都按 token 计上下文窗口context模型一次能看到的最大 token 数超出需截断/压缩/摘要Temperature采样随机性参数越高越有创造性越低越确定幻觉Hallucination模型编造事实前端要做来源引用与兜底提示System Prompt设定角色与行为约束的系统级提示词2. 流式输出前端核心实战必背SSEServer-Sent Events是主流方案基于 HTTP单向服务端推送Content-Type: text/event-stream浏览器端用fetchReadableStream手动解析比EventSource更灵活可带 header、可 POST必背如何用reader.read()循环解析data:行、处理[DONE]、分包/粘包问题buffer chunk再按\n\n切分对比SSE vs WebSocketSSE 单向轻量、WS 双向、打字机效果的增量渲染实战坑中断生成AbortController、React 中 setState 频繁更新导致卡顿用 ref 缓冲 requestAnimationFrame 批量刷3. Function Calling / Tool Use必考流程必背用户提问 → 模型决定调用工具返回结构化 JSON 参数→ 前端/后端执行工具 → 结果回传模型 → 生成最终回答前端职责渲染工具调用卡片如正在查询订单…的过程可视化、多轮工具调用的状态机管理4. Agent 核心架构ReAct 模式Reason推理 Act行动循环Agent LLM 记忆 工具 规划多轮对话管理消息历史裁剪策略、滑动窗口、摘要压缩记忆机制短期记忆对话历史vs 长期记忆向量库常见前端场景聊天 UI 的消息状态生成中/失败/重试/停止、思考过程的折叠展示5. RAG检索增强生成流程必背文档切分Chunking→ Embedding 向量化 → 存向量库 → 检索 Top-K → 拼进 Prompt → 生成前端相关引用来源展示、上传文档的进度与状态管理6. MCPModel Context Protocol2024~2025 的高频新考点Anthropic 推出的模型-工具连接标准协议架构Host如 IDE/客户端→ Client → ServerServer 暴露 tools/resources/prompts一句话背MCP 是AI 应用的 USB-C 接口统一了工具接入标准替代各家私有的 Function Calling 插件协议7. Prompt Engineering前端也要会结构化提示词角色 背景 任务 约束 输出格式少样本 Few-shot让模型输出 JSON 的技巧与解析容错markdown 代码块包裹问题四、Agent 前端特有的场景设计题面试压轴设计一个 ChatGPT 式对话页面——考察流式渲染、虚拟列表、消息状态机、Markdown/代码高亮渲染注意 XSS用DOMPurify消毒、中断与重试长对话性能优化——消息列表越来越长怎么办虚拟滚动、避免全量 diff、分页加载历史网络不稳定下 SSE 断连——断线重连、Last-Event-ID续传、降级为轮询工具调用过程的 UI 交互设计——多步 Agent 执行时的进度可视化、失败重试粒度安全性——模型输出渲染 XSS、Prompt 注入在前端的防御边界说明注入主要靠服务端防御前端要做输出消毒五、手写代码 Top 8背熟防抖 节流Promise 并发限制器用 fetch ReadableStream 实现 SSE 流式解析⭐ 本岗位最核心手写题深拷贝处理循环引用数组扁平化 / 去重虚拟列表核心逻辑发布订阅模式EventEmitterAbortController取消请求封装SSE 流式解析参考实现必背骨架async function streamChat(url, body, onChunk, signal) { const res await fetch(url, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify(body), signal, }); const reader res.body.getReader(); const decoder new TextDecoder(); let buffer ; while (true) { const { done, value } await reader.read(); if (done) break; buffer decoder.decode(value, { stream: true }); const parts buffer.split(\n\n); buffer parts.pop(); // 处理分包最后一段可能不完整 for (const part of parts) { const line part.trim(); if (!line.startsWith(data:)) continue; const data line.slice(5).trim(); if (data [DONE]) return; onChunk(JSON.parse(data)); } } }六、复习优先级建议优先级内容理由P0JS 基础 框架原理 手写题任何前端岗位的门槛P0SSE 流式输出 对话页设计本岗位核心场景P1Function Calling / ReAct / MCPAgent 岗位差异化考点P1性能优化虚拟列表、首屏常见追问P2RAG、Prompt 工程、多 Agent 架构加分项能聊出深度即可P2微前端、SSR视 JD 而定