前端学习路线

前端知识很多，但学习顺序并不复杂：先理解浏览器中的 HTML、CSS 和 JavaScript， 再进入 TypeScript 与框架，最后看懂构建、测试、性能优化和常见项目结构。

不建议同时深入 Vue 和 React。先选择一个作为主栈理解核心写法，再用较短时间了解 另一个框架的设计思路，学习效率会更高。

路线总览

1. Web 基础

HTML

• 理解文档结构和标题层级，正确使用 header、nav、main、article 等语义元素。
• 掌握表单控件、标签关联、原生校验和错误提示。
• 会使用图片、音频、视频，并关注替代文本、键盘操作和基础可访问性。

CSS

• 理解盒模型、选择器、继承、优先级、层叠上下文和定位。
• 熟练使用 Flexbox 与 Grid，能够实现常见的一维和二维布局。
• 掌握响应式设计、媒体查询、容器查询、过渡与基础动画。
• 能处理移动端适配、长文本溢出和不同内容高度带来的布局问题。

浏览器与网络

• 了解 DOM、CSSOM、布局、绘制和合成的基本过程。
• 理解 URL、DNS、HTTP、HTTPS、缓存、Cookie、CORS 和常见状态码。
• 会使用浏览器开发者工具检查元素、请求、存储和性能。

2. JavaScript

语言基础

• 掌握数据类型、类型转换、运算符、条件、循环、函数、数组和对象。
• 理解作用域、闭包、this、原型链、执行上下文和垃圾回收的基本概念。
• 熟练使用数组方法完成筛选、映射、聚合和排序。

现代 JavaScript

• 掌握箭头函数、模板字符串、默认参数、rest 参数。
• 使用解构与展开语法读取和更新数组、对象。
• 理解 class、Set、Map、迭代器和 ES Module。

这里不必把“ES6”当作独立技术栈。日常所说的 ES6 通常代表从 ES2015 开始持续加入的 现代 JavaScript 能力，应结合实际代码一起学习。

DOM、事件与异步

• 掌握 DOM 查询、创建、更新和事件委托。
• 理解调用栈、任务队列、微任务和事件循环。
• 掌握 Promise、async/await、Fetch、错误处理、超时与请求取消。
• 能为加载中、成功、空数据和失败设计完整状态。

可继续阅读异步编程专题。

3. TypeScript

类型系统

• 掌握基础类型、对象类型、接口、类型别名和函数签名。
• 理解类型推断、类型收窄、联合类型、交叉类型和判别联合。
• 区分 any、unknown、never，开启严格模式并处理空值。

泛型与高级类型

• 使用泛型、泛型约束、keyof 和索引访问类型建立类型关联。
• 掌握条件类型、映射类型和常用 Utility Types。
• 会为接口响应、表格配置、表单和组件属性设计类型。
• 了解类型声明、第三方库类型补充和装饰器的适用场景。

4. Vue 或 React

Vue 主线

• 使用 Vue 3 Composition API，掌握响应式状态、计算属性、侦听器和生命周期。
• 掌握 props、emits、slot、provide/inject 与 composable。
• 使用 Vue Router 处理嵌套、动态路由、守卫和懒加载。
• 使用 Pinia 管理跨页面状态；Vuex 主要用于维护旧项目。
• 完成表单验证、接口封装、权限控制和异常处理。

可从Vue 工程与响应式基础开始。

React 主线

• 掌握 JSX、函数组件、props、state、事件和受控表单。
• 正确使用 Hooks，理解 Effect 依赖、闭包和组件重新渲染。
• 使用状态提升、自定义 Hook 和组合模式复用逻辑。
• 使用 React Router 处理嵌套路由、参数和懒加载。
• 根据复杂度选择 Context、Redux Toolkit、Zustand 或服务端状态方案。
• 了解 Next.js 中的 SSR、静态生成、服务端组件和客户端组件。

可继续阅读React 学习路线。

框架性能

• 先定位无效更新，再考虑 memo、useMemo、useCallback 等缓存手段。
• 掌握代码分割、路由懒加载、长列表虚拟化和请求缓存。
• 能解释 Vue 响应式更新与 React 状态驱动渲染的基本差异。

5. Node.js 与构建工具

Node.js

• 理解 Node.js 的事件驱动模型、模块系统和事件循环。
• 掌握 npm scripts、依赖版本、环境变量和包管理。
• 使用 fs、path、stream、HTTP 等模块编写工具或简单服务。
• 了解 Express/Fastify 中的路由、中间件、认证和错误处理。

可继续阅读Express 教程。

Vite 与 Webpack

• 优先掌握 Vite 的开发、构建、环境变量和插件配置。
• 理解入口、模块图、loader、plugin、HMR 和构建产物。
• 掌握 Tree Shaking、动态导入、代码分割和长期缓存。
• 会使用构建分析工具定位大依赖、重复模块和无效代码。
• Webpack 重点学习原理与旧项目维护，不必从零背完整配置。

6. 前端工程化

• 使用 Git 完成分支管理、变基、冲突处理、代码审查和回滚。
• 配置 ESLint、Prettier、TypeScript 检查与提交检查。
• 使用 Vitest/Jest 和 Testing Library 编写单元、组件测试。
• 使用 Playwright/Cypress 覆盖关键端到端流程。
• 配置 CI 执行安装、检查、测试、构建和预览部署。
• 管理开发、测试、生产环境配置，避免密钥进入前端包或代码仓库。
• 了解依赖审计、错误监控、Source Map、灰度发布和回滚。

7. 前端性能优化

测量

• 理解 LCP、INP、CLS 等 Core Web Vitals。
• 使用 Lighthouse、Performance、Network 和 Coverage 建立性能基线。
• 为首屏时间、交互延迟、包体积和接口耗时设置预算。

加载与网络

• 优化图片、字体、压缩、CDN、浏览器缓存和资源优先级。
• 使用懒加载、预加载、代码分割和按需加载。
• 减少重复请求、请求瀑布、第三方脚本和无效代码。

渲染与运行时

• 减少不必要的重排、重绘和组件更新。
• 对长列表、频繁事件和高成本计算进行节流、缓存或异步拆分。
• 必要时使用虚拟列表和 Web Worker。

8. 项目理解

阅读项目时，可以优先选择以下两类典型结构：

1. 复杂业务应用：包含登录、权限、路由、复杂表单、数据表格、异常恢复和测试。
2. 性能型应用：包含服务端渲染或静态生成、性能预算、监控和自动部署。

重点理解：

• 为什么选择当前框架、状态方案和渲染方式。
• 页面、组件、状态、请求和权限如何串联。
• 故障通常如何定位，测试和监控分别解决什么问题。
• 测试覆盖率、包体积、性能指标和接口延迟如何反映项目质量。
• 如果重新实现，会调整哪些模块边界或技术方案。

学习取舍

• HTML、CSS、JavaScript 和浏览器基础是主线，不能被框架替代。
• Vue 和 React 选择一个深入即可，另一个先达到能读懂和能维护的程度。
• TypeScript 应在 JavaScript 基础稳定后学习，否则容易只记类型语法。
• 构建工具重在理解模块与产物，不必记忆所有配置项。
• 工程化和性能优化应结合项目代码理解，不要只背概念清单。