现代前端开发的边界已经远远超过了“写写
HTML/CSS/JS”，它是一项跨技术栈、跨平台的综合工程实践，涵盖从用户体验到工程效率的完整链路。下面是一份
现代前端开发技能体系清单，分层次系统整理：
✅ 一、核心语言基础（必会）
| HTML5 |
语义化标签、表单、媒体、SVG |
| CSS3 |
Flexbox、Grid、媒体查询、动画 |
| JavaScript (ES6+) |
作用域、闭包、Promise、模块、异步编程、Map/Set |
| TypeScript |
类型系统、泛型、类型推导、接口定义、联合类型 |
✅ 二、前端框架与状态管理
框架三强：
| React |
函数组件 + Hook + JSX（最主流） |
| Vue 3 |
Composition API + 模板语法（渐进式） |
| Svelte / SolidJS |
新兴高性能框架（了解即可） |
状态管理工具：
- React：
useState、useReducer、useContext、Redux、Zustand、Recoil、Jotai
- Vue：Pinia（Vuex 替代品）
- 全局状态/局部状态/异步状态管理：React Query、SWR、Vue Query
✅ 三、前端工程化与构建工具
| 包管理 |
npm、yarn、pnpm（首推） |
| 构建工具 |
Vite（主流）、Webpack、Rollup、esbuild |
| 模块规范 |
ESModule、CommonJS |
| 代码规范 |
ESLint、Prettier、EditorConfig、Husky |
| 组件库管理 |
Storybook、Styleguidist、Bit.dev |
✅ 四、UI 框架与组件库
| 跨端组件库 |
Ant Design、Element Plus、MUI、Arco Design |
| 移动端组件 |
Vant、NutUI、Taro UI |
| CSS 工具库 |
Tailwind CSS、Bootstrap、Chakra UI、UnoCSS |
| CSS 方案 |
CSS Modules、SCSS/SASS、Styled-components、emotion、PostCSS |
✅ 五、路由与前端导航
- React Router / Vue Router
- 嵌套路由、懒加载、重定向、动态路由
- 中间件（导航守卫）
- 路由状态传参（search/hash/params）
✅ 六、异步与网络请求
- fetch / Axios / XMLHttpRequest
- 请求拦截器、响应拦截器
- 异步错误处理、重试机制
- 前端缓存、接口节流、防抖
- React Query / SWR（数据同步工具）
✅ 七、测试能力
| 单元测试 |
Jest、Vitest |
| UI 测试 |
React Testing Library、Vue Testing Library |
| E2E 测试 |
Cypress、Playwright、Puppeteer |
| Mock 工具 |
Mock Service Worker (MSW)、faker.js |
✅ 八、移动端开发（可选）
- H5 适配（rem、vw/vh、媒体查询）
- Hybrid 应用（嵌入 WebView）
- 小程序框架（Taro、Uni-app）
- React Native / Flutter Web（了解）
✅ 九、前端性能优化
| 加载速度 |
Tree Shaking、按需加载、CDN、懒加载、预加载 |
| 运行性能 |
虚拟列表、合适数据结构 |
| 渲染性能 |
避免重排/回流、合成层优化、请求合并 |
| 图片优化 |
WebP、SVG、Lazyload、响应式图片 |
| 样式优化 |
BEM、原子 CSS、避免嵌套过深 |
| 调试工具 |
Chrome DevTools、Lighthouse、Perf tab |
✅ 十、浏览器兼容与标准
- DOM、BOM、事件机制
- 浏览器渲染流程（关键渲染路径、合成层）
- 缓存机制（Service Worker、Cache-Control）
- 跨域处理（CORS、JSONP、Proxy）
✅ 十一、安全与认证
常见漏洞防护：
- XSS、CSRF、Clickjacking、DOM 注入
身份认证：
- JWT、OAuth2、Session、Cookie
接口签名、防重放、防盗链
✅ 十二、DevOps 与部署
| 构建产物 |
SPA vs MPA，资源拆分 |
| 自动化部署 |
GitHub Actions、Jenkins、Vercel、Netlify |
| 版本管理 |
Git、语义化版本号、Changelog 自动生成 |
| 预发布环境 |
Mock 环境、灰度发布 |
| CDN 与缓存配置 |
Nginx、Cloudflare、S3 静态托管 |
✅ 十三、全栈前端方向（可拓展）
- 服务端渲染（SSR）：Next.js（React）、Nuxt（Vue）
- 全栈框架：Next.js / Remix / Nuxt3 /
NestJS（前后端一体）
- 边缘渲染与 Serverless：Vercel Edge、Cloudflare
Workers
- 数据库集成：Prisma、Supabase、Firebase
- 图形学方向：Canvas / WebGL / Three.js（可选）
✅ 十四、常用工具和生态
| 调试工具 |
Chrome DevTools、Postman、Fiddler |
| Mock 平台 |
Mocky.io、YApi、Swagger UI |
| 可视化工具 |
ECharts、D3.js、Chart.js |
| 文件上传/管理 |
OSS SDK、FineUploader、TUS |
| 表格/表单库 |
Formily、React Hook Form、Naive UI 表格组件 |
✅ 十五、软技能与工程意识
- 模块设计能力、组件抽象
- 可维护性、可测试性
- 与后端联调、接口约定（OpenAPI）
- 性能监控、前端埋点（如 Sentry）
- 团队协作（代码审查、Git 分支规范）
🎯 建议学习路径：
🟢 初级阶段：
- HTML + CSS + JS 基础
- React/Vue 框架基本使用
- 路由 + 状态管理 + Axios 接口通信
- 构建工具（Vite/Webpack）基础
🟡 中级阶段：
- TypeScript + 更深入框架原理
- 工程化（模块化 + 自动化）
- SSR / 前端部署
- 组件设计思想、性能优化技巧
🔴 高级阶段：
- 自研组件库、微前端
- Web 安全、跨域解决方案
- CI/CD、监控埋点、全链路日志
- 与服务端协同设计接口规范（RESTful / GraphQL）
是否需要我按“React / Vue / Flutter
Web”某个技术栈为你列一个成长路线图？或者整理成思维导图便于复习？