现代前端开发的边界已经远远超过了“写写
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”某个技术栈为你列一个成长路线图？或者整理成思维导图便于复习？