前端技术栈涵盖广泛，涉及多个领域和技术方向。以下是全面的分类总结，帮助你对前端技术生态有系统化的了解：
一、核心基础
HTML/CSS
- HTML5（语义化标签、Web Components）
- CSS3（Flexbox/Grid、动画、变量、BEM/SMACSS方法论）
- 预处理器：Sass/Less/Stylus
- 后处理器：PostCSS（Autoprefixer等）
JavaScript
- ES6+（模块化、Promise、Async/Await、Proxy等）
- TypeScript（类型系统、装饰器）
- 调试工具：Chrome DevTools、Source Map
二、前端框架与库
主流框架
- React（Hooks、Context、Redux/Recoil）
- Vue（Composition API、Pinia、Vuex）
- Angular（RxJS、依赖注入、NgModule）
- Svelte（编译时优化）
UI组件库
- 通用：Ant Design、Material UI、Element UI
- 移动端：Vant（Vue）、Ant Design Mobile
- 轻量级：Headless UI（无样式组件）
CSS-in-JS
- Styled-components、Emotion、Tailwind CSS（实用优先）
三、构建工具与工程化
打包工具
- Webpack（Loader/Plugin、Tree Shaking）
- Vite（基于ESM的快速构建）
- Rollup（库打包优化）
- Parcel（零配置）
开发工具
- Babel（转译、Polyfill）
- ESLint/Prettier（代码规范）
- Husky/Lint-Staged（Git钩子）
模块化
- ESM（浏览器原生模块）
- CommonJS/UMD（历史遗留）
四、状态管理
全局状态
- Redux（RTK简化版）、MobX、Zustand
- Vue生态：Pinia（替代Vuex）
- Context API（React原生方案）
数据请求
- Fetch API、Axios
- GraphQL（Apollo Client、Relay）
- SWR/React Query（数据缓存）
五、路由与导航
- SPA路由
- React Router、Vue Router
- Next.js/Nuxt.js内置路由
- 静态路由：Remix（嵌套路由）
六、测试相关
单元测试
- Jest（快照测试）
- Vitest（兼容Vite）
E2E测试
- Cypress、Playwright、Puppeteer
组件测试
- React Testing Library、Storybook（UI隔离开发）
七、跨平台与混合开发
桌面端
- Electron（VSCode同款）
- Tauri（Rust轻量替代）
移动端
- React Native、Weex（Vue生态）
- Flutter（Dart语言，跨端UI）
小程序
- Taro（多端统一）、Uni-app
八、性能优化
加载优化
- 代码分割（Dynamic Import）
- 图片懒加载（Intersection Observer）
- CDN/PWA（离线缓存）
渲染优化
- Virtual DOM差异算法（React Fiber）
- 防抖/节流、Web Worker
工具分析
- Lighthouse、WebPageTest
- Chrome Performance面板
九、前沿技术
WebAssembly
- 高性能计算（如FFmpeg.wasm）
Web3D/游戏
- Three.js、Babylon.js
- WebGL/WebGPU
低代码/无代码
- 平台：Figma插件、Retool
- 框架：amis、LowCodeEngine
边缘计算
- Cloudflare Workers、Deno Deploy
十、其他关键工具
SSR/SSG
- Next.js（React）、Nuxt.js（Vue）、Astro（岛屿架构）
微前端
- qiankun、Module Federation（Webpack 5）
可视化
- ECharts、D3.js、Chart.js
编辑器
- Monaco（VSCode核心）、CodeMirror
十一、学习路径建议
- 入门：HTML/CSS → JavaScript → Vue/React
- 进阶：工程化 → 性能优化 → 框架源码
- 拓展：跨端开发 → 全栈能力（Node.js基础）
前端技术迭代迅速，建议关注 Web Components、Serverless、AI集成（如TensorFlow.js）等新兴方向。保持持续学习，结合实际项目实践才能深入掌握。