前端知识体系 (MOC - Map of Content)
本文档是前端知识体系的导航地图，整理了前端开发的核心技术、框架生态、工具库和工程化体系等内容
一、核心基础
1. 浏览器与Web标准
- 浏览器工作原理
- DOM与BOM
- Web API
- 网络协议基础
2. 三大核心技术
- HTML5 语义化标签与新特性
- CSS 知识地图 - CSS基础、布局技术与工程化
- JavaScript 知识地图 - JS核心概念与实战技巧
3. 编程语言扩展
- TypeScript - JavaScript的超集
- WebAssembly - 高性能Web应用的未来
4. 服务端JavaScript
- Node.js 知识地图 - 服务端JavaScript运行时
二、框架生态
1. 主流前端框架
- React 知识地图 - 组件化、状态管理与高级特性
- Vue - 渐进式JavaScript框架
- Vue 3 + TypeScript开发实践
- Vue Router与状态管理
- 组件设计与最佳实践
2. 状态管理
- Redux/React-Redux - React状态管理
- Vuex/Pinia - Vue状态管理
- MobX - 响应式状态管理
- Zustand - 轻量级状态管理
3. 路由管理
- React Router - React应用路由
- Vue Router - Vue应用路由
4. 跨端开发
- React Native - 使用React构建原生应用
- Electron - 构建跨平台桌面应用
- Taro/uni-app - 多端统一开发框架
5. 微前端
- 微前端架构设计
- 微应用加载与通信
- 应用隔离与资源共享
三、工具库
1. UI组件库
- Ant Design - 企业级UI设计语言和React组件库
- Element Plus - 基于Vue 3的组件库
- Material-UI - 实现Material Design的React组件
2. 数据可视化
- ECharts - 功能丰富的交互式图表库
- D3.js - 数据驱动的文档操作
- Three.js - WebGL 3D图形库
3. 工具类库
- Axios - 基于Promise的HTTP客户端
- Lodash - 实用工具函数库
- Moment/Day.js - 日期处理库
4. 拖拽与交互
- GridStack.js - 可拖拽、可调整大小的网格布局
- dnd kit - 现代化拖放工具包
四、工程化体系
1. 构建工具
- Webpack - 模块打包工具
- Vite - 下一代前端构建工具
- Rollup - JavaScript模块打包器
2. 包管理工具
- npm/yarn/pnpm - Node.js包管理器
- Monorepo - 多包仓库管理
3. 脚手架工具
- 脚手架工具的核心原理
- 代码模板生成实现
4. 代码质量与规范
- ESLint - JavaScript代码检查工具
- Prettier - 代码格式化工具
- TypeScript - 类型检查
- 单元测试与集成测试
5. CI/CD与部署
- 持续集成与持续部署
- 自动化测试与构建
- 静态站点部署
- 容器化部署
五、性能优化
1. 前端性能指标
- 核心Web指标(Core Web Vitals)
- 性能监控与分析
2. 渲染优化
- 关键渲染路径优化
- 虚拟DOM与Diff算法
- 懒加载与代码分割
3. 资源优化
- 图片优化策略
- JavaScript优化
- CSS优化
- 缓存策略
六、前沿技术
1. 服务端渲染(SSR)
- Next.js - React服务端渲染框架
- Nuxt.js - Vue服务端渲染框架
2. 静态站点生成(SSG)
- Gatsby - 基于React的静态站点生成器
- VitePress - 基于Vite的静态站点生成器
3. 渐进式Web应用(PWA)
- Service Worker
- 离线缓存
- 推送通知
4. Web3与区块链
- 以太坊与智能合约
- Web3.js/ethers.js
- 去中心化应用(DApps)
七、学习资源
1. 知识体系
2. 学习路线
- 入门学习路径
- 进阶学习建议
- 专业领域深入