路线图对照：前端知识体系与进阶方向

这一课你将能做到

1. 说清楚前端知识体系的完整地图，知道自己现在站在哪
2. 根据目标（就业/兴趣/全栈）选择下一步的学习方向
3. 识别高质量学习资源，避免在过时教程上浪费时间

为什么要学

学完前 11 课，你已经掌握了从写页面到上线的完整闭环。但前端生态庞大得让人眩晕：每天都在出新框架、新工具，Twitter 上每周都有「XX 已死，YY 当立」的争论。没有地图的学习者容易犯两个错误：要么追新追得筋疲力尽，要么学了一堆没人用的过时技术。

这一课给你一张地图：哪些是地基（必学）、哪些是框架（选学）、哪些是工具（用到再学）、哪些是噪音（忽略）。

先建立图像

前端知识体系全景：

┌────────────────────────────────────────────┐
│              你已经掌握的                    │
│  HTML · CSS · JS · Git · GitHub · npm       │
│  React · Tailwind · Vitest · 部署           │
└────────────────────────────────────────────┘
                    ↓ 进阶
┌────────────────────────────────────────────┐
│  深入 JS：异步/原型/闭包/事件循环/TS         │
│  深入 React：状态管理/性能优化/服务端渲染     │
│  工程化：Vite 原理/代码规范/Monorepo        │
│  计算机基础：网络/浏览器原理/算法            │
└────────────────────────────────────────────┘
                    ↓ 方向选择
┌──────────┬──────────┬──────────┬──────────┐
│  前端深化 │  全栈开发 │  跨端开发 │  可视化  │
│ Next.js  │ Node.js  │ RN/Flutter│ D3/Three │
│ 性能优化 │ 数据库    │ 小程序    │ WebGL    │
└──────────┴──────────┴──────────┴──────────┘

跟着做：制定你的学习计划

步骤 1：自评当前水平

对照下表，诚实打分（✅ 熟练 / ⚠️ 用过 / ❌ 没碰过）：

技能	验证标准
HTML	能写语义化页面结构，表单表格无障碍
CSS	能用 Flex/Grid 做响应式布局，不靠调参碰运气
JS	能写函数处理数据，会 DOM 操作和事件
Git	分支、合并、解冲突不心虚
React	能独立写出待办清单级别的应用
工程化	npm scripts、环境变量、部署全流程跑通

全部 ✅ → 可以进入进阶；有 ⚠️ → 针对性补；有 ❌ → 回炉对应课程。

步骤 2：必学的深化内容（1-2 个月）

无论选什么方向，这四块都要补：

JavaScript 深水区：

// 异步编程（工作中每天在用）
async function loadData() {
    try {
        const res = await fetch("/api/data");
        const data = await res.json();
        return data;
    } catch (err) {
        console.error("加载失败", err);
    }
}

// 事件循环（面试必考）
console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);
// 输出：1 4 3 2（同步 → 微任务 → 宏任务）

重点学：Promise/async-await、事件循环、闭包、this 指向、原型链。

：现代公司的新项目几乎都是 TS。在 JS 基础上加类型：