钉子的生活日记
文章目录

牛客面经整理：AI coding 美团前端开发二面（二十九）

收录日期：2026-04-23
关键词：前端、AI coding、流式渲染、Prompt、RAG、安全

1. React Fiber 架构解决了什么问题？工作原理是什么？

参考答案

  • 解决的问题：把“不可中断的递归渲染”改成“可中断、可恢复”的增量渲染，让高优先级交互（输入、点击）优先，减少卡顿。
  • 核心机制：
    • Fiber 把组件树拆成可调度的小任务单元（work loop）。
    • Render 阶段可被打断（可重入），Commit 阶段一次性提交 DOM 变更（不可中断）。
    • 通过 lanes/优先级调度不同更新（用户输入优先于低优先级刷新）。
  • 常见追问：为什么 render 可中断、commit 不可中断（保证 UI 一致性）。

2. AI 对话界面如何实现类似 ChatGPT 的 Markdown 实时流式渲染？

参考答案

  • 数据流：SSE/WebSocket 接收 token/chunk → 增量拼接到 buffer。
  • 渲染策略：
    • 小步渲染：对 buffer 做节流（例如 16–50ms）更新 UI，避免每 token 触发重排。
    • 增量解析：按行/块解析（代码块、列表、表格）避免全量 re-parse；必要时做“片段 AST 缓存”。
    • 代码块：未闭合时先以纯文本渲染，闭合后再升级成高亮块。
  • 安全：Markdown 渲染必须做 XSS 处理（白名单标签/属性，禁用危险 URL scheme）。

3. 你对 Prompt Engineering 的理解？前端如何优化 Prompt 质量？

参考答案

  • Prompt 本质：把“任务、上下文、约束、输出格式”明确化，降低模型不确定性。
  • 常用结构：角色/目标 → 输入数据 → 规则约束（不要做什么）→ 输出 schema（JSON/Markdown）→ 示例（few-shot）。
  • 前端落地：
    • 模板化与参数化（把用户输入、检索片段、系统约束分区拼接）。
    • 对输出做结构化约束（JSON schema / function calling），并加校验与重试。
    • 上下文裁剪：只保留与当前问题相关的 history，避免 token 浪费与幻觉。

4. AI 接口长连接超时和异常重试怎么处理？

参考答案

  • 超时分层：连接超时（建立连接）/ 首包超时（TTFB）/ 空闲超时（长时间无数据）。
  • 重试策略：
    • 只对“可安全重试”的请求重试（幂等或带幂等键）。
    • 指数退避 + 抖动（jitter），避免雪崩。
    • 流式场景：断线后可带 last_event_id 或 offset 恢复（若服务端支持）。
  • 体验：明确状态（reconnecting/paused），提供“继续生成/重试/停止”操作。

5. 什么是 RAG？前端在 RAG 流程中能做什么？

参考答案

  • RAG：检索增强生成。先检索相关资料（向量/关键词/混合检索），再把命中文本作为上下文喂给模型生成答案。
  • 前端能参与的点：
    • 查询改写：把用户问句标准化/补全意图（同义改写、关键词提取）。
    • 证据展示：展示引用片段、命中来源、置信度，支持跳转/展开。
    • 交互增强：让用户选择/排除某些资料源，形成“可控上下文”。
    • 反馈闭环：收集“有用/无用”反馈，回传用于排序与质量评估。

6. 长列表性能怎么优化？如果列表项是 AI 生成的动态高度内容呢？

参考答案

  • 基础：虚拟列表（只渲染可视区 + buffer），避免 DOM 过多。
  • 动态高度处理：
    • 先用估算高度渲染，再用 ResizeObserver 测量真实高度并更新缓存。
    • 使用“分段锚点/二分定位”快速计算滚动偏移，避免全量累加。
    • Markdown/代码高亮等重组件拆分为懒加载，避免阻塞首屏。
  • 渲染节奏：token 流式更新时做节流 + 批量更新，避免频繁 layout。

7. AICoding 场景下如何防范 XSS？

参考答案

  • 风险来源：模型输出的 Markdown/HTML、用户可编辑内容、链接与图片 URL、代码块中的伪装 payload。
  • 防护要点：
    • Markdown 渲染用严格白名单（禁止 script、事件属性、javascript: URL）。
    • 服务端与前端双层清洗（不要只信任前端）。
    • 配置 CSP（限制脚本来源、禁止 inline script），显著降低 XSS 成功率。
    • 对链接做 rel="noopener noreferrer"，避免 tabnabbing。

8. 设计一个简单的 AI Agent 编排：Tool Call 串行/并行怎么处理？

参考答案

  • 定义协议：每个 tool 的入参/出参 schema（强类型），tool 输出必须可验证。
  • 串行：前置 tool 的输出是后续 tool 的输入；用状态机记录步骤与回滚点。
  • 并行：独立工具并发执行；用 Promise.allSettled 收敛结果，统一做“失败策略”（重试/降级/部分可用）。
  • 关键工程点：
    • 可观测性：每次调用记录 traceId、耗时、token、错误栈。
    • 幂等性：同一次任务重放时避免重复副作用（带幂等键）。
    • 人机协作：高风险动作（发消息、下单、写库）必须加确认门。