五月份面了五家做AI应用的前端岗位，有大厂AI部门也有创业公司，结果都拿到了offer。倒不是想炫耀什么，就是觉得面试时遇到的场景题还挺有代表性的，整理出来可能对正在准备的朋友有点用。

现在的AI前端面试，跟两年前完全不一样了。以前问React生命周期、手写节流防抖就能过关，现在全是真实场景：比如AI对话
流式渲染卡顿怎么优化、画布上同时拖拽几百个节点怎么保证帧率、跨端AI应用的内存泄漏
怎么定位。没有一家考我八股文。

下面就是我面了五家之后总结出的高频场景题：

一、TypeScript与类型系统(20题)

1. 在定义AI接口返回的嵌套数据结构（如多轮对话、工具调用结果）时，如何用TypeScript的泛型与条件类型实现灵活的类型推导？
2. 当AI接口返回的字段可能因模型版本不同而动态变化时，如何设计类型守卫（type guard）与类型收缩策略？
3. 请用TypeScript实现一个“类型安全的Prompt模板解析器”，要求支持变量插值、类型校验与默认值。
4. 如何用TypeScript的模板字面量类型（Template Literal Types）约束AI返回的特定格式字符串（如日期、ID）？
5. 设计一个类型系统，用于描述AI Agent执行过程中的状态流转（如思考→执行→观察→完成），并实现类型安全的状态切换。
6. 在联合类型（Union Types）与交叉类型（Intersection Types）中，哪种更适合定义多模态AI输出（文本、图像、音频）？为什么？
7. 如何用TypeScript声明一个支持流式Chunk数据与错误处理的泛型接口，并兼容SSE、
   WebSocket等多种传输方式？
8. 当AI服务返回的数据结构包含递归引用（如对话树）时，如何用TypeScript定义并避免循环引用导致的类型爆炸？
9. 请设计一个类型系统，用于前端对AI模型元数据（版本、输入输出格式、最大Token数）的静态校验。
10. 如何用TypeScript的infer关键字提取AI流式响应中的嵌套数据字段（如choices[0].delta.content）？
11. 在
    微前端架构下，多个AI功能模块共享类型定义，如何用Monorepo或类型包（.d.ts）进行统一管理？
12. 如何用TypeScript实现一个“类型安全的AI函数调用”系统，确保前端传递的参数与模型要求的Schema完全匹配？

二、流式处理与实时通信（25题）

1. 请设计一个支持“断线重连+消息去重”的SSE客户端，并处理AI长文本生成中的网络抖动问题。
2. 如何在前端实现一个“流式Markdown解析器”，在AI逐字输出过程中实时渲染标题、列表、代码块，并避免标签截断？
3. 当AI流式返回的数据包含多个独立片段（如文本、代码、表格）时，如何设计Chunk合并算法以保证片段完整性？
4. 请实现一个支持“优先级调度”的流式请求队列，允许用户中断低优先级生成（如翻译）以优先处理高优先级任务（如代码生成）。
5. 在React 18+中，如何用useTransition与useDeferredValue优化AI流式输出的渲染性能，避免主线程阻塞？
6. 设计一个“流式数据缓存”策略，将AI已生成的内容分段存储于IndexedDB，支持离线续写与历史回放。
7. 如何用
   Web Worker并行处理多个AI流式响应（如同时生成文本与摘要），并实现跨线程状态同步？
8. 当AI服务端返回的流式数据包含自定义事件（如[DONE]、[ERROR]）时，前端如何解析并触发相应回调？
9. 请设计一个“流式进度估算”组件，根据已接收的Token数与模型速率，动态预测AI生成剩余时间。
10. 如何实现AI流式输出的“语音同步朗读”（TTS），确保语音与文字逐句对应，并支持暂停、跳过？
11. 在微前端场景下，多个子应用同时订阅同一个AI流式连接，如何设计共享连接管理器以避免重复请求？
12. 如何用
    Service Worker拦截AI流式请求，实现离线缓存、请求重试与带宽节省（如压缩Chunk）？

三、前端状态管理与数据流（21题）

