前端 AI 面试题：高频考点与实战解析

1. 引言

随着大模型与 AI 应用爆发式增长，前端工程师的面试题也悄然发生变化。除了传统的 JavaScript、CSS、浏览器原理，越来越多公司开始考察「前端如何与 AI 结合」：如何调用大模型 API、如何做流式输出、如何设计 AI 对话界面、如何在前端做向量检索与 RAG 等。

本文整理了一份前端 AI 面试题清单，覆盖基础概念、工程实践、性能优化与开放性问题，并附上解题思路与参考回答，帮助你系统备战。

2. 基础概念类

2.1 什么是大模型？前端为什么要关注它？

大模型（Large Language Model，LLM）是基于海量文本训练的深度学习模型，能够理解并生成自然语言。前端关注它的原因：

产品形态变化：从「表单 + 按钮」转向「对话 + 生成」；
交互范式变化：用户从「操作界面」变为「自然语言描述意图」；
前端职责扩展：需要负责 Prompt 组织、流式渲染、状态管理、错误降级等。

2.2 什么是 Token？为什么前端要关心 Token 数？

Token 是模型处理文本的最小单位，可以是单词、子词或字符。前端关心 Token 数的原因：

计费：多数 API 按 Token 计费；
上下文窗口：超出窗口会被截断；
响应速度：Token 越多，生成越慢；
前端可做 Token 估算与截断，避免请求失败。

2.3 什么是 Prompt？什么是 Prompt Engineering？

Prompt 是用户输入给模型的指令或问题。Prompt Engineering 是设计高质量 Prompt 以稳定获得期望输出的方法，常见技巧包括：

明确角色与任务；
给出示例（Few-shot）；
限定输出格式（JSON、Markdown）；
分步引导（Chain-of-Thought）。

2.4 什么是流式输出（Streaming）？为什么 AI 对话需要它？

流式输出指模型边生成边返回结果，前端通过 SSE（Server-Sent Events）或 WebSocket 逐块接收并渲染。它的价值：

降低首字延迟，提升体验；
用户可提前阅读，减少等待焦虑；
支持「打字机」效果，增强交互感。

3. 工程实践类

3.1 前端如何调用大模型 API？

常见方式：

直接调用 HTTP API（OpenAI、通义、文心等），使用 fetch 或 axios；
通过 BFF（Backend for Frontend）中转，隐藏密钥、做鉴权与限流；
使用官方 SDK（如 openai、@anthropic-ai/sdk）。

js 复制代码

// 示例：调用 OpenAI 兼容接口
const res = await fetch('/api/chat', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ messages: [{ role: 'user', content: '你好' }] }),
});
const data = await res.json();
console.log(data.choices[0].message.content);

3.2 如何实现流式对话？SSE 与 WebSocket 怎么选？

SSE 适合「服务端单向推送」场景，基于 HTTP，天然支持重连，实现简单：

js 复制代码

const es = new EventSource('/api/chat/stream');
es.onmessage = (event) => {
  const chunk = JSON.parse(event.data);
  appendContent(chunk.delta);
};

WebSocket 适合「双向实时通信」，如多轮对话中需要取消、中断、上报状态等场景。

选型建议：

纯生成式对话 → SSE；
需要双向控制（中断、心跳、多路复用）→ WebSocket。

3.3 如何设计 AI 对话消息的数据结构？

推荐使用不可变（Immutable）结构，便于状态管理与重渲染：

ts 复制代码

interface ChatMessage {
  id: string;
  role: 'user' | 'assistant' | 'system';
  content: string;
  status: 'pending' | 'streaming' | 'done' | 'error';
  createdAt: number;
}

要点：

用 id 作为 key，避免渲染错乱；
用 status 标记流式状态，驱动 UI 变化；
用 content 累积增量，避免频繁创建新对象。

3.4 如何管理 AI 对话的并发与取消？

使用 AbortController 取消未完成的请求；
使用「请求序号」或「会话版本号」丢弃过期响应；
使用「互斥锁」或「队列」限制同时进行的请求数。

js 复制代码

const controller = new AbortController();
fetch('/api/chat', { signal: controller.signal });

// 用户切换会话时取消
controller.abort();

3.5 如何在前端做 Markdown 渲染？

AI 输出常为 Markdown，前端需要安全渲染：

