前端框架知识

🧱 基础阶段（入门打牢地基）

✨ 熟练掌握语法 + 浏览器运行机制

• ✅ 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 工具平台）