主题
面试题库
面向 5 年经验的前端/全栈工程师，不是八股文背诵，而是结合原理的深度理解。
每道题均包含：题目 → 考察点 → 深度解答 → 追问延伸
充实计划
总体思路
- 每个分类独立一篇文档，每篇包含 15～25 道高频题
- 题目按难度分级：⭐ 基础 / ⭐⭐ 进阶 / ⭐⭐⭐ 深入
- 5 年经验的重心在 ⭐⭐ 和 ⭐⭐⭐，⭐ 级别的题目简要带过
- 每道题的解答不只是"答案"，而是为什么是这样 + 怎么证明
一、JavaScript / TypeScript 基础 (javascript.md)
约 26 道题，这是面试最核心的部分（含 TypeScript 专题 + 设计模式）
| # | 题目 | 难度 | 考察点 |
|---|---|---|---|
| 1 | typeof null 为什么是 "object"？ | ⭐ | JS 历史遗留问题、类型判断 |
| 2 | == 和 === 的区别？== 的隐式转换规则是什么？ | ⭐ | 类型转换、抽象相等算法 |
| 3 | 说说你对原型链的理解，画出 Function/Object 的完整原型关系 | ⭐⭐ | 原型链、__proto__、prototype |
| 4 | 手写 new 操作符 | ⭐⭐ | 原型链、构造函数 |
| 5 | 手写 instanceof | ⭐⭐ | 原型链遍历 |
| 6 | 解释闭包，给出 3 个实际应用场景 | ⭐⭐ | 闭包、作用域链 |
| 7 | var/let/const 的区别？什么是暂时性死区？ | ⭐ | 变量提升、TDZ |
| 8 | 说说事件循环，给出一段代码分析输出顺序 | ⭐⭐⭐ | 宏/微任务、执行栈 |
| 9 | Promise.all/Promise.allSettled/Promise.race/Promise.any 的区别？手写 Promise.all | ⭐⭐ | Promise 静态方法 |
| 10 | 手写完整的 Promise（符合 A+ 规范） | ⭐⭐⭐ | Promise 原理 |
| 11 | async/await 的本质是什么？如何用 Generator 模拟？ | ⭐⭐⭐ | Generator、自动执行器 |
| 12 | 手写 debounce 和 throttle | ⭐⭐ | 闭包、定时器 |
| 13 | 手写深拷贝（处理循环引用、Date、RegExp、Map、Set） | ⭐⭐⭐ | 递归、WeakMap |
| 14 | this 指向的 5 种绑定规则？箭头函数的 this 有什么不同？ | ⭐⭐ | this 绑定 |
| 15 | 手写 call/apply/bind | ⭐⭐ | this、函数方法 |
| 16 | Proxy 和 Object.defineProperty 的区别？Vue2 和 Vue3 为什么不同？ | ⭐⭐⭐ | Proxy、响应式 |
| 17 | 什么是尾调用优化？JS 引擎支持吗？ | ⭐⭐ | 调用栈、V8 |
| 18 | WeakMap/WeakSet 和 Map/Set 的区别？应用场景？ | ⭐⭐ | GC、弱引用 |
| 19 | ES Module 和 CommonJS 的核心区别？循环引用时各自如何处理？ | ⭐⭐⭐ | 模块化 |
| 20 | Object.is 和 === 的区别？React 的 Object.is 用在哪里？ | ⭐⭐ | 值比较、React 更新 |
| 21 | TypeScript 的泛型是什么？写一个类型安全的 pick / omit 工具类型 | ⭐⭐ | 泛型、映射类型 |
| 22 | TypeScript 的条件类型和 infer 关键字？手写 ReturnType / Parameters | ⭐⭐⭐ | 条件类型、类型推断 |
| 23 | TypeScript 的模板字面量类型能做什么？实现一个类型安全的路由参数提取 | ⭐⭐⭐ | 模板字面量类型 |
| 24 | TypeScript 的 unknown vs any vs never？各自的使用场景？ | ⭐⭐ | 类型系统 |
| 25 | 前端常用设计模式：观察者 vs 发布订阅的区别？手写实现 | ⭐⭐ | 设计模式 |
| 26 | 策略模式、工厂模式、代理模式在前端的实际应用场景？ | ⭐⭐ | 设计模式 |
二、CSS (css.md)
约 15 道题
| # | 题目 | 难度 | 考察点 |
|---|---|---|---|
| 1 | 水平垂直居中的 N 种方式（至少 5 种） | ⭐ | Flex/Grid/定位/transform |
| 2 | 什么是 BFC？如何触发？解决了什么问题？ | ⭐⭐ | BFC 规则 |
| 3 | position 的 5 个值及其区别？sticky 的触发条件？ | ⭐ | 定位模型 |
| 4 | Flex 布局中 flex: 1 到底等于什么？flex-basis 和 width 的优先级？ | ⭐⭐ | Flex 计算 |
| 5 | 说说层叠上下文和 z-index 的规则 | ⭐⭐ | 层叠顺序 |
| 6 | CSS 选择器优先级如何计算？!important 的最佳实践？ | ⭐ | 特异性 |
| 7 | transform 动画为什么比 left/top 性能好？什么是合成层？ | ⭐⭐⭐ | 渲染流水线、GPU 加速 |
| 8 | rem/em/vw/vh 的区别？移动端适配方案对比 | ⭐⭐ | 响应式 |
| 9 | 如何实现 1px 细线？为什么会有 1px 问题？ | ⭐⭐ | 设备像素比 |
| 10 | CSS 变量（自定义属性）vs Sass 变量？运行时 vs 编译时？ | ⭐⭐ | CSS 变量 |
| 11 | @layer 是什么？解决了什么问题？ | ⭐⭐ | CSS 级联层 |
| 12 | contain 属性是什么？如何用于性能优化？ | ⭐⭐⭐ | CSS 容器 |
| 13 | CSS Grid 和 Flex 各自适用什么场景？ | ⭐ | 布局选择 |
| 14 | :has() 选择器能做什么？给出 3 个实际用例 | ⭐⭐ | CSS 新特性 |
| 15 | 如何实现一个宽高比固定的容器？aspect-ratio 之前怎么做？ | ⭐⭐ | padding-top hack |
三、React (react.md)
约 22 道题，5 年经验 React 面试重中之重（含 SSR/Next.js 深入）
| # | 题目 | 难度 | 考察点 |
|---|---|---|---|
| 1 | React 的 Fiber 架构是什么？解决了什么问题？ | ⭐⭐⭐ | Fiber、可中断渲染 |
| 2 | React 的 Diff 算法（Reconciliation）的策略是什么？ | ⭐⭐⭐ | 三层 Diff 策略 |
| 3 | useState 的原理？为什么不能在条件语句中调用？ | ⭐⭐ | Hooks 链表 |
| 4 | useEffect 和 useLayoutEffect 的区别？执行时机？ | ⭐⭐ | Effect 生命周期 |
| 5 | useMemo 和 useCallback 什么时候该用？什么时候不该用？ | ⭐⭐ | 性能优化 |
| 6 | React.memo 的原理？浅比较的坑？ | ⭐⭐ | 渲染优化 |
| 7 | useRef 的两种用法？为什么它不会触发重渲染？ | ⭐⭐ | Ref 原理 |
| 8 | React 的合成事件系统是什么？和原生事件有什么区别？ | ⭐⭐⭐ | 事件委托、事件池 |
| 9 | React 的批量更新（Batching）机制？React 18 有什么变化？ | ⭐⭐⭐ | 自动批处理 |
| 10 | Suspense 和 lazy 的原理？ErrorBoundary 怎么实现？ | ⭐⭐ | 代码分割、错误边界 |
| 11 | React 的 Context 性能问题？如何优化？ | ⭐⭐⭐ | Context 重渲染 |
| 12 | Redux / Zustand / Jotai 的核心区别？如何选型？ | ⭐⭐ | 状态管理 |
| 13 | 什么是 Server Components？和 SSR 有什么区别？ | ⭐⭐⭐ | RSC、Next.js |
| 14 | React 的 key 为什么重要？用 index 做 key 有什么问题？ | ⭐⭐ | Reconciliation |
| 15 | 如何封装一个好的自定义 Hook？设计原则？ | ⭐⭐ | Hook 设计 |
| 16 | React 的并发模式（Concurrent Mode）是什么？startTransition 怎么用？ | ⭐⭐⭐ | 并发特性 |
| 17 | forwardRef 和 useImperativeHandle 的使用场景？ | ⭐⭐ | Ref 转发 |
| 18 | 如何实现一个虚拟列表？React 有哪些方案？ | ⭐⭐⭐ | 长列表优化 |
| 19 | React 18 的 useId / useSyncExternalStore / useInsertionEffect 都是做什么的？ | ⭐⭐ | React 18 新 API |
| 20 | 从 Class 组件到 Hooks 的演进，为什么 React 要推 Hooks？ | ⭐⭐ | 设计思想 |
| 21 | SSR / SSG / ISR 的区别？Next.js App Router 和 Pages Router 的核心差异？ | ⭐⭐⭐ | 服务端渲染、Next.js |
| 22 | React Server Components 的数据流？如何实现"零 JS bundle"的组件？ | ⭐⭐⭐ | RSC 原理、流式渲染 |
四、Vue (vue.md)
约 15 道题
| # | 题目 | 难度 | 考察点 |
|---|---|---|---|
| 1 | Vue 的响应式原理？Vue2 和 Vue3 有什么区别？ | ⭐⭐⭐ | defineProperty vs Proxy |
| 2 | ref 和 reactive 的区别？底层实现有什么不同？ | ⭐⭐ | 响应式 API |
| 3 | Vue 的 Diff 算法？和 React 的 Diff 有什么区别？ | ⭐⭐⭐ | 双端 Diff、最长递增子序列 |
| 4 | computed 和 watch 的区别？computed 的缓存机制？ | ⭐⭐ | 依赖收集 |
| 5 | nextTick 的原理？为什么需要它？ | ⭐⭐ | 异步更新、微任务 |
| 6 | Vue 的编译过程？template → render function 经历了什么？ | ⭐⭐⭐ | 编译器 |
| 7 | v-if 和 v-show 的区别？v-for 和 v-if 为什么不能一起用？ | ⭐ | 指令优先级 |
| 8 | keep-alive 的原理？LRU 缓存策略？ | ⭐⭐ | 组件缓存 |
| 9 | Vue3 的 Teleport/Suspense/Fragment 分别解决什么问题？ | ⭐⭐ | Vue3 新特性 |
| 10 | Pinia 和 Vuex 的区别？为什么推荐 Pinia？ | ⭐⭐ | 状态管理 |
| 11 | Vue 的组件通信方式有几种？各自适用场景？ | ⭐⭐ | 组件设计 |
| 12 | Vue Router 的导航守卫执行顺序？ | ⭐⭐ | 路由 |
| 13 | Vue3 的性能优化：静态提升、Patch Flags、Block Tree 是什么？ | ⭐⭐⭐ | 编译优化 |
| 14 | Vue 的 inject/provide 原理？和 React Context 对比？ | ⭐⭐ | 依赖注入 |
| 15 | 如何设计一个 Vue3 组件库？需要考虑哪些方面？ | ⭐⭐⭐ | 组件库设计 |
五、浏览器与网络 (browser-network.md)
约 15 道题
| # | 题目 | 难度 | 考察点 |
|---|---|---|---|
| 1 | 从输入 URL 到页面显示，经历了什么？（尽量详细） | ⭐⭐⭐ | 全链路 |
| 2 | 强缓存和协商缓存的区别？Cache-Control 有哪些值？ | ⭐⭐ | HTTP 缓存 |
| 3 | ETag 和 Last-Modified 的区别？哪个优先级高？ | ⭐⭐ | 协商缓存 |
| 4 | HTTPS 的握手过程？证书验证？ | ⭐⭐⭐ | TLS、CA |
| 5 | HTTP/1.1 vs HTTP/2 vs HTTP/3 的核心区别？ | ⭐⭐ | 协议演进 |
| 6 | 什么是 CORS？简单请求和预检请求的区别？ | ⭐⭐ | 跨域 |
| 7 | XSS 攻击的类型？如何防御？CSP 是什么？ | ⭐⭐⭐ | 安全 |
| 8 | CSRF 攻击原理？SameSite Cookie 如何防御？ | ⭐⭐ | 安全 |
| 9 | 浏览器的渲染流水线？重排(Reflow)和重绘(Repaint)？ | ⭐⭐ | 渲染引擎 |
| 10 | 浏览器的垃圾回收机制？V8 的分代回收？ | ⭐⭐⭐ | V8、GC |
| 11 | localStorage/sessionStorage/Cookie/IndexedDB 对比 | ⭐ | 存储方案 |
| 12 | WebSocket 和 HTTP 的区别？心跳机制如何实现？ | ⭐⭐ | 长连接 |
| 13 | 什么是 Service Worker？PWA 的核心原理？ | ⭐⭐ | 离线缓存 |
| 14 | 前端性能优化的完整方案？Core Web Vitals 怎么优化？ | ⭐⭐⭐ | 性能 |
| 15 | DNS 解析过程？如何优化？dns-prefetch 怎么用？ | ⭐⭐ | 网络优化 |
六、工程化 (engineering.md)
约 15 道题
| # | 题目 | 难度 | 考察点 |
|---|---|---|---|
| 1 | Vite 为什么比 Webpack 快？原理区别？ | ⭐⭐ | 构建工具 |
| 2 | Webpack 的 Loader 和 Plugin 的区别？执行顺序？ | ⭐⭐ | Webpack 原理 |
| 3 | Webpack 的 HMR（热更新）原理？ | ⭐⭐⭐ | HMR |
| 4 | Tree Shaking 的原理？为什么需要 ESM？sideEffects 字段？ | ⭐⭐⭐ | 构建优化 |
| 5 | 如何编写一个 Babel 插件？AST 转换过程？ | ⭐⭐⭐ | Babel |
| 6 | SplitChunks 的配置策略？如何优化首屏加载？ | ⭐⭐ | 代码分割 |
| 7 | Monorepo 的优缺点？pnpm workspace vs Turborepo vs Nx？ | ⭐⭐ | 工程架构 |
| 8 | CI/CD 流水线如何设计？GitHub Actions 的核心概念？ | ⭐⭐ | 自动化 |
| 9 | npm/pnpm/yarn 的区别？pnpm 为什么快？幽灵依赖问题？ | ⭐⭐ | 包管理 |
| 10 | 什么是 Source Map？各种 devtool 模式的区别？ | ⭐⭐ | 调试 |
| 11 | 微前端是什么？qiankun/Module Federation/iframe 对比？ | ⭐⭐⭐ | 微前端 |
| 12 | 前端监控怎么做？错误采集/性能采集/用户行为？ | ⭐⭐⭐ | 监控体系 |
| 13 | 如何设计一个组件库？构建/文档/测试/发布全流程？ | ⭐⭐⭐ | 组件库 |
| 14 | Docker 在前端部署中的应用？Nginx 配置？ | ⭐⭐ | 部署 |
| 15 | 如何做一个 npm 包的版本管理？Changesets 怎么用？ | ⭐⭐ | 发包 |
七、算法与手写题 (algorithm.md)
约 20 道题，分为手写题 + 算法题
手写题（必须秒写）
| # | 题目 | 难度 |
|---|---|---|
| 1 | 手写 debounce（含 leading/trailing/cancel） | ⭐⭐ |
| 2 | 手写 throttle（含时间戳/定时器/组合版） | ⭐⭐ |
| 3 | 手写 deepClone（处理循环引用/特殊类型） | ⭐⭐⭐ |
| 4 | 手写 flat（数组拍平，支持指定深度） | ⭐⭐ |
| 5 | 手写 curry（柯里化，支持占位符） | ⭐⭐ |
| 6 | 手写 EventEmitter（含 on/off/emit/once） | ⭐⭐ |
| 7 | 手写 Promise.all / Promise.race | ⭐⭐ |
| 8 | 手写 async/await 自动执行器 | ⭐⭐⭐ |
| 9 | 手写 LazyMan（链式调用 + sleep） | ⭐⭐⭐ |
| 10 | 手写并发请求控制器（最大并发数限制） | ⭐⭐⭐ |
算法题（LeetCode 高频）
| # | 题目 | 难度 | 考察点 |
|---|---|---|---|
| 11 | 两数之和 | ⭐ | 哈希表 |
| 12 | 有效的括号 | ⭐ | 栈 |
| 13 | 反转链表 | ⭐ | 链表 |
| 14 | 二叉树的层序遍历 | ⭐⭐ | BFS |
| 15 | 最大子数组和 | ⭐⭐ | 动态规划 |
| 16 | LRU 缓存 | ⭐⭐⭐ | Map + 双向链表 |
| 17 | 合并两个有序数组 | ⭐ | 双指针 |
| 18 | 爬楼梯（扩展到 N 步） | ⭐⭐ | 动态规划 |
| 19 | 全排列 | ⭐⭐ | 回溯 |
| 20 | 接雨水 | ⭐⭐⭐ | 双指针/单调栈 |
八、Node.js / 后端基础 (nodejs.md)
约 15 道题，全栈方向必备，技能图谱中要求熟练
| # | 题目 | 难度 | 考察点 |
|---|---|---|---|
| 1 | Node.js 的事件循环和浏览器的有什么区别？6 个阶段分别是什么？ | ⭐⭐⭐ | 事件循环、libuv |
| 2 | Koa 的洋葱模型是什么？和 Express 的中间件有什么区别？手写实现 compose | ⭐⭐⭐ | 中间件机制 |
| 3 | Node.js 的 Stream 有哪几种？如何用 Stream 处理大文件？pipe 原理？ | ⭐⭐ | Stream、背压 |
| 4 | child_process 的 exec/spawn/fork 区别？cluster 模块怎么用？ | ⭐⭐ | 多进程 |
| 5 | JWT 和 Session 认证的区别？各自的优缺点？Token 刷新机制如何设计？ | ⭐⭐ | 认证鉴权 |
| 6 | OAuth2.0 的四种授权模式？前端 SPA 适合哪种？PKCE 是什么？ | ⭐⭐⭐ | OAuth |
| 7 | RESTful API 的设计原则？如何设计分页/过滤/排序？HATEOAS 是什么？ | ⭐⭐ | API 设计 |
| 8 | SQL 的 JOIN 类型？索引的原理和优化？EXPLAIN 怎么看？ | ⭐⭐ | 数据库 |
| 9 | MongoDB 和 MySQL 各自适用什么场景？ORM（Prisma/TypeORM）的优缺点？ | ⭐⭐ | 数据库选型 |
| 10 | Redis 的常用数据结构？缓存穿透/击穿/雪崩的区别和解决方案？ | ⭐⭐ | Redis、缓存 |
| 11 | Docker 基础：Dockerfile 常用指令？多阶段构建？docker-compose 怎么用？ | ⭐⭐ | 容器化 |
| 12 | Nginx 在前端部署中的作用？反向代理/负载均衡/gzip/缓存如何配置？ | ⭐⭐ | 部署 |
| 13 | Serverless 是什么？Vercel Functions / AWS Lambda 的冷启动问题？ | ⭐⭐ | Serverless |
| 14 | 如何设计一个 RBAC 权限模型？前后端如何配合？ | ⭐⭐⭐ | 权限设计 |
| 15 | Node.js 内存泄漏如何排查？常见的内存泄漏场景？ | ⭐⭐⭐ | 调试、性能 |
九、测试 (testing.md)
约 10 道题，5 年经验的工程师写测试应该是习惯而非负担
| # | 题目 | 难度 | 考察点 |
|---|---|---|---|
| 1 | 单元测试/集成测试/E2E 测试的区别？测试金字塔是什么？ | ⭐ | 测试理论 |
| 2 | Jest / Vitest 的核心 API？describe/it/expect/beforeEach 怎么组织？ | ⭐ | 测试框架 |
| 3 | 如何测试 React Hooks？renderHook 和 act 的作用？ | ⭐⭐ | Hooks 测试 |
| 4 | Testing Library 的核心理念？为什么推荐 getByRole 而不是 getByTestId？ | ⭐⭐ | 组件测试 |
| 5 | Mock 的几种方式？jest.fn() / jest.mock() / jest.spyOn() 的区别？ | ⭐⭐ | Mock 策略 |
| 6 | 如何 Mock 网络请求？MSW（Mock Service Worker）的原理？ | ⭐⭐ | API Mock |
| 7 | 快照测试（Snapshot Testing）的优缺点？什么时候该用/不该用？ | ⭐⭐ | 快照测试 |
| 8 | TDD（测试驱动开发）的流程？Red → Green → Refactor 怎么实践？ | ⭐⭐ | TDD |
| 9 | E2E 测试：Playwright vs Cypress 的区别？如何选型？ | ⭐⭐ | E2E |
| 10 | 测试覆盖率指标（行/分支/函数/语句）分别代表什么？100% 覆盖率有意义吗？ | ⭐⭐ | 测试度量 |
十、前端 AI Agent 方向
这是 2025-2026 年最火的前端新方向，涵盖 AI 基础原理、前端流式交互、RAG、MCP 协议、Agent 架构等。
由于内容量大（61 题），拆分为 3 个子文档，便于分主题深入学习。
10-1. AI 基础与 Agent 原理 (agent-fundamentals.md)
约 15 道题，理解 LLM 和 Agent 的底层机制
| # | 题目 | 难度 | 考察点 |
|---|---|---|---|
| 1 | 什么是 AI Agent？和传统 LLM 应用（Chatbot）有什么本质区别？ | ⭐ | Agent 核心概念 |
| 2 | Agent 的四大核心模块：规划、记忆、工具、反思，分别是什么？ | ⭐⭐ | Agent 架构 |
| 3 | 什么是 ReAct 框架？Thought → Action → Observation 循环怎么工作？ | ⭐⭐ | ReAct、推理+行动 |
| 4 | Chain of Thought (CoT) 和 Tree of Thoughts (ToT) 的区别？ | ⭐⭐ | 推理策略 |
| 5 | Agent 的记忆管理：短期记忆 / 长期记忆 / 工作记忆的区别和实现方式？ | ⭐⭐ | 记忆机制 |
| 6 | 什么是 Function Calling（工具调用）？OpenAI 的 tools 参数怎么用？ | ⭐⭐ | Function Calling |
| 7 | Prompt Engineering 的核心技巧：System Prompt / Few-Shot / CoT 如何设计？ | ⭐⭐ | 提示词工程 |
| 8 | 什么是幻觉（Hallucination）？在 Agent 场景下如何缓解？ | ⭐⭐ | 幻觉、可靠性 |
| 9 | Temperature 和 Top-P 参数对模型输出的影响？什么场景用什么值？ | ⭐ | 模型参数 |
| 10 | Token 是什么？上下文窗口限制怎么处理？长文本的压缩策略？ | ⭐⭐ | Token、上下文管理 |
| 11 | 主流大模型对比：GPT-4o / Claude / Gemini / 通义千问 / Kimi 各自的特点和适用场景？ | ⭐ | 模型选型 |
| 12 | 什么是多智能体（Multi-Agent）系统？常见的协作模式有哪些？ | ⭐⭐⭐ | 多 Agent 架构 |
| 13 | Plan-and-Execute Agent vs ReAct Agent 的区别？各自适合什么场景？ | ⭐⭐ | Agent 类型 |
| 14 | 如何评估一个 Agent 系统的好坏？有哪些关键指标？ | ⭐⭐ | 评测指标 |
| 15 | Agent 最大的瓶颈是什么？工具调用准确性 / 长期记忆 / 错误恢复如何解决？ | ⭐⭐⭐ | Agent 挑战 |
10-2. 前端 AI 交互与工程实践 (agent-frontend.md)
约 25 道题，前端工程师的核心战场：流式渲染、Chat UI、状态管理、性能优化
| # | 题目 | 难度 | 考察点 |
|---|---|---|---|
| 1 | SSE（Server-Sent Events）和 WebSocket 的区别？AI 流式输出场景如何选择？ | ⭐⭐ | 流式通信 |
| 2 | 如何用 Fetch API + ReadableStream 实现流式数据接收？手写一个流式解析器 | ⭐⭐⭐ | 流式实现 |
| 3 | AI 流式输出的"打字机"效果如何实现？性能优化方案（批量更新、requestAnimationFrame）？ | ⭐⭐ | 打字机效果 |
| 4 | Markdown 流式渲染的截断问题：代码块 / 公式被截断导致闪烁怎么解决？ | ⭐⭐⭐ | Markdown 渲染 |
| 5 | 如何实现 Markdown 实时渲染引擎 + 代码高亮？marked + highlight.js 的集成方案？ | ⭐⭐ | Markdown、代码高亮 |
| 6 | AI 对话界面的"自动滚动到底部"功能，如何兼顾用户手动向上滚动查看历史？ | ⭐⭐ | 滚动控制 |
| 7 | 长对话列表的虚拟滚动实现？在 AI 场景下与传统虚拟列表有什么不同？ | ⭐⭐⭐ | 虚拟滚动 |
| 8 | React 中如何处理流式响应与状态管理？useChat Hook 的设计思路？ | ⭐⭐ | React + AI |
| 9 | Vue 中流式响应与响应式系统如何配合？shallowRef + triggerRef 的优化方案？ | ⭐⭐ | Vue + AI |
| 10 | AI 对话的状态管理架构设计：消息列表 / 加载状态 / 连接状态 / Token 用量如何组织？ | ⭐⭐ | 状态管理 |
| 11 | Vercel AI SDK 的核心 API？useChat / useCompletion / streamText 怎么用？ | ⭐⭐ | Vercel AI SDK |
| 12 | 什么是 Generative UI（生成式 UI）？如何让 Agent 返回 React 组件而不只是文本？ | ⭐⭐⭐ | 生成式 UI |
| 13 | Function Calling 的前端配合流程：解析工具调用指令 → 执行 → 回传结果的完整实现？ | ⭐⭐⭐ | 前端工具调用 |
| 14 | AI 场景下的敏感操作拦截：Agent 想调用"删除订单"等危险操作时，前端如何守门？ | ⭐⭐ | 安全拦截 |
| 15 | AI 聊天界面的离线支持方案？IndexedDB 存储对话历史？断线重连机制？ | ⭐⭐ | 离线、持久化 |
| 16 | 如何处理 AI 响应中的多模态内容？文本 / 图片 / 表格 / 代码 / LaTeX 公式的混合渲染？ | ⭐⭐⭐ | 多模态渲染 |
| 17 | AI 应用中的并发请求控制：多个对话窗口 / 同时发送多条消息如何管理？ | ⭐⭐ | 并发控制 |
| 18 | AI 应用的错误处理策略：网络超时 / 模型限流(429) / 内容审核拒绝如何优雅处理？ | ⭐⭐ | 错误处理 |
| 19 | 如何实现 AI 对话的"停止生成"功能？AbortController 的使用？ | ⭐⭐ | 取消请求 |
| 20 | AI 应用的前端性能监控：首 Token 时间(TTFT) / Token 生成速度 / 完整响应时间如何采集？ | ⭐⭐⭐ | 性能指标 |
| 21 | Prompt 模板管理：如何在前端实现模板分离、变量注入、版本控制？ | ⭐⭐ | Prompt 管理 |
| 22 | AI 应用的 A/B 测试：如何对比不同 Prompt / 模型 / 参数的效果？ | ⭐⭐ | A/B 测试 |
| 23 | 如何实现一个支持插件的 Chat 组件库？消息类型扩展 / 自定义渲染器的设计？ | ⭐⭐⭐ | 组件库设计 |
| 24 | AI 应用的国际化挑战：多语言 Prompt / 流式内容的 RTL 布局？ | ⭐⭐ | 国际化 |
| 25 | 前端如何实现本地 RAG？浏览器端向量检索（Voy/Wasm）减少 Token 消耗？ | ⭐⭐⭐ | 浏览器端 RAG |
10-3. RAG、MCP 协议与 Skills (agent-rag-mcp.md)
约 21 道题，RAG 知识增强 + MCP 新一代工具协议 + Skills 技能插件体系
| # | 题目 | 难度 | 考察点 |
|---|---|---|---|
| 1 | 什么是 RAG（检索增强生成）？完整流程是什么？和直接 Prompt 有什么区别？ | ⭐⭐ | RAG 基础 |
| 2 | RAG 中的文本切片（Chunking）策略有哪些？Chunk Size 怎么选？ | ⭐⭐ | 文本切片 |
| 3 | 什么是 Embedding？常见的 Embedding 模型有哪些？如何评估质量？ | ⭐⭐ | 向量嵌入 |
| 4 | 向量数据库对比：FAISS / Milvus / ChromaDB / Pinecone / Weaviate 各自特点？ | ⭐⭐ | 向量数据库 |
| 5 | RAG 检索不准怎么办？混合检索（向量 + BM25 关键词）+ Rerank 重排的方案？ | ⭐⭐⭐ | 检索优化 |
| 6 | 什么是 GraphRAG？它解决了传统 RAG 的什么问题？ | ⭐⭐⭐ | GraphRAG |
| 7 | 什么是 HyDE（假设性文档嵌入）？如何提升复杂问题的召回率？ | ⭐⭐⭐ | 高级 RAG |
| 8 | 如何评估 RAG 系统的效果？RAGAS 框架的核心指标（忠实度 / 相关性 / 召回率）？ | ⭐⭐ | RAG 评估 |
| 9 | 什么是 MCP（Model Context Protocol）？为什么说它是"AI 的 USB-C 接口"？ | ⭐⭐ | MCP 概念 |
| 10 | MCP 和 OpenAI Function Calling 的区别？为什么需要统一协议？ | ⭐⭐⭐ | MCP vs FC |
| 11 | MCP 的完整调用流程？初始化 → 能力发现 → 请求构造 → 执行 → 结果返回的 7 个阶段？ | ⭐⭐⭐ | MCP 流程 |
| 12 | MCP 的传输协议：Stdio / SSE / Streamable HTTP / WebSocket 各自适用场景？ | ⭐⭐ | MCP 传输 |
| 13 | 前端如何对接 MCP？用 Hook 封装 MCP 工具调用？流式 UI 更新？ | ⭐⭐⭐ | 前端 + MCP |
| 14 | MCP 的安全机制：权限控制 / 参数校验 / 沙箱隔离怎么设计？Prompt Injection 如何防御？ | ⭐⭐⭐ | MCP 安全 |
| 15 | LangChain.js / LangGraph 的核心概念？前端如何使用这些框架构建 Agent？ | ⭐⭐ | AI 框架 |
| 16 | 什么是 Skill（技能插件）？和 Function / Tool 有什么区别？为什么说 Skill 是 Agent 的"原子能力单元"？ | ⭐⭐ | Skill 概念 |
| 17 | Skill 的 Schema 如何设计？JSON Schema 定义输入输出参数、描述、约束的最佳实践？模型如何根据 Schema 选择 Skill？ | ⭐⭐⭐ | Skill Schema 设计 |
| 18 | Skill 的注册与动态发现机制？/list_skills 能力协商流程？如何实现 Skill 的热插拔（新增/下线不重启 Agent）？ | ⭐⭐⭐ | Skill 注册与发现 |
| 19 | 多 Skill 编排与组合：Agent 如何规划调用多个 Skill 完成复杂任务？串行 / 并行 / 条件分支的调度策略？ | ⭐⭐⭐ | Skill 编排 |
| 20 | 如何设计一个前端 Skill 插件系统？Skill 执行状态的可视化（Loading / 执行中 / 成功 / 失败）？Skill 结果的动态 UI 渲染？ | ⭐⭐⭐ | 前端 Skill 集成 |
| 21 | Skill 调用失败的容错机制：重试策略 / 降级方案 / 超时控制？如何避免 Skill 调用的"幻觉"（模型编造不存在的 Skill）？ | ⭐⭐⭐ | Skill 容错与可靠性 |
十一、AI 效能与工程师素养 (ai-literacy-and-mindset.md)
约 30 道题，考察候选人的 AI 使用深度、好奇心、探索欲和工程师思维方式。
这些"软题"往往是 5 年经验面试中区分"优秀"和"卓越"的关键。 与传统技术题不同，这类题没有标准答案，解答以引导型为主：面试官隐藏意图 → 好答案特征 vs 差答案特征 → 示例回答 → 追问方向。
11-1. AI 认知与使用程度
考察候选人对 AI 工具的实际使用深度和思考深度，而非"知不知道 ChatGPT"
| # | 题目 | 难度 | 考察点 |
|---|---|---|---|
| 1 | 你日常开发中使用哪些 AI 工具？能具体说说它们分别在什么环节帮到你了？ | ⭐ | AI 工具使用广度 |
| 2 | 用 AI 辅助编码时，你是如何 Review AI 生成的代码的？有没有踩过坑？ | ⭐⭐ | AI 代码质量把控 |
| 3 | Copilot / Cursor / Trae 这类 AI IDE 的核心差异？你选择工具的标准是什么？ | ⭐⭐ | 工具选型思考 |
| 4 | 你用 AI 做过最复杂的一件事是什么？效果如何？有什么局限性？ | ⭐⭐ | 深度使用经验 |
| 5 | AI 写代码的"幻觉"问题你怎么看？实际工作中如何避免被误导？ | ⭐⭐ | AI 局限性认知 |
| 6 | 如何用 AI 提升 Code Review 效率？你会把什么类型的 Review 交给 AI，什么不会？ | ⭐⭐ | AI + 工程流程 |
| 7 | 你有没有用 AI 辅助做过技术方案设计或架构决策？效果怎么样？ | ⭐⭐⭐ | AI + 架构思维 |
| 8 | Prompt Engineering 在日常开发中的应用：你是怎么写 Prompt 让 AI 生成更精准的代码的？ | ⭐⭐ | Prompt 实战 |
| 9 | AI 会取代前端工程师吗？你认为未来 3 年前端工程师的核心竞争力是什么？ | ⭐⭐⭐ | 行业认知 |
| 10 | 你团队中有推动 AI 工具落地的经验吗？遇到了什么阻力？怎么解决的？ | ⭐⭐⭐ | AI 落地推动力 |
| 11 | 如何评估 AI 工具对团队生产力的实际提升？有没有量化的方法？ | ⭐⭐ | 效能度量 |
| 12 | 如果让你给团队制定一套 AI 辅助开发规范，你会怎么设计？ | ⭐⭐⭐ | AI 工程化 |
| 13 | AI 生成代码的安全隐患有哪些？如何建立团队的 AI 代码安全审查流程？ | ⭐⭐⭐ | AI 安全意识 |
| 14 | 你怎么看 AI 对初级工程师成长的影响？如果你带团队，会如何引导新人使用 AI？ | ⭐⭐ | 技术 Leader 视角 |
| 15 | 不同类型的开发任务（新功能 / Bug 修复 / 重构 / 性能优化），AI 的适用程度分别怎样？ | ⭐⭐ | AI 场景判断力 |
11-2. 好奇心、探索欲与工程师素养
考察思维方式、学习能力、技术视野——区分"螺丝钉"和"技术驱动者"
| # | 题目 | 难度 | 考察点 |
|---|---|---|---|
| 1 | 最近半年你关注到的最有意思的前端技术/工具是什么？为什么觉得有意思？ | ⭐ | 技术敏感度 |
| 2 | 你有自己的 Side Project 或者开源贡献吗？动机是什么？ | ⭐⭐ | 自驱力 |
| 3 | 你是怎么学习一门新技术的？能用一个具体的例子说说你的学习路径？ | ⭐⭐ | 学习方法论 |
| 4 | 说一个你在工作中主动发起的技术改进，不是被要求的，是你自己想做的 | ⭐⭐ | 主动性 |
| 5 | 你怎么看待"技术债务"？遇到遗留代码你的第一反应是什么？ | ⭐⭐ | 工程素养 |
| 6 | 前端的边界在哪里？你觉得前端工程师应该往什么方向扩展能力？ | ⭐⭐ | 技术视野 |
| 7 | 你有没有读过某个开源库的源码？选它的原因是什么？收获了什么？ | ⭐⭐ | 源码阅读习惯 |
| 8 | 技术选型时你考虑哪些因素？有没有一次选型后来证明是错的？你怎么处理的？ | ⭐⭐⭐ | 决策能力 |
| 9 | 你觉得一个优秀的前端工程师和一个普通的前端工程师，核心差别在哪里？ | ⭐⭐ | 自我认知 |
| 10 | 如果给你一周的自由学习时间，你会去研究什么？ | ⭐ | 内在驱动力 |
| 11 | 说一个你最有成就感的技术项目，你在其中承担什么角色？做了哪些关键决策？ | ⭐⭐ | 项目深度 + 决策力 |
| 12 | 遇到一个你完全不了解的技术领域（比如 WebGL、Rust、AI），你会怎么在 2 周内快速上手并产出？ | ⭐⭐⭐ | 快速学习能力 |
| 13 | 你和同事在技术方案上产生分歧怎么办？能举一个实际的例子吗？ | ⭐⭐ | 沟通协作 |
| 14 | 如何衡量前端项目的技术健康度？如果接手一个"烂摊子"项目，你的前 3 步是什么？ | ⭐⭐⭐ | 工程判断力 |
| 15 | 你关注哪些技术社区/信息源？怎么筛选有价值的技术信息？如何避免"信息焦虑"？ | ⭐ | 信息获取能力 |