1. 在大型AI应用中，如何用Zustand
   或Redux Toolkit管理多轮对话、生成任务、用户配置等复杂状态？
2. 设计一个“状态快照”系统，支持将AI对话的完整状态（包括流式中间结果）序列化保存与恢复。
3. 如何用
   XState或状态图（Statechart）建模AI Agent的完整工作流（包括工具调用、条件分支、错误处理）？
4. 在微前端架构下，多个AI功能模块需要共享“当前模型版本”状态，如何设计跨应用状态同步方案？
5. 请设计一个“乐观更新”策略，在用户发送AI请求后立即在UI中显示预期结果，再根据实际流式响应逐步修正。
6. 如何用immer或immutable.js优化AI对话列表的不可变更新，避免深拷贝导致的性能问题？
7. 设计一个“状态版本控制”系统，支持AI对话历史的任意回退、分支创建与合并（类似Git）。
8. 在离线优先的AI应用中，如何用RxJS或@tanstack/query管理本地缓存与网络状态的同步？
9. 如何用
   Recoil或
   Jotai的原子（Atom）机制实现AI生成参数的细粒度响应式更新（如温度、top_p）？
10. 设计一个“状态持久化”方案，将AI应用的关键状态自动保存至IndexedDB，并支持跨标签页同步。
11. 在AI可视化编辑器中，如何用
    Mobx实现画布节点、连接线、属性面板的双向数据绑定？
12. 如何用Redux-Saga或Redux-Observable处理AI请求的复杂副作用（如轮询、超时、竞态）？
13. 设计一个“状态迁移”工具，当AI接口版本升级导致数据结构变化时，自动转换旧版持久化状态。
14. 在AI多租户系统中，如何用上下文（Context）或依赖注入（DI）管理不同租户的独立状态实例？
15. 如何用Vue3的Composition API或
    React Hooks封装可复用的AI状态逻辑（如useChat、useCompletion）？

四、性能优化与渲染（20题）

1. 在万条级别的AI对话历史中，如何实现毫秒级搜索与过滤（关键词、时间范围、模型类型）？
2. 请设计一个“虚拟化渲染”方案，用于超长AI生成内容（如数万Token的文档）的平滑滚动与快速定位。
3. 如何用WebGL或Canvas实现AI生成图像的高性能实时预览（如缩放、拖拽、滤镜）？
4. 在AI代码编辑器中，如何优化语法高亮、代码折叠、错误波浪线的渲染性能，避免输入卡顿？
5. 设计一个“按需加载”策略，仅渲染AI对话列表中可视区域及附近的消息，其余部分保留为纯文本。
6. 如何用WASM加速前端本地的AI推理（如句子嵌入、相似度计算），并实现与JavaScript的无缝交互？
7. 在AI实时语音转文字场景中，如何用Web Audio API优化音频流处理，降低内存与CPU占用？
8. 请设计一个“渲染优先级”调度器，确保AI生成中的关键UI（如输入框、发送按钮）始终响应迅速。
9. 如何用React.memo、useMemo、useCallback避免AI消息列表因无关状态变更导致的全量重渲染？
10. 在AI多模态输出（文本+图像+表格）场景中，如何分阶段渲染以提升首屏速度？
11. 设计一个“资源预加载”策略，在用户打开AI应用时提前加载模型配置、常用Prompt模板等静态资源。

五、前端AI架构设计（19题）

