🧱 基础阶段（入门打牢地基）
✨ 熟练掌握语法 + 浏览器运行机制
• ✅ HTML5、语义化标签、表单结构
• ✅ CSS3、Flex/Grid布局、响应式设计、动画
• ✅ JavaScript 基础（ES6+）
• 数据类型、作用域、闭包、原型链、this
• Promise、async/await、事件循环（Event Loop）
• DOM 操作、事件机制、BOM
• ✅ 浏览器基础
• 渲染流程（HTML 解析 → CSS → JS）
• 重绘与回流（Repaint & Reflow）
• 本地存储（cookie/localStorage/sessionStorage）
• 跨域与解决方案（CORS、JSONP）
🧩 进阶阶段（前端工程实战能力）
✨ 可以独立开发项目、理解框架设计思想
• ✅ 模块化：ES Modules, CommonJS, AMD
• ✅ 前端构建工具：
• Webpack、Vite、Babel、ESLint、Prettier
• ✅ 包管理器：npm / yarn / pnpm
• ✅ Vue / React / Angular（三选一精通）
• 组件化开发、状态管理（Vuex / Pinia / Redux）
• 生命周期、Hooks（React）、Composition API（Vue3）
• 路由（Vue Router / React Router）
• ✅ 样式方案
• 预处理器：Sass / Less
• CSS-in-JS、Tailwind CSS、Bootstrap
• ✅ 调试与优化：
• DevTools 使用、性能分析
• 懒加载、Tree Shaking、代码分割
🏗️ 工程化 & 架构能力
✨ 真正进阶前端工程师的分水岭
• ✅ Git / GitHub 流程
• ✅ CI/CD：自动化部署（GitHub Actions / Jenkins）
• ✅ 单元测试 / 端到端测试
• Jest、Mocha、Vitest、Cypress
• ✅ SSR / SSG（Next.js、Nuxt）
• ✅ TypeScript（大型项目的标准）
• ✅ 前端架构设计思维
• 组件设计、文件结构、解耦方式
• 前后端分离的接口规范（RESTful / GraphQL）
🌐 网络与安全知识
✨ 跨端协作能力 + 安全防护意识
• HTTP/HTTPS 协议、请求头、缓存机制
• 常见安全问题（XSS、CSRF、Clickjacking）及防御手段
• WebSocket、SSE、长轮询
• 接口限流、鉴权（Token / OAuth2 / JWT）
💡 项目实战 + 周边能力
✨ 面试/简历/独立作品展示时必不可少
• 多个中大型项目实战（CRUD 是最基础的）
• 博客系统、后台管理系统、实时聊天室、音乐播放器
• 接入第三方服务：地图、支付、图表、AI 接口
• 简历优化 & 面试准备（八股文 + 真题 + 项目亮点）
• 作品部署到线上（Netlify / Vercel / 自己配 Nginx + 域名）
🔮 前沿与拓展方向（选修）
• 微前端架构（如 Qiankun）
• WebAssembly、PWA
• Hybrid / App 小程序
• Web3 / 区块链前端
• AI + 前端协同（ChatGPT 接入、Prompt 工具平台）