字节前端 AI 面试深度解析（精简版）

一面：技术基础

1. SSE 原理及与 WebSocket 区别

• 原理：基于 HTTP 的单向通信。客户端发起请求，服务端保持连接并持续推送 text/event-stream 数据流。
• 区别：方向：SSE 单向（服务端→客户端）；WebSocket 双向。
  协议：SSE 基于标准 HTTP；WebSocket 需协议升级。
  能力：SSE 原生支持自动重连、断点续传；WebSocket 需手动实现。
  场景：SSE 适用于 AI 流式输出、新闻推送；WebSocket 适用于即时通讯、高频交互游戏。
  

2. 前端实现打字机效果

• 核心：结合 SSE 接收流式数据，维护缓冲区。
• 策略：逐字渲染：收到数据后，利用 requestAnimationFrame 或定时器逐个字符上屏。
  平滑处理：根据剩余字符动态调整渲染间隔，避免机械感。
  Markdown 兼容：流式解析 Markdown 时，需处理标签闭合问题（如遇到 < 未闭合需等待后续数据），防止页面闪烁或结构错乱。
  

3. Fetch API 请求中断

• 机制：使用 AbortController。
• 流程：创建控制器 -> 将 signal 传入 fetch -> 调用 abort() 方法。
• 场景：用户切换话题、取消生成、组件卸载时，立即终止网络请求，释放资源。

4. 带并发限制的 Promise 调度器

• 逻辑：维护运行计数器 runningCount 和任务队列 queue。
• 执行：若 runningCount < limit，直接执行任务，计数器 +1。
  若满限，任务入队。
  任务完成（无论成功失败），计数器 -1，检查队列并触发下一个任务。
  

5. CSS 实现 ChatGPT 气泡布局

• 方案：Flexbox 布局。
• 关键属性：容器设为 flex-direction: column。用户消息设 align-self: flex-end（靠右），AI 消息设 align-self: flex-start（靠左）。内部嵌套 Flex 行布局处理头像与文本间距。

6. ArrayBuffer vs Blob 及多模态应用

• 区别：ArrayBuffer 是原始二进制缓冲区，需视图（TypedArray）操作；Blob 是类文件对象，含 MIME 类型，不可变。
• 应用：音视频/图像：接收 ArrayBuffer 转 Blob，用 URL.createObjectURL 生成临时链接播放。
  分片上传：利用 Blob.slice 切割大文件。
  

二面：深入原理与项目

1. 流式 Markdown 渲染优化

• 痛点：频繁解析导致重绘重排，主线程阻塞。
• 优化：批量解析：积累一定字符数或时间间隔后再解析。
  Web Worker：将 Markdown 解析移至后台线程。
  虚拟列表：仅渲染可视区域 DOM。
  缓存：已解析段落不再重复计算。
  

2. 处理 LLM 幻觉导致的渲染异常

• 策略：防御式解析：JSON 解析包裹 try-catch，失败降级为纯文本。
  安全清洗：使用 DOMPurify 过滤非法 HTML 标签，防 XSS。
  容错机制：流式解析遇未闭合标签暂不渲染，等待后续数据或超时丢弃。
  

3. Prompt Engineering 的前端封装

• 实践：模板化：建立 Prompt 模板库，支持变量插值。
  版本控制：管理 Prompt 版本，支持 A/B 测试。
  上下文注入：拦截器统一注入 System Message 和历史对话。
  

4. RAG (检索增强生成) 的前端工作

• 定义：检索知识库 + 生成回答，减少幻觉。
• 前端职责：引用展示：解析并高亮显示答案中的参考文献来源。
  反馈闭环：提供点赞/点踩，收集数据优化检索。
  知识库 UI：文档上传、预览及管理界面。
  

5. 优化首字响应时间 (TTFT)

• 手段：强制流式：拒绝全量返回，必须边想边发。
  视觉预占：展示骨架屏或“思考中”动画，降低感知延迟。
  边缘计算：在 CDN 节点预处理 Prompt，减少网络往返。
  

6. 前端运行轻量级模型考量

• 因素：量化：模型压缩（INT8/INT4）减小体积。
  内存监控：防止大模型撑爆浏览器内存。
  兼容性：检测 WebGPU/Wasm 支持情况。
  线程隔离：推理必须在 Web Worker 运行。
  

7. 长对话内存与性能管理

• 方案：滑动窗口：仅保留最近 N 轮，旧数据摘要化或丢弃。
  DOM 虚拟化：复用节点，只渲染可见区。
  存储分离：历史数据存 IndexedDB/后端，前端只持当前视图状态。
  

8. 事件总线 (Event Bus) 实现

• 核心：on (订阅), emit (发布), off (取消)。
• 应用：解耦组件通信，如 Agent 任务完成通知全局状态栏更新。

三面：架构与综合能力

1. 低代码 AI Agent 编排画布设计

• 选型：React Flow/X6（图形引擎）+ Zustand（状态管理）。
• 架构：节点抽象：统一定义输入/输出端口及配置。
  执行引擎：前端模拟调试，后端 DAG 引擎实际执行。
  序列化：画布状态转为 JSON Schema 供后端解析。
  

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

• 转变：交互设计：从切图转向设计复杂的 AI 交互流程（引导、纠错、可视化）。
  全栈视野：懂 Prompt、向量库、模型部署，成为业务与模型的桥梁。
  数据驱动：设计反馈闭环，利用数据优化模型效果。
  

3. 长文本对话的安全问题

• 对策：内容清洗：严格过滤 AI 输出的脚本标签。
  CSP 策略：限制资源加载源。
  隐私脱敏：发送前正则替换或本地模型识别敏感信息（手机、身份证）。
  

4. 最难技术挑战及解决 (示例)

• 挑战：流式 Markdown 解析导致的页面抖动。
• 解决：双缓冲渲染机制 + Diff 算法，仅更新变化 DOM 节点，避免全量重绘。

5. 前端 AI 组件库核心组件

• 清单：：支持 Markdown、代码高亮、引用。
  ：流式打字机容器。
  ：支持快捷指令、文件上传。
  ：思考状态动画。
  

6. AI 自动写代码与前端未来

• 观点：不会取代，只会进化。
• 理由：最后一公里：复杂业务逻辑整合、边界处理、体验微调仍需人类。
  需求翻译：将模糊需求转化为精确逻辑的核心能力不可替代。
  角色升级：从“代码编写者”转变为“架构师”和“审核员”，聚焦 Code Review 与创新设计。