先交代背景：23届前端，非科班，没大厂经历，今年 5 月集中冲了前端 AI 结合岗，面了 3 家中小厂 + 1 家准一线，全部走到 HR 面，3 家拿到意向，1 家等流程。

不是我多厉害，是今年前端 AI 岗
的面试套路太固定，准备对了真的很好过。

先说大家最关心的：前端 AI 岗到底面什么？
我面下来，高频就这几块：

1. JS 基础 / 工程化（闭包、Promise、防抖节流、webpack/vite）
2. Vue/React 原理（响应式、diff、通信、渲染优化）
3. AI 前端必考：流式输出、SSE、WebSocket、
   Prompt 封装、AI 组件渲染、大模型接入踩坑
4. 手写题：防抖、节流、Promise、深拷贝、AI 对话流式模拟
5. 项目题：你做过 AI 对话 / 知识库 / 代码生成类项目怎么实现

我发现一个真相：现在前端 AI 岗不卡你算法，不卡你模型原理，只卡你 “能不能快速落地 AI 页面”。
会基础前端 + 懂一点 AI 接入流程，通过率直接翻倍。

我身边一起投的朋友，有的背了一堆大模型原理，结果面试一问前端全忘；有的只会写页面，AI 相关一问三不知。

而我就靠一套前端 AI 面试整理资料，针对性背、针对性练，3 场面试基本都是半小时结束，面试官问的点资料里全覆盖。

大家最容易踩的 3 个坑（我全帮你排了）

1. v-if 和 v-for 混用：面试官必问，原理 + 优化必须一口答出
2. 闭包 + 内存泄露：概念会背没用，要会说场景、会解决
3. AI 流式输出不会讲：SSE 怎么接、怎么分段渲染、异常怎么处理，一开口就露馅

我这次能稳过，真的不是运气，是资料帮我省了 80% 的复习时间。
里面没有废话，全是前端 + AI 岗的高频题、标准答案、手写代码、项目话术，直接背就能用。

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

一、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