主题
5 年前端工程师技能图谱
作为一名 5 年经验的前端工程师，正在向全栈方向发展。本文档梳理了应当掌握的核心技能及其深度要求。
🟢 已掌握 · 🟡 需加强 · 🔴 待学习 （按自身情况标注）
一、JavaScript / TypeScript
掌握程度：精通
这是安身立命之本，5 年经验应该做到源码级理解，而不只是会用。
| 技能点 | 要求程度 | 说明 | 文档 |
|---|---|---|---|
| ES6+ 全部特性 | 精通 | 解构、展开、Promise、async/await、Proxy、Reflect、Symbol、Iterator、Generator 等 | 详细文档 |
| 原型链与继承 | 精通 | 能手写实现 new、instanceof、Object.create，理解原型链查找机制 | 详细文档 |
| 闭包与作用域 | 精通 | 理解词法作用域、执行上下文栈、变量提升、暂时性死区 | 详细文档 |
| 事件循环 | 精通 | 宏任务/微任务的执行顺序，requestAnimationFrame、requestIdleCallback 的时机 | 详细文档 |
| Promise 原理 | 精通 | 能手写 Promise A+ 规范实现，理解微任务队列 | 详细文档 |
| TypeScript | 精通 | 泛型、条件类型、映射类型、模板字面量类型、infer 推断、类型体操 | 详细文档 |
| 模块化 | 熟练 | ESM vs CommonJS 的差异，循环引用处理，Tree Shaking 原理 | 详细文档 |
| 函数式编程 | 熟练 | 纯函数、柯里化、组合、Monad 基本概念 | 详细文档 |
| 设计模式 | 熟练 | 观察者、发布订阅、策略、工厂、单例、代理等常用模式 | 详细文档 |
自检问题
- 能否手写一个完整的
Promise.all/Promise.race？ - 给一段包含
setTimeout+Promise+async/await的代码，能否准确说出执行顺序？ - 能否用 TypeScript 实现一个类型安全的
EventEmitter？
二、CSS / 布局
掌握程度：熟练
CSS 不只是"能写出来"，而是要知道为什么这样写。
| 技能点 | 要求程度 | 说明 | 文档 |
|---|---|---|---|
| Flex 布局 | 精通 | 各种对齐方式、flex-grow/shrink/basis 的计算逻辑 | 详细文档 |
| Grid 布局 | 熟练 | grid-template、grid-area、响应式栅格 | 详细文档 |
| BFC / 层叠上下文 | 精通 | 理解 BFC 触发条件、清除浮动原理、z-index 层叠规则 | 详细文档 |
| 响应式设计 | 熟练 | 媒体查询、容器查询、clamp()、移动端适配方案（rem/vw） | 详细文档 |
| CSS 动画 | 熟练 | transition、animation、transform、GPU 加速、will-change | 详细文档 |
| CSS 预处理器 | 熟练 | Sass/Less 变量、mixin、函数、模块化 | 详细文档 |
| CSS-in-JS | 了解 | styled-components、Emotion、Tailwind CSS 的优劣对比 | 详细文档 |
| CSS 新特性 | 了解 | @layer、@container、color-mix()、has()、Subgrid | 详细文档 |
自检问题
- 如何实现一个不定宽高元素的水平垂直居中（至少 3 种方式）？
- 为什么
transform动画比left/top动画性能好？ - 什么是 BFC？如何触发？解决了什么问题？
三、框架（React / Vue）
掌握程度：至少精通一个，另一个熟练
5 年经验，不能只会"用"框架，要理解框架为什么这样设计。
React
| 技能点 | 要求程度 | 说明 | 文档 |
|---|---|---|---|
| Hooks 全家桶 | 精通 | useState、useEffect、useRef、useMemo、useCallback、自定义 Hook | mini-react 源码 |
| 组件设计模式 | 精通 | 高阶组件、Render Props、Compound Components、受控/非受控 | mini-react 源码 |
| 状态管理 | 熟练 | Context、Redux/Zustand/Jotai，理解各方案的适用场景 | mini-react 源码 |
| React 原理 | 熟练 → 精通 | Fiber 架构、Reconciliation、合成事件、批量更新、并发模式 | mini-react 源码 |
| React Router | 熟练 | v6 API、嵌套路由、路由守卫、懒加载 | |
| Next.js / SSR | 熟练 | SSR/SSG/ISR 的区别、App Router、Server Components | |
| 性能优化 | 熟练 | React.memo、虚拟列表、代码分割、Suspense、Profiler | mini-react 源码 |
Vue
| 技能点 | 要求程度 | 说明 | 文档 |
|---|---|---|---|
| Vue3 Composition API | 熟练 | ref、reactive、computed、watch、watchEffect | mini-vue 源码 |
| 响应式原理 | 熟练 | Proxy 实现、依赖收集与触发、effect 函数 | mini-vue 源码 |
| Vue Router / Pinia | 熟练 | 路由导航守卫、状态持久化 | |
| Vue3 源码 | 了解 → 熟练 | 编译器、渲染器、响应式系统的核心逻辑 | mini-vue 源码 |
自检问题
useEffect的依赖数组为什么不能放在条件语句里？- React 的 Fiber 架构解决了什么问题？
- Vue 的
ref和reactive底层有什么区别？
四、工程化
掌握程度：熟练
工程化能力是区分"初级"和"高级"的重要指标。
| 技能点 | 要求程度 | 说明 | 文档 |
|---|---|---|---|
| Vite | 精通 | 原理（ESM 开发 + Rollup 生产）、插件开发、配置优化 | 详细文档 |
| Webpack | 熟练 | Loader/Plugin 机制、HMR 原理、SplitChunks、Tree Shaking | 详细文档 |
| Babel / SWC | 熟练 | AST 转换流程、自定义插件、preset 配置 | 详细文档 |
| ESLint / Prettier | 熟练 | 自定义规则、配置共享、与 CI 集成 | 详细文档 |
| Monorepo | 熟练 | pnpm workspace、Turborepo/Nx、包版本管理 | 详细文档 |
| CI/CD | 熟练 | GitHub Actions、自动化测试/构建/部署流水线 | 详细文档 |
| 包管理 | 熟练 | npm/pnpm/yarn 的区别、peerDependencies、lock 文件原理 | 详细文档 |
| 发包 | 了解 | npm 发包流程、Changesets、语义化版本 | 详细文档 |
自检问题
- Vite 为什么比 Webpack 快？生产环境为什么用 Rollup？
- 如何编写一个 Babel 插件，自动移除
console.log？ - Monorepo 中 packages 之间如何相互引用？
五、浏览器与网络
掌握程度：熟练
前端归根到底是跟浏览器打交道。
| 技能点 | 要求程度 | 说明 | 文档 |
|---|---|---|---|
| 浏览器渲染流程 | 精通 | DOM → CSSOM → Render Tree → Layout → Paint → Composite | 详细文档 |
| HTTP/HTTPS | 熟练 | 状态码、缓存策略（强缓存/协商缓存）、CORS、Cookie/Session | 详细文档 |
| HTTP/2 & HTTP/3 | 了解 | 多路复用、头部压缩、QUIC 协议 | 详细文档 |
| 性能优化 | 精通 | Core Web Vitals (LCP/FID/CLS)、性能指标采集、优化手段 | 详细文档 |
| 安全 | 熟练 | XSS、CSRF、CSP、HTTPS 原理、同源策略 | 详细文档 |
| 存储 | 熟练 | Cookie / localStorage / sessionStorage / IndexedDB 的区别与适用场景 | 详细文档 |
| Service Worker | 了解 | PWA、离线缓存、消息推送 | 详细文档 |
| WebSocket | 熟练 | 与 HTTP 的区别、心跳机制、断线重连 | 详细文档 |
自检问题
- 从输入 URL 到页面显示，经历了哪些步骤？（尽量详细）
ETag和Last-Modified有什么区别？- 如何防御 XSS 攻击？CSP 是什么？
六、前端进阶领域
掌握程度：了解 → 熟练
这些是现代前端工程师的能力延伸方向，根据团队和业务需要有选择地深入。
微前端
| 技能点 | 要求程度 | 说明 | 文档 |
|---|---|---|---|
| 微前端概念与架构 | 熟练 | 理解微前端的核心思想：独立开发、独立部署、技术栈无关 | 详细文档 |
| qiankun | 熟练 | 基于 single-spa 的微前端方案，沙箱机制、样式隔离、应用通信 | 详细文档 |
| Module Federation | 熟练 | Webpack 5 / Vite 的模块联邦，运行时共享依赖、远程模块加载 | 详细文档 |
| 无界 / micro-app | 了解 | 基于 WebComponent / iframe 的新一代微前端方案 | 详细文档 |
| JS 沙箱 | 熟练 | Proxy 沙箱、快照沙箱的实现原理与区别 | 详细文档 |
| 样式隔离 | 熟练 | Shadow DOM、CSS Scoping、动态样式表切换 | 详细文档 |
跨端开发
| 技能点 | 要求程度 | 说明 | 文档 |
|---|---|---|---|
| React Native | 了解 | Bridge 架构 → 新架构（Fabric + TurboModules）、原生模块交互 | 详细文档 |
| Flutter | 了解 | Dart 语言基础、Widget 体系、与原生通信（Platform Channel） | 详细文档 |
| Taro / uni-app | 了解 | 编译时 vs 运行时跨端方案的差异，小程序开发 | 详细文档 |
| Electron / Tauri | 了解 | 桌面端跨平台方案，主进程/渲染进程架构，Tauri 的 Rust 优势 | 详细文档 |
Web 性能监控 & 可观测性
| 技能点 | 要求程度 | 说明 | 文档 |
|---|---|---|---|
| 性能指标采集 | 熟练 | Performance API、PerformanceObserver、LCP/FCP/TTFB/CLS 采集 | 详细文档 |
| 错误监控 | 熟练 | window.onerror、unhandledrejection、Source Map 还原、Sentry 集成 | 详细文档 |
| 自研监控 SDK | 了解 → 熟练 | 数据采集、上报策略（批量/采样/节流）、beacon API | 详细文档 |
| 用户行为追踪 | 了解 | PV/UV、点击热力图、用户路径分析、埋点方案（声明式/指令式） | 详细文档 |
| 日志平台 | 了解 | ELK / Grafana / 自研日志平台的基本概念 | 详细文档 |
WebAssembly
| 技能点 | 要求程度 | 说明 | 文档 |
|---|---|---|---|
| Wasm 基本概念 | 了解 | 二进制指令格式、与 JS 的互操作、适用场景（计算密集型任务） | 详细文档 |
| 编译工具链 | 了解 | Emscripten（C/C++ → Wasm）、wasm-pack（Rust → Wasm） | 详细文档 |
| 实际应用场景 | 了解 | 图片/视频处理（FFmpeg.wasm）、PDF 渲染、加密算法、游戏引擎 | 详细文档 |
| WASI | 了解 | WebAssembly System Interface，Wasm 脱离浏览器运行的标准 | 详细文档 |
自检问题
- 微前端的 JS 沙箱有哪几种实现方式？各自的优缺点？
- Module Federation 和 qiankun 的本质区别是什么？
- 如何从 0 到 1 搭建一个前端性能监控平台？需要采集哪些指标？
- WebAssembly 相比 JavaScript 在什么场景下有明显优势？
AI & Agent
🔥 2024-2025 年最重要的前端新方向。前端是 AI 能力触达用户的最后一环，掌握 Agent 开发能力是差异化竞争力的关键。
热门概念
| 概念 | 说明 |
|---|---|
| LLM（大语言模型） | Token、Temperature、Top-P、上下文窗口（Context Window）、幻觉（Hallucination） |
| Agentic AI | 具备自主决策、工具调用、多步推理能力的 AI 系统，区别于简单的 Chat Completion |
| RAG（检索增强生成） | 将外部知识注入 LLM 的技术路线：文档分块 → 向量化 → 检索 → 注入上下文 → 生成 |
| Function Calling / Tool Use | LLM 通过结构化输出调用外部函数/API，是 Agent 行动的基础能力 |
| Structured Output | 约束 LLM 输出为 JSON Schema、Zod Schema 等结构化格式，提升可靠性 |
| Streaming / SSE | 流式响应，前端逐 Token 渲染，提升用户体验的核心技术 |
| Embedding & 向量数据库 | 文本向量化、语义检索，常用 Pinecone / Milvus / pgvector |
| Multimodal | 多模态输入输出：文本、图片、音频、视频的理解与生成 |
| Inference-time Compute | 推理时计算，如 CoT（Chain of Thought）、o1/o3 系列模型的"深度思考"能力 |
| Agent Skills | 模块化的 Agent 能力包（SKILL.md），将领域知识/工作流打包为可复用技能，Agent 按上下文自动加载 |
| Agentic Coding | AI 驱动的编码范式，Cursor / Claude Code / Copilot / Windsurf 等工具的核心工作模式 |
Prompt 工程
| 技能点 | 要求程度 | 说明 | 文档 |
|---|---|---|---|
| Prompt 基础技巧 | 熟练 | 角色设定、任务描述、输出格式约束、少样本提示（Few-shot） | 详细文档 |
| 高级 Prompt 策略 | 熟练 | 思维链（CoT）、思维树（ToT）、自洽性（Self-Consistency）、ReAct 提示 | 详细文档 |
| System Prompt 设计 | 熟练 | 系统指令分区（instructions / constraints / examples）、防注入策略 | 详细文档 |
| Prompt 模板工程 | 了解 | 变量插值、条件分支、Prompt 版本管理与 A/B 测试 | 详细文档 |
上下文工程（Context Engineering）
| 技能点 | 要求程度 | 说明 | 文档 |
|---|---|---|---|
| 上下文工程 vs Prompt 工程 | 熟练 | Prompt 工程关注"措辞"，上下文工程关注"信息架构"——管理 LLM 看到的一切信息 | 详细文档 |
| 上下文窗口管理 | 熟练 | Token 预算分配、对话历史压缩/摘要、滑动窗口策略 | 详细文档 |
| 动态上下文组装 | 熟练 | 根据用户意图动态检索、拼装系统指令 + 工具定义 + 历史 + 外部知识 | 详细文档 |
| 记忆系统 | 了解 → 熟练 | 短期记忆（对话历史）、长期记忆（用户偏好/知识库）、工作记忆（Scratchpad） | 详细文档 |
| 上下文裁剪策略 | 了解 | 骨架裁剪（Skeleton Trimming）、相关性优先选择、分阶段上下文注入 | 详细文档 |
| 防止上下文腐化 | 了解 | Context Rot 问题，动态信息应检索而非硬编码，保持上下文新鲜度 | 详细文档 |
Agent 设计模式
| 技能点 | 要求程度 | 说明 | 文档 |
|---|---|---|---|
| ReAct 模式 | 熟练 | Reasoning + Acting，最主流的 Agent 架构：思考 → 调用工具 → 观察 → 继续推理 | 详细文档 |
| Plan-and-Execute | 了解 | 先规划任务列表，再逐步执行，适合复杂多步任务 | 详细文档 |
| 反思模式（Reflection） | 了解 | Agent 自我评估输出质量，循环改进直到满足标准 | 详细文档 |
| 多 Agent 协作 | 了解 | 多个专业 Agent 分工协作（Handoff / Orchestrator / Supervisor 模式） | 详细文档 |
| 工具设计原则 | 熟练 | 工具描述清晰、参数无歧义、错误信息友好、工具集精简（避免选择困难） | 详细文档 |
| 人机协作（Human-in-the-Loop） | 了解 | Agent 在关键节点请求人类确认/审批，平衡自动化与可控性 | 详细文档 |
协议与标准
| 技能点 | 要求程度 | 说明 | 文档 |
|---|---|---|---|
| MCP（Model Context Protocol） | 熟练 | Anthropic 提出的开放标准，统一 Agent 与工具/数据源的连接方式（"AI 的 USB-C"） | 详细文档 |
| A2A（Agent-to-Agent） | 了解 | Google 推出的 Agent 间通信协议，跨平台 Agent 协作、任务委托 | 详细文档 |
| OpenAI Function Calling | 熟练 | 结构化工具调用规范，定义函数 name/description/parameters | 详细文档 |
| MCP Server 开发 | 了解 → 熟练 | 用 TypeScript 实现 MCP Server，暴露工具/资源给 Agent 使用 | 详细文档 |
| Agent Skills 标准 | 熟练 | Anthropic 推出的开放标准，SKILL.md 文件格式，通过 npx skills CLI 安装，跨工具复用 | 详细文档 |
| Skills 开发 | 了解 → 熟练 | 编写自定义 SKILL.md（元数据 + 指令 + 脚本），为团队/项目沉淀可复用的 Agent 能力包 | 详细文档 |
AI SDK & 开发框架
| 技能点 | 要求程度 | 说明 | 文档 |
|---|---|---|---|
| Vercel AI SDK | 熟练 | 统一的 LLM API 封装、useChat / useCompletion Hooks、流式 UI、工具调用 | 详细文档 |
| LangChain.js | 了解 → 熟练 | Chain 编排、Tool 注册、Memory 管理、与 RAG 流程集成 | 详细文档 |
| LangGraph | 了解 | 基于图的 Agent 编排框架，支持循环、条件分支、状态机 | 详细文档 |
| OpenAI SDK | 熟练 | Chat Completions API、Assistants API、Function Calling、Streaming | 详细文档 |
| Prompt 管理工具 | 了解 | LangSmith / Promptfoo / Helicone，Prompt 版本管理、评测与可观测性 | 详细文档 |
AI 交互与前端实现
| 技能点 | 要求程度 | 说明 | 文档 |
|---|---|---|---|
| 流式渲染 | 精通 | SSE / ReadableStream 处理、逐 Token 渲染、打字机效果、中断/取消 | 详细文档 |
| 对话式 UI | 熟练 | 消息列表、Markdown 渲染、代码高亮、思考过程折叠、工具调用状态展示 | 详细文档 |
| Generative UI | 了解 → 熟练 | Agent 根据推理结果动态生成 UI 组件（React Server Components + AI SDK） | 详细文档 |
| 乐观更新 & 状态管理 | 熟练 | Agent 多轮对话状态、工具调用中间态、错误重试、消息持久化 | 详细文档 |
| AI 应用安全 | 了解 | Prompt 注入防御、输出过滤、敏感信息脱敏、用量限制与鉴权 | 详细文档 |
自检问题
- Prompt 工程和上下文工程的核心区别是什么？在实际 Agent 开发中如何配合使用？
- ReAct 模式的工作流程是什么？与 Plan-and-Execute 模式相比各有什么优劣？
- MCP 协议解决了什么问题？如何用 TypeScript 实现一个 MCP Server？
- 如何在前端实现一个支持流式渲染 + 工具调用状态展示的 Chat UI？
- RAG 的完整流程是什么？前端在其中承担什么角色？
- 什么是 Context Window 管理？当对话历史超出上下文窗口限制时如何处理？
- Agent Skills 和 MCP 分别解决什么问题？Skills 与 Rules/Instructions 有什么区别？
七、Node.js / 后端基础
掌握程度：熟练（全栈方向必备）
| 技能点 | 要求程度 | 说明 | 文档 |
|---|---|---|---|
| Node.js 核心模块 | 熟练 | fs、path、http、stream、child_process | 详细文档 |
| Express / Koa / Nest.js | 熟练 | 中间件机制、路由、错误处理、参数校验 | 详细文档 |
| 数据库 | 熟练 | MySQL/PostgreSQL 基础 SQL、MongoDB、ORM（Prisma/TypeORM） | 详细文档 |
| RESTful API 设计 | 熟练 | 资源命名、HTTP 方法语义、分页/过滤/排序 | 详细文档 |
| 认证鉴权 | 熟练 | JWT、OAuth2.0、Session、RBAC 权限模型 | 详细文档 |
| 数据库设计 | 熟练 | 表结构范式、索引原理与优化（B+树）、事务隔离级别、慢查询分析 | 详细文档 |
| Redis | 熟练 | 缓存策略（穿透/击穿/雪崩）、Session 存储、分布式锁、常用数据结构 | 详细文档 |
| 消息队列 | 了解 | RabbitMQ / Kafka 基本概念，生产者-消费者模型、消息可靠性保证 | 详细文档 |
| 微服务基础 | 了解 | 服务注册与发现、API Gateway、服务间通信（gRPC/HTTP）、熔断与限流 | 详细文档 |
| 日志 & 监控 | 了解 | Winston / Pino 日志库、日志分级、ELK 日志平台基础、健康检查 | 详细文档 |
| Docker | 了解 | Dockerfile 编写、docker-compose、容器部署基础、多阶段构建 | 详细文档 |
| Serverless | 了解 | Vercel Functions / AWS Lambda / Cloudflare Workers | 详细文档 |
自检问题
- Koa 的洋葱模型是什么？与 Express 中间件有何不同？
- JWT 和 Session 认证各自的优缺点？
- 如何设计一个 RESTful API 的分页方案？
- 数据库索引的底层数据结构是什么？为什么 MySQL 使用 B+ 树而不是 B 树？
- Redis 缓存穿透、缓存击穿、缓存雪崩分别是什么？如何防御？
- 消息队列如何保证消息不丢失？
八、测试
掌握程度：熟练
5 年经验的工程师，写测试应该是习惯，而非负担。
| 技能点 | 要求程度 | 说明 | 文档 |
|---|---|---|---|
| 单元测试 | 熟练 | Vitest / Jest，测试纯函数、Hooks、工具方法 | 详细文档 |
| 组件测试 | 熟练 | Testing Library、模拟事件、快照测试 | 详细文档 |
| E2E 测试 | 了解 | Playwright / Cypress 基本使用 | 详细文档 |
| Mock | 熟练 | 接口 Mock、模块 Mock、Timer Mock | 详细文档 |
| TDD / BDD | 了解 | 测试驱动开发的理念与实践 | 详细文档 |
九、算法与数据结构
掌握程度：熟练
不需要刷到 LeetCode Hard，但中等难度应该能解。
| 技能点 | 要求程度 | 说明 | 文档 |
|---|---|---|---|
| 数组 / 链表 / 栈 / 队列 | 精通 | 基本操作、常见题型 | 详细文档 |
| 哈希表 / Set / Map | 精通 | 两数之和类型题 | 详细文档 |
| 二叉树 | 熟练 | 遍历（前/中/后/层序）、DFS/BFS | 详细文档 |
| 排序算法 | 熟练 | 快排、归并、堆排，时间复杂度分析 | 详细文档 |
| 动态规划 | 了解 | 背包、最长子序列、爬楼梯等经典题型 | 详细文档 |
| 手写题 | 精通 | debounce、throttle、deepClone、flat、curry、EventEmitter、Promise.all | 详细文档 |
| 前端场景算法 | 熟练 | 虚拟列表计算（可视区域索引）、DOM Diff 算法思路、LRU 缓存、大文件切片上传的分片策略、列表转树结构（list2tree）、权限路由过滤（递归树筛选） | 详细文档 |
自检问题
- 如何实现一个 LRU 缓存？时间复杂度是多少？
- 虚拟列表中如何计算当前可视区域应该渲染哪些元素？
- 如何将扁平数组转换为树结构？反过来呢？
- React/Vue 的 Diff 算法核心思路是什么？为什么需要 key？
十、软技能
掌握程度：这是高级工程师与资深工程师的分水岭
| 技能点 | 要求程度 | 说明 | 文档 |
|---|---|---|---|
| 技术方案设计 | 熟练 | 需求分析 → 技术选型 → 架构设计 → 落地文档 | 详细文档 |
| Code Review | 熟练 | 能给出建设性意见，关注可维护性和可读性 | 详细文档 |
| 技术分享 | 熟练 | 定期输出，能讲清楚一个技术点的 what / why / how | |
| 项目管理 | 了解 | 任务拆解、排期、风险识别、跨团队协调 | |
| 沟通能力 | 熟练 | 能与产品/设计/后端高效沟通，推动技术决策 | |
| 技术文档 | 熟练 | RFC、ADR、API 文档、技术博客 | 详细文档 |
能力等级参考
| 等级 | 含义 | 面试表现 |
|---|---|---|
| 了解 | 知道是什么，用过基本功能 | 能说出概念和基本用法 |
| 熟练 | 项目中频繁使用，能解决常见问题 | 能深入讨论原理和最佳实践 |
| 精通 | 读过源码，能从底层解释原理 | 能手写实现、能做技术决策和架构设计 |
学习路线建议
作为一名正在转向全栈的 5 年前端，建议按以下优先级补强：
1. 🔥 夯实 JS/TS 基础（很多人 5 年了还有盲区）
2. 🔥 深入框架原理（这也是本项目 mini-react / mini-vue 的目标）
3. 🔥 Node.js + 数据库（全栈必备）
4. ⭐ 工程化能力提升（Monorepo、CI/CD、自定义插件）
5. ⭐ 算法刷题（保持手感，中等难度）
6. ⭐ 系统设计思维（技术方案、架构能力）