前端人工智能开发面试题

加血老头
0 阅读7分钟

前端人工智能开发面试题

（技术基础）

1. SSE vs WebSocket，AI 流式输出场景如何选择？

核心区别：

  • SSE（Server-Sent Events）：单向通信（服务端→客户端），基于 HTTP 长连接，文本格式，自动重连，浏览器原生支持。

  • WebSocket：全双工通信（双向），独立协议，支持二进制，低延迟，适合实时互动。

AI 流式输出场景选择：

  • 优先选 SSE：AI 对话是「服务端推文字流」，单向即可，实现更轻量，天然适配流式响应，浏览器兼容性好。

  • 选 WebSocket：需要实时双向交互（如用户打断、实时语音 / 消息），或需要推送二进制数据时。

2. AI 长列表消息自动滚动到底部，且不干扰手动向上滚动

实现思路：

  1. 监听容器 scroll 事件，记录用户是否手动向上滚动（判断 scrollTop + clientHeight < scrollHeight - 阈值）。

  2. 新消息插入时，若用户未手动向上，则调用 scrollTo({ top: scrollHeight, behavior: 'smooth' })。

  3. 若用户已手动向上，则保留当前位置，只在底部显示「新消息」提示按钮，点击后再滚动。

const container = document.getElementById('msg-container');

let isUserScrolledUp = false;

container.addEventListener('scroll', () => {

 isUserScrolledUp =&#x20;

   container.scrollTop + container.clientHeight < container.scrollHeight - 50;

});

function appendNewMsg() {

 // ...插入新消息

 if (!isUserScrolledUp) {

   container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });

 }

}

3. 手写带并发限制的请求调度器

class RequestScheduler {

 constructor(limit = 3) {

   this.limit = limit;

   this.running = 0;

   this.queue = \[];

 }

 add(task) {

   return new Promise(resolve => {

     this.queue.push({ task, resolve });

     this.run();

   });

 }

 run() {

   if (this.running >= this.limit || this.queue.length === 0) return;

   const { task, resolve } = this.queue.shift();

   this.running++;

   task().then(resolve).finally(() => {

     this.running--;

     this.run();

   });

 }

}

// 使用示例

const scheduler = new RequestScheduler(2);

const mockApi = (id) => () => new Promise(resolve => setTimeout(() => resolve(id), 1000));

scheduler.add(mockApi(1)).then(console.log);

scheduler.add(mockApi(2)).then(console.log);

scheduler.add(mockApi(3)).then(console.log);

4. CSS 容器查询（Container Queries）理解与作用

核心概念：

  • 基于父容器尺寸而非视口（viewport）来应用样式，与媒体查询互补。

  • 语法：@container (min-width: 300px) { .card { ... } }。

在 AI 侧边栏组件中的作用：

  • 侧边栏宽度可变（折叠 / 展开），组件可根据容器宽度自适应布局：

    • 窄容器：图标 + 文字垂直排列；

    • 宽容器：图标 + 文字水平排列；

  • 实现组件级响应式，不依赖全局布局，复用性更强。

5. 简单 Markdown 实时渲染引擎 + 代码高亮

实现思路：

  1. 用 marked 库将 Markdown 解析为 HTML。

  2. 用 highlight.js 或 Prism.js 对 <pre><code> 块进行语法高亮。

  3. 监听输入框 input 事件，实时更新预览。

import { marked } from 'marked';

import hljs from 'highlight.js';

marked.setOptions({

highlight: (code, lang) => hljs.highlight(code, { language: lang }).value

});

function renderMarkdown(text) {

return marked.parse(text);

}

// 实时渲染

input.addEventListener('input', (e) => {

preview.innerHTML = renderMarkdown(e.target.value);

});

6. JS 事件循环（Event Loop）+ 宏 / 微任务在 AI 消息推送中的顺序

事件循环：

  • 主线程执行栈 → 清空微任务队列 → 执行宏任务队列 → 循环。

宏任务 vs 微任务：

  • 宏任务：setTimeout、setInterval、I/O、requestAnimationFrame。

  • 微任务：Promise.then/catch/finally、process.nextTick（Node.js）。

AI 消息推送中的顺序：

  • SSE/ Fetch 流式响应的 onmessage 是宏任务，会在当前微任务清空后执行。

  • 若在 onmessage 中用 Promise 处理文本片段，微任务会优先于下一次 onmessage 执行，保证消息处理的顺序性。

（深入原理与项目）

1. AI 流式输出「打字机」效果的性能优化

  • 虚拟列表：只渲染可视区域的消息，避免长列表 DOM 过多。

  • 批量更新：用 requestAnimationFrame 或 setTimeout 批量插入字符，减少 DOM 操作频率。

  • 文本分片：将长文本分片，每片控制在一定长度，避免单次渲染过大。

  • React 场景：用 useTransition 降低更新优先级，避免阻塞 UI 交互。

2. AI Agent 中 Prompt 模板与变量替换管理

  • 模板分离：将 Prompt 模板与代码解耦，存为 .prompt/.hbs 文件或数据库。

  • 变量注入：用 {{variable}} 占位符，运行时替换为用户输入、上下文数据。

  • 版本控制：对模板做版本管理，方便回滚和对比。

  • 类型安全：用 TypeScript 定义变量类型，避免替换错误。

