一、写在前面：前端 AI 面试在考什么
随着大模型能力下沉到业务侧，前端岗位的 AI 相关面试已经从"加分项"逐渐变成"必答题"。面试官通常不会要求你手推反向传播，但会重点考察三类能力：
- 原理理解：是否清楚 Token、上下文窗口、流式输出、Embedding 等基础概念，能否解释清楚一次请求从输入到渲染的完整链路。
- 工程落地：能否把大模型能力稳定地接入到 Web 应用中，处理好流式渲染、错误重试、超时、取消、成本控制等问题。
- 产品与体验：是否理解 AI 交互的特殊性，比如等待感、可中断性、幻觉兜底、内容安全与用户信任。
本文按"基础概念 → 流式交互 → 工程架构 → 场景设计 → 开放题"的顺序整理常见面试题，每题给出考察点和答题思路，方便你按图索骥地准备。
二、基础概念类问题
1. 什么是 Token？为什么前端也需要关心 Token
考察点：对模型输入输出计量单位的理解，以及成本与体验意识。
答题思路：Token 是模型处理文本的最小单位，不等同于字符，中英文的切分比例差异较大。前端关心 Token 主要因为三点：一是上下文窗口有限，超长历史必须裁剪或摘要；二是按 Token 计费，前端做历史拼接时直接影响成本；三是流式输出按 Token 增量返回，渲染策略要与之匹配。
2. 上下文窗口是什么？超出长度限制怎么处理
考察点：长对话场景下的上下文管理能力。
答题思路：上下文窗口是模型单次请求能容纳的最大 Token 数，包含系统提示词、历史消息和本次输入。常见处理方式包括：滑动窗口只保留最近 N 轮、对早期对话做摘要压缩、用向量检索召回相关片段（RAG）、把长文档切块后按需注入。回答时最好说明取舍：裁剪简单但会丢信息，摘要和检索更贵但效果更好。
3. Embedding 是什么？前端在什么场景会用到
考察点：对语义检索链路的认知。
答题思路：Embedding 是把文本映射成高维向量的过程，语义相近的文本向量距离更近。前端常见场景是知识库问答、语义搜索、相似推荐。前端一般不直接计算向量，但需要理解"切块 → 向量化 → 存储 → 检索 → 拼装提示词"的完整链路，才能和后端对齐接口设计和加载状态。
4. 大模型为什么会"幻觉"？前端能做什么
考察点：对模型局限性的认知与兜底设计。
答题思路：幻觉源于模型基于概率生成而非事实检索。前端可做的包括：展示引用来源并支持点击溯源、对关键结论加"请核实"提示、提供重新生成和反馈入口、在涉及金额和医疗等高风险场景做二次确认。核心是把"不可靠"显式暴露给用户，而不是假装确定。
三、流式交互与渲染
5. 如何实现打字机式的流式输出
考察点：SSE、Fetch 流式读取与增量渲染。
答题思路 ：服务端用 SSE 或分块传输返回增量文本，前端通过 fetch 拿到 response.body 的 ReadableStream，用 TextDecoder 解码后按行解析。渲染上要避免每个 Token 都触发一次完整重渲染，通常做批量合并或使用 requestAnimationFrame 节流。
javascript
async function streamChat(url, body, onDelta) {
const res = await fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body)
});
if (!res.ok || !res.body) throw new Error('stream failed');
const reader = res.body.getReader();
const decoder = new TextDecoder('utf-8');
let buffer = '';
while (true) {
const { done, value } = await reader.read();
if (done) break;
buffer += decoder.decode(value, { stream: true });
const lines = buffer.split('\n');
buffer = lines.pop() || '';
for (const line of lines) {
if (!line.startsWith('data:')) continue;
const data = line.slice(5).trim();
if (data === '[DONE]') return;
onDelta(JSON.parse(data).content);
}
}
}6. 流式输出时如何支持"停止生成"
考察点：请求取消与资源释放。
答题思路 ：使用 AbortController，把 signal 传给 fetch，用户点击停止时调用 abort()。要注意捕获 AbortError 并区分"用户主动取消"和"网络异常"，同时保留已生成的部分内容，避免界面清空造成体验断裂。
7. 流式渲染 Markdown 有哪些坑
考察点：增量解析与不完整语法处理。
答题思路：流式过程中 Markdown 常常是"半截"的，比如代码块只有开头没有结尾、表格只渲染了一半。常见做法是：对未闭合的代码块做临时闭合、延迟渲染表格直到结构完整、使用支持增量解析的 Markdown 渲染器，并对 HTML 做严格清洗防止 XSS。
8. 如何优化长回答的渲染性能
考察点：大文本渲染与虚拟化。
答题思路 ：把消息按段落或块拆分，只对新增块做增量更新；超长列表使用虚拟滚动；代码高亮做懒加载和防抖；避免在流式过程中频繁触发 scrollIntoView，改为判断用户是否在底部再自动跟随。
四、工程架构与稳定性
9. AI 请求的超时、重试与降级怎么设计
考察点：稳定性设计能力。
答题思路：设置合理的首字节超时和整体超时；对幂等请求做指数退避重试，并限制最大次数；流式中断时提供"继续生成"而非从头再来；模型服务不可用时降级到备用模型或提示稍后再试。要强调重试必须避免重复计费和重复写入。
10. 如何防止前端泄露 API Key
考察点：安全意识。
答题思路：模型调用必须经过自己的后端代理，前端只与业务服务通信；后端做鉴权、限流、审计和敏感词过滤；不要把密钥写进前端代码或环境变量注入到浏览器包中。可以补充说明代理层还能统一做提示词模板和成本统计。
11. 多轮对话的状态应该存在哪里
考察点：状态管理与数据一致性。
答题思路：短期会话状态放前端内存或状态库，用于即时渲染；持久化会话放服务端，保证换设备可恢复。要处理乐观更新与失败回滚，给每条消息一个本地临时 ID，服务端返回后替换为真实 ID，避免重复提交。
12. 如何做 AI 功能的埋点与效果评估
考察点：数据驱动意识。
答题思路：埋点覆盖请求耗时、首 Token 时间、生成完成率、中断率、重试率、用户点赞点踩和复制行为。首 Token 时间直接影响等待感，是体验核心指标；点踩率结合具体问题类型可以定位提示词或检索的薄弱环节。
五、场景设计题
13. 设计一个 AI 对话输入框
考察点：组件设计与交互细节。
答题思路 ：需要支持多行自适应高度、Enter 发送与 Shift+Enter 换行、输入法组合态判断（compositionstart/end）、发送中禁用与停止按钮切换、附件上传、字数与 Token 预估提示、草稿本地保存。可以补充快捷键、@ 引用知识库等增强能力。
14. 设计一个流式输出的代码助手面板
考察点：复杂场景的综合设计。
答题思路 ：从数据层（消息模型、流式状态机）、渲染层（增量 Markdown、代码高亮、diff 展示）、交互层（应用代码、复制、重新生成、停止）三个维度展开。重点说明状态机设计：idle → requesting → streaming → done / aborted / error，每个状态的 UI 表现和可执行操作要明确。
15. 如何设计 AI 生成内容的安全兜底
考察点：内容安全与合规意识。
答题思路：输入端做敏感词和长度校验，输出端做流式内容过滤，命中风险时中断并提示；渲染层对模型返回的 HTML 做白名单清洗，禁止脚本执行；对图片和外链做域名校验；保留审计日志便于追溯。
六、开放与进阶问题
16. 前端在 AI 应用中的价值边界在哪里
考察点：对岗位定位的思考。
答题思路：模型能力由后端和算法侧提供，前端负责把不确定性转化为可用的产品体验：等待感管理、可中断可重试、结果可解释可溯源、错误可恢复。好的回答会强调前端是"用户体验的最后一道防线"，而不是简单的接口调用方。
17. 如果让你从零搭建一个 AI 应用的前端架构，你会怎么分层
考察点：架构抽象能力。
答题思路：可分为接入层（统一请求封装、流式解析、取消与重试）、状态层（会话与消息状态机）、能力层（Markdown 渲染、代码高亮、文件解析）、组件层（输入框、消息列表、工具面板）和体验层（加载态、错误态、空态）。强调接口抽象要能适配不同模型供应商，避免业务代码与具体厂商耦合。
18. 你如何跟进 AI 前端领域的快速变化
考察点：学习能力与技术判断力。
答题思路：关注官方文档与规范更新、阅读开源项目源码、动手做小 Demo 验证新能力。回答时最好结合具体例子，说明你如何判断一项新技术是"值得投入"还是"短期噱头"，体现取舍能力而非盲目追新。
七、面试准备建议
- 准备一个完整项目：能讲清楚需求、架构、难点和取舍，比背概念更有说服力。
- 手写核心代码：流式解析、取消控制、状态机这几段代码要能现场写出来。
- 关注体验细节：首 Token 时间、中断恢复、错误提示，这些是区分普通和优秀的关键。
- 保持诚实：不熟悉的模型训练细节可以坦率说明边界，把话题引回自己擅长的工程侧。
AI 前端面试的本质，是考察你能否在"模型不确定"的前提下，依然交付稳定、可解释、可维护的产品体验。把上面这些题目按自己的项目经历重新组织一遍，会比单纯背答案有效得多。