使用 marked / markdown-it 解析；
使用 DOMPurify 清洗 HTML，防止 XSS；
代码块用 highlight.js / prismjs 高亮；
数学公式用 KaTeX / MathJax。

js 复制代码

import { marked } from 'marked';
import DOMPurify from 'dompurify';

const html = DOMPurify.sanitize(marked.parse(content));

3.6 如何实现「打字机」效果？

流式渲染时逐块追加内容，配合 requestAnimationFrame 或定时器控制显示节奏：

js 复制代码

function typewriter(text, onTick) {
  let i = 0;
  const timer = setInterval(() => {
    onTick(text.slice(0, ++i));
    if (i >= text.length) clearInterval(timer);
  }, 16);
}

注意：真实场景中应优先「来一块渲染一块」，而不是等全部到达后再模拟打字。

4. 性能与体验优化类

4.1 如何降低 AI 对话的首字延迟？

使用流式输出，尽早返回第一个 Token；
减少前端「等待完整响应」的逻辑；
对 Prompt 做精简，减少输入 Token；
使用更快的模型或更小的上下文窗口；
对常用回复做缓存。

4.2 长对话导致上下文超限怎么办？

滑动窗口：只保留最近 N 轮消息；
摘要压缩：将早期对话摘要后替换原文；
关键信息提取：只保留用户意图与关键事实；
分片检索：结合向量数据库做 RAG，按需注入相关片段。

4.3 如何避免 AI 输出导致的页面卡顿？

使用虚拟列表（如 react-window）渲染长对话；
对 Markdown 解析做「增量 + 防抖」；
将高开销计算放入 Web Worker；
避免在渲染路径中做同步 Token 统计。

4.4 如何做 AI 功能的错误降级？

网络错误：提示重试，保留用户输入；
超时：给出「生成超时」提示，支持续传；
内容安全拦截：展示友好提示；
模型不可用：降级到本地规则或缓存答案。

5. 进阶与开放性问题

5.1 什么是 RAG？前端在其中扮演什么角色？

RAG（Retrieval-Augmented Generation）是「检索增强生成」，先检索相关资料，再让模型基于资料回答。前端角色：

上传文档并解析；
调用向量化接口生成 Embedding；
展示检索来源与引用；
在本地做轻量向量检索（如 transformers.js）。

5.2 什么是 Function Calling？前端如何配合？

Function Calling 让模型在对话中决定调用哪个函数，并返回结构化参数。前端配合方式：

定义函数 Schema 并传给模型；
接收模型返回的函数调用请求；
执行函数后把结果回传给模型继续生成。

ts 复制代码

const tools = [
  {
    type: 'function',
    function: {
      name: 'get_weather',
      description: '查询天气',
      parameters: {
        type: 'object',
        properties: {
          city: { type: 'string' },
        },
      },
    },
  },
];

5.3 如何在前端做 Embedding 与向量检索？

使用服务端 API 生成 Embedding；
使用 transformers.js 在浏览器本地生成；
使用 hnswlib / faiss（WASM 版）做本地向量检索；
或调用向量数据库（如 Milvus、Pinecone）的 HTTP API。

5.4 如何设计一个 AI 聊天组件？

考察点：组件拆分、状态管理、可扩展性。

tsx 复制代码

// 伪代码：AI 聊天组件结构
function Chat() {
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const [input, setInput] = useState('');

  const send = async () => {
    // 1. 追加用户消息
    // 2. 创建 assistant 占位消息
    // 3. 发起流式请求，逐块更新 content
    // 4. 完成后更新 status
  };

  return (
    <div>
      <MessageList messages={messages} />
      <InputBar value={input} onChange={setInput} onSend={send} />
    </div>
  );
}

5.5 如何保证 AI 输出的安全性？

前端做内容过滤与敏感词检测；
使用 DOMPurify 清洗渲染内容；
对链接做安全校验（javascript: 协议拦截）；
后端做内容审核，前端只做展示层兜底。

6. 总结

前端 AI 面试题的核心，不是考察你是否会「调 API」，而是考察你是否理解「AI 产品的前端工程化」：流式渲染、状态管理、性能优化、安全防护、错误降级。建议在准备时：

亲手实现一个流式对话 Demo；
理解 Token 与上下文窗口对前端的影响；
掌握 Markdown 安全渲染与 XSS 防护；
思考 RAG、Function Calling 等进阶能力如何落地。

把这些实践沉淀成项目经验，面试时就能从容应对。