3. Function Calling 前端实现流程与配合

前端流程：

  1. 解析 AI 返回的工具调用指令（如 {name: "getWeather", parameters: {city: "北京"}}）。

  2. 调用对应前端 / 后端函数，获取结果。

  3. 将函数结果作为新消息发送给 AI，完成多轮对话。

前端配合：

  • 维护工具函数注册表，映射函数名与实现。

  • 处理函数调用的 loading / 错误状态。

  • 展示函数执行过程（如「正在查询天气...」）。

4. AI 响应网络中断 / 内容截断的容错机制

  • 断点续传：记录已接收的消息 ID，重连后从断点继续拉取。

  • 心跳检测：定时发送心跳，超时则触发重连。

  • 内容校验：对流式内容做完整性校验（如结束标记），发现截断则请求补全。

  • 本地缓存：将已接收内容缓存到 IndexedDB，避免丢失。

  • 用户提示：展示「网络异常，正在重连」，重连成功后恢复流式输出。

5. 直播间高频交互下 AI 组件与直播间状态同步

  • 状态中心：用 Zustand/Valtio 管理全局状态（点赞、弹幕、AI 消息）。

  • 事件总线：通过 EventEmitter 或 Pub/Sub 模式，让 AI 组件订阅直播间状态变化。

  • 批量更新：高频事件（如点赞）做防抖 / 节流，避免频繁重渲染。

  • 优先级调度：用 requestIdleCallback 处理非紧急状态更新，不阻塞直播画面。

6. React Fiber 对长文本更新场景的意义

  • 可中断渲染：将长文本渲染拆分为小任务，可被高优先级交互（如用户输入）打断，避免页面卡顿。

  • 增量更新：只更新变化的文本片段，而非整个组件树。

  • 时间切片：利用浏览器空闲时间分片渲染，保证 UI 响应性。

7. AI 返回敏感信息被拦截的前端处理

  • 优雅降级：展示「该内容无法显示」，而非空白或报错。

  • 用户引导：提供合规提示，引导用户调整提问。

  • 日志上报：上报拦截事件，用于产品分析。

  • 视觉隔离：用灰色遮罩或占位符替代敏感内容。

8. Web Worker 在 AI 前端开发中的应用场景

  • Markdown 渲染 / 代码高亮：避免阻塞主线程。

  • 大文本处理：分词、关键词提取、文本压缩。

  • 本地推理：轻量模型（如 Llama 2.cpp）在 Worker 中运行，不影响 UI。

  • 数据预处理：对 AI 返回的数据流做解析、格式化。

（架构与综合能力）

1. 淘宝直播 AI Agent 前端架构重点模块

  • 状态管理层：全局状态（直播、AI、用户）+ 数据流管理。

  • AI 通信层：SSE/WebSocket 封装，重试、容错、日志。

  • 组件层：聊天窗口、工具调用面板、Prompt 编辑器。

  • 性能层：虚拟列表、懒加载、缓存策略。

  • 监控层：性能指标、错误上报、用户行为分析。

  • 安全层：敏感内容过滤、XSS 防护、权限控制。

2. AI 时代前端工程师核心竞争力变化

  • 从 UI 实现 → 全链路协作：理解 AI 工作流，与算法 / 后端协同。

  • 从静态渲染 → 动态不确定性处理：设计容错、加载、异常状态。

  • 从代码复用 → 提示工程：掌握 Prompt 设计、变量管理、模板迭代。

  • 从性能优化 → 交互体验优化：优化流式输出、打字机、实时反馈。

3. 衡量 AI Agent 前端产品质量的核心指标

  • 响应延迟：从用户发送到首字出现的时间。

  • 交互流畅度：卡顿率、输入延迟、滚动体验。

  • 功能完整性：工具调用成功率、上下文记忆准确率。

  • 错误率：网络错误、内容截断、敏感信息拦截率。

  • 用户满意度：NPS、留存率、功能使用率。

4. 最难的 AI 相关技术挑战（示例）

  • 挑战：长文本流式输出导致页面卡顿，用户输入被阻塞。

  • 解决：

  1. 用 React Fiber + useTransition 降低渲染优先级。

  2. 实现虚拟列表，只渲染可视区域。

  3. 文本分片渲染，每 50ms 最多渲染 100 字符。

  4. 用 Web Worker 处理 Markdown 渲染。

5. 降低 AI 内容不确定性的设计手段

  • 加载状态：明确展示「AI 正在思考」，减少等待焦虑。

  • 进度提示：流式输出时显示打字机效果，让用户感知进度。

  • 结果预览：先展示摘要 / 骨架屏，再逐步填充内容。

  • 撤销 / 重试：提供「重新生成」按钮，允许用户修正。

  • 边界提示：对不确定内容标注「AI 生成」，避免误导。

如果你需要，我可以把其中任意一题（比如「并发请求调度器」或「SSE vs WebSocket」）扩展成完整可运行的代码示例，方便你直接在项目里用。需要我这么做吗？

（注：文档部分内容可能由 AI 生成）

avatar
文章
阅读
粉丝