1. 请设计一个“微前端+模块联邦”的AI应用架构，支持独立部署聊天、编辑、可视化等子应用。
2. 如何用Monorepo管理AI前端、Node.js中间层、共享类型定义、工具脚本的统一代码库？
3. 设计一个“插件化”AI前端框架，允许第三方开发者通过插件扩展模型接入、UI组件、工具调用。
4. 在AI多租户SaaS平台中，如何设计前端架构以支持动态主题、自定义域名、独立功能开关？
5. 如何用DDD（领域驱动设计）划分AI前端的核心领域（对话、模型、工具、知识库）与界限上下文？
6. 设计一个“事件驱动”架构，用EventEmitter或MessageChannel解耦AI各个模块（输入、处理、输出）。
7. 在AI实时协作场景中，如何用OT（操作转换）或CRDT实现多用户并发编辑的冲突解决？
8. 如何设计一个“配置驱动”的AI工作流引擎，前端通过JSON或YAML定义节点、连接线、条件分支？
9. 请设计一个“前后端分离”的AI应用，前端直接调用多个AI服务商API，后端仅做鉴权与计费代理。
10. 在AI嵌入式场景（如IDE插件）中，如何设计轻量级SDK，提供一致的API供宿主应用调用？
11. 在AI联邦学习前端，如何设计安全的数据上传、模型下载、更新合并流程，并保证用户隐私？
12. 设计一个“可观测性”架构，集成日志、指标、链路追踪，全面监控AI前端性能与异常。
13. 在AI低代码平台中，如何设计可视化编排器的前端架构，支持拖拽、连线、属性配置、实时预览？
14. 在AI实时视频处理场景中，如何设计前端流水线架构，串联视频采集、帧提取、AI推理、结果渲染？
15. 如何用Serverless思想设计AI前端，将部分计算（如Prompt渲染、结果过滤）移至边缘节点？

六、AI特性与前端工程实践（14题）

1. 在前端实现一个Agent循环时，如何管理工具调用的异步执行、超时处理与结果合并？
2. 请设计一个前端本地的向量检索系统，用
   TensorFlow.js或
   ONNX Runtime计算句子嵌入并做相似度匹配。
3. 在AI产品中，前端可以通过哪些技术手段（如缓存、压缩、懒加载）帮助降低Token成本？
4. 如何建立AI生成内容的质量评估体系？前端可在交互层面提供哪些反馈机制（如评分、标注、修正）？
5. 在处理AI幻觉（Hallucination）时，前端可以设计哪些实时提示与用户教育交互？
6. 如何实现前端本地的敏感词过滤与内容安全审核，在发送至AI服务前进行初步筛查？
7. 请设计一个前端实验平台，支持对AI模型参数（温度、top_p）、Prompt模板、UI布局进行A/B测试。
8. 如何用WebAssembly在前端运行轻量级AI模型（如TinyLLM、蒸馏模型），实现离线推理？

七、AI工程化与前端工具链（18题）

1. 如何设计一个AI前端项目的标准化目录结构，兼顾业务功能、共享组件、工具函数与类型定义？
2. 请设计一套AI前端代码规范（ESLint、Prettier、Commitlint），并集成Git Hooks自动检查。
3. 如何用Husky、lint-staged、Commitizen打造AI项目的自动化提交与代码质量流水线？
4. 设计一个AI前端项目的CI/CD流水线，包括代码检查、单元测试、E2E测试、构建优化、自动部署。
5. 如何用Docker容器化AI前端应用，实现开发、测试、生产环境的一致性？
6. 请设计一个AI前端性能监控方案，收集FP、FCP、LCP、CLS等核心指标，并关联AI特定指标（如Token/s）。
7. 如何用Sentry或Bugsnag监控AI前端异常，自动捕获错误上下文（用户输入、模型参数、网络状态）？
8. 设计一个AI前端日志系统，结构化记录用户操作、AI请求、响应时间、错误信息，便于回溯分析。

八、大模型前端集成（7题）

1. 如何用OpenAI Function Calling或Tools在前端实现AI工具调用（如计算器、搜索、数据库查询）？
2. 请设计一个模型性能监控面板，实时展示各模型的响应时间、成功率、Token消耗与成本。
3. 如何用LangChain.js在前端构建AI链（Chain），串联多个Prompt、模型调用、工具执行？
4. 如何实现模型调用的“请求合并”，将多个用户的相似问题批量发送，提升吞吐并降低成本？
5. 如何用WebSocket实现双向流式通信，支持AI模型主动推送进度更新、中断信号、工具调用请求？
6. 如何用Server-Sent Events实现模型输出的“进度条”与“部分结果预览”？
7. 如何用Web Workers并行调用多个模型，实现“模型投票”或“结果融合”？

以上： https://github.com/encode-studio-fe-coder/natural_traffic/wiki/scan_material3