前端学习路线

以下是一份系统化的前端技术学习路线，适合从零基础到进阶的学习者，结合当前行业主流技术和学习路径设计：

---

第一阶段：基础三剑客

1. HTML——MDN Web Docs（HTML）

• • 语义化标签（HTML5新特性）
  • 表单、表格、多媒体标签
  • 无障碍访问（ARIA）
  • SEO 基础优化

1. CSS——MDN Web Docs（CSS）

• • 盒模型、Flex布局、Grid布局
  • 响应式设计（媒体查询、视口单位）
  • CSS动画与过渡（transition/keyframes）
  • CSS变量（CSS Custom Properties）
  • 预处理器（Sass/Less，建议优先学Sass）——Sass 官方文档 Less 官方文档

1. JavaScript 基础——MDN Web Docs（JavaScript）

• • 变量、作用域、闭包
  • 原型链、this指向、ES6+新特性（let/const、箭头函数、解构、Promise等）
  • DOM操作与事件机制
  • JSON
  • 异步编程（回调、Promise、async/await）
  • 模块化开发（CommonJS/ES Module）

---

第二阶段：进阶技能

1. 前端框架

• • React（主流推荐）——React 官方文档（英文）

• • • 组件化开发（函数组件/Hooks）
    • 状态管理（Redux/Recoil/Context API）—— Redux 官方文档
    • 路由（React Router）——React 中文文档（React Router）
    • 服务端渲染（Next.js）——Next.js 官方文档

• • Vue（可选）——Vue 官方中文文档

• • • 组合式API（Vue3）
    • Pinia/Vuex状态管理——Pinia 官方文档
    • Vue Router——Vue Router 官方文档
    • Nuxt.js服务端渲染——Nuxt.js 官方文档

1. 工程化与工具链

• • 包管理工具：npm/yarn/pnpm——npm 官方网站 Yarn 官方文档 pnpm 官方文档
  • 构建工具：Webpack/Vite/Rollup——Webpack 官方文档
  • Babel转译与Polyfill
  • 代码规范：ESLint/Prettier——ESLint 官方文档 Prettier 官方文档
  • 单元测试：Jest/Vitest——Jest 官方文档 Vitest 官方文档

1. Node.js 基础——Node.js 官方文档

• • 文件操作与HTTP模块
  • Express/Koa框架——Express 官方文档 Koa 官方文档
  • RESTful API设计
  • 数据库基础（MongoDB/MySQL）——MongoDB 官方文档 MySQL 官方文档

1. 版本控制

• • Git工作流（分支管理、冲突解决）——Git 官方文档
  • GitHub/Gitea协作开发——GitHub 官方资源 Gitea

---

第三阶段：高级方向

1. 性能优化

• • 加载优化（懒加载、代码分割）
  • 渲染优化（防抖/节流、虚拟列表）
  • Web Vitals指标（LCP、FID、CLS）——Web Vitals 官方指南
  • 性能分析工具（Lighthouse、Chrome DevTools）——Google Lighthouse 官方文档

1. TypeScript——TypeScript 官方文档

• • 类型系统与接口设计
  • 泛型与高级类型
  • 在React/Vue中的集成

1. 跨平台开发

• • 小程序开发（微信/Taro）
  • 移动端框架：React Native/Flutter——React Native 官方文档 Flutter 官方文档
  • 桌面端：Electron/Tauri——Electron 官方文档

1. 前沿技术

• • WebAssembly（Rust/Go）——WebAssembly 官方文档 Rust 官方文档 Go 官方文档
  • 微前端（qiankun/Module Federation）
  • 低代码平台开发
  • WebGL/Three.js（可视化方向）

---

第四阶段：扩展学习

1. 全栈能力

• • 服务端框架（Nest.js/Fastify）——Nest.js 官方文档
  • 数据库ORM（Prisma/TypeORM）——Prisma 官方文档
  • 身份认证（JWT/OAuth）——
  • 云服务部署（Docker/AWS/Vercel）——Docker 官方文档 AWS 官方文档 Vercel 官方文档

1. 浏览器原理——MDN 浏览器工作原理

• • 渲染引擎工作流程
  • 事件循环（Event Loop）
  • 安全机制（CSP、XSS/CSRF防御）

1. 设计模式与架构——MDN 设计模式指南

• • 常用设计模式（观察者、工厂、单例）
  • 状态管理架构（Flux/Redux原理）
  • 领域驱动设计（DDD）

---

学习资源推荐

• 视频网站：

• • bilibili——Bilibili 技术频道
  • Youtube——Youtube

• 技术文档：

• • MDN Web Docs（权威文档）——MDN Web Docs
  • freeCodeCamp（实战项目）——freeCodeCamp
  • Frontend Masters（进阶专题）——Frontend Masters

• 社区：

• • GitHub Trending、Stack Overflow-——GitHub Trending Stack Overflow
  • 掘金、知乎、V2EX技术论坛——掘金 知乎 V2EX

---

学习方法建议

一开始可以先在B站或者油管看视频，但是后续一定要回归到官方技术文档；要多阅读英文的技术文档；学习要和实践并行，便学并做项目。最后，一定要坚持，一定要持续学习。

附上学习计算机的“圣经”（翁凯老师的原话）：

“学习计算机一定要有一个非常强大的心理状态，计算机都是人做出来的，别人能想出来的，我也一定能想得出来，在计算机里头没有任何黑魔法，所有的东西只不过是我现在不知道而已，总有一天我会把所有的细节，所有的内部的东西全部搞明白了。”