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 |
| 组件设计模式 | 精通 | 高阶组件、Render Props、Compound Components、受控/非受控 |
| 状态管理 | 熟练 | Context、Redux/Zustand/Jotai，理解各方案的适用场景 |
| React 原理 | 熟练 → 精通 | Fiber 架构、Reconciliation、合成事件、批量更新、并发模式 |
| React Router | 熟练 | v6 API、嵌套路由、路由守卫、懒加载 |
| Next.js / SSR | 熟练 | SSR/SSG/ISR 的区别、App Router、Server Components |
| 性能优化 | 熟练 | React.memo、虚拟列表、代码分割、Suspense、Profiler |
Vue
| 技能点 | 要求程度 | 说明 |
|---|---|---|
| Vue3 Composition API | 熟练 | ref、reactive、computed、watch、watchEffect |
| 响应式原理 | 熟练 | Proxy 实现、依赖收集与触发、effect 函数 |
| Vue Router / Pinia | 熟练 | 路由导航守卫、状态持久化 |
| Vue3 源码 | 了解 → 熟练 | 编译器、渲染器、响应式系统的核心逻辑 |
自检问题
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 是什么？
六、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 权限模型 |
| Redis | 了解 | 缓存、Session 存储、分布式锁基本概念 |
| Docker | 了解 | Dockerfile 编写、docker-compose、容器部署基础 |
| Serverless | 了解 | Vercel Functions / AWS Lambda / Cloudflare Workers |
自检问题
- Koa 的洋葱模型是什么？与 Express 中间件有何不同？
- JWT 和 Session 认证各自的优缺点？
- 如何设计一个 RESTful API 的分页方案？
七、测试
掌握程度：熟练
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 |
九、软技能
掌握程度：这是高级工程师与资深工程师的分水岭
| 技能点 | 要求程度 | 说明 |
|---|---|---|
| 技术方案设计 | 熟练 | 需求分析 → 技术选型 → 架构设计 → 落地文档 |
| 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. ⭐ 系统设计思维（技术方案、架构能力）