woshizhangmingyu.github.io/

前端技术分类

1. 页面渲染技术

• HTML/HTML5: 语义化标签、Web组件、Canvas/SVG
• CSS/CSS3: 选择器、盒模型、Flexbox/Grid布局、动画与过渡
• 预处理器/后处理器: Sass/Less/Stylus、PostCSS
• CSS架构: BEM、OOCSS、原子CSS (Tailwind)

2. 编程语言与核心技术

• JavaScript: 语法基础、原型链、闭包、ES6+特性
• TypeScript: 类型系统、接口、泛型、类型推断
• WebAssembly: 高性能编译目标、C/C++/Rust集成

3. 前端框架与视图层

• 组件化框架: React、Vue、Angular、Svelte
• 状态管理: Redux、Vuex、MobX、Recoil、Pinia
• SSR/SSG技术: Next.js、Nuxt.js、Gatsby、Astro
• Islands架构: Astro、Qwik

4. 工程化与构建系统

• 模块化规范: CommonJS、AMD、ESM
• 构建工具: Webpack、Vite、Rollup、esbuild
• 转译器: Babel、SWC
• 包管理器: npm、yarn、pnpm
• Monorepo工具: Lerna、Turborepo、pnpm workspace

5. 网络与数据交互

• HTTP客户端: XMLHttpRequest、Fetch API、Axios
• API范式: REST、GraphQL、tRPC
• 实时通信: WebSocket、Server-Sent Events
• 离线存储: LocalStorage、IndexedDB、Service Worker缓存

6. 测试与质量保障

• 测试框架: Jest、Vitest、Mocha
• UI测试: React Testing Library、Vue Testing Library
• E2E测试: Cypress、Playwright
• 代码质量: ESLint、Prettier、TypeScript

7. 性能优化与用户体验

• 性能指标: Core Web Vitals、Lighthouse
• 渲染优化: 虚拟DOM、懒加载、代码分割
• 缓存策略: HTTP缓存、Service Worker
• PWA技术: Manifest、Service Worker、推送通知

8. 跨平台与多端开发

• 移动跨平台: React Native、Flutter
• 桌面应用: Electron、Tauri
• 小程序开发: 微信小程序、uni-app

后端工程师的前端学习路线图

第一阶段：基础知识

1. HTML & CSS基础

• 目标：掌握页面结构和样式基础
• 学习内容：
  • HTML语义化标签
  • CSS选择器、盒模型
  • Flexbox和Grid布局
  • 响应式设计基础
• 后端优势：已有的HTML基础知识可快速上手
• 练习项目：创建个人简历页面

2. JavaScript核心

• 目标：理解JavaScript语言特性
• 学习内容：
  • ES6+语法（箭头函数、解构、Promise等）
  • 异步编程模型（回调、Promise、async/await）
  • DOM操作和事件处理
• 后端优势：利用已有的编程思维，专注于语言差异
• 练习项目：简单的表单验证和数据处理

第二阶段：工程化与开发环境

• 目标：掌握前端工程化基础
• 学习内容：
  • npm/yarn包管理
  • 模块化开发（ES Modules）
  • 构建工具入门（Vite优先）
  • Git工作流
• 后端优势：工程化概念相通，重点在于工具差异
• 练习项目：搭建一个模块化的前端项目骨架

第三阶段：框架入门

• 目标：掌握一个主流前端框架
• 框架选择：
  • React：适合喜欢函数式编程的后端开发者
  • Vue：适合希望快速上手的开发者
• 学习内容：
  • 组件化开发模式
  • 状态管理基础
  • 生命周期和钩子函数
  • 路由管理
• 后端优势：组件化思想类似于后端模块化
• 练习项目：待办事项应用

第四阶段：TypeScript与API交互

• 目标：增强类型安全和后端交互能力
• 学习内容：
  • TypeScript基础类型和接口
  • API调用（Fetch/Axios）
  • 数据处理和状态管理进阶
• 后端优势：类型系统与后端语言相似，API设计经验可复用
• 练习项目：与真实API交互的数据展示应用

第五阶段：前端测试与部署

• 目标：掌握前端质量保障和部署流程
• 学习内容：
  • 单元测试和组件测试
  • CI/CD流程
  • 静态网站部署
• 后端优势：测试概念相通，CI/CD经验可复用
• 练习项目：为已有项目添加测试和自动部署

第六阶段：进阶专题（按需学习）

• 状态管理进阶：Redux/Vuex等
• SSR/SSG技术：Next.js/Nuxt.js
• 性能优化：代码分割、懒加载、缓存策略
• CSS进阶：预处理器、CSS-in-JS、Tailwind CSS