系统学习路线

系统学习路线

这是可搜索的路线说明；完整文章清单、阶段检查点和阅读统计见 交互式学习路线。

阶段顺序

1. Web 基础：HTML、CSS、JavaScript、ES6 和 TypeScript。先建立文档、样式、语言运行时和类型约束的共同模型。
2. 浏览器与网络：浏览器机制、HTTP、DNS、TLS、缓存、CDN、存储、跨域与安全。
3. 框架主线：按岗位选择 React 或 Vue 深入，另一套框架用于概念对照；Angular 和小程序作为专项。
4. 工程交付与编译：Git、Vite、Webpack、esbuild、AST/Babel、组件库、Docker、测试、监控、发布和回滚。
5. 性能与可观测性：用 LCP/INP/CLS 和现场数据定位网络、渲染、运行时、内存与构建问题，建立预算和回滚。
6. 项目场景：登录权限、请求协调、分片上传、API 协作、事务/锁、微前端、低代码和 AI 前端；先看项目亮点总览，再按AI 对话 → 低代码 → Hooks/组件库 → 规范 CLI → 稳定性 → 性能阅读六个项目案例，用项目证据卡组织表达。
7. 算法表达：复杂度、哈希、双指针、链表、树、图、堆、排序、贪心、回溯和动态规划。建议按“模型总览 → 题型专题 → 变体与边界”的顺序阅读：先看复杂度与基础、哈希表和数组去重与随机抽样，再进入双指针、滑动窗口、单调栈和单调队列。 树、图和状态题继续阅读树结构互转、小镇法官和线性 DP，最后练习异步调度与大数运算，每题都补复杂度、边界和验证方式。

每阶段的完成标准

• 能用一张图解释核心机制，而不是只记 API 名称。
• 能写一个最小实现或实验，并说明输入、输出和失败边界。
• 能把结论连接到一个项目场景、监控指标或测试策略。
• 能在进入下一阶段前，用 2 到 5 分钟口述当前阶段的取舍。

路线不要求一次读完全部文章；先完成每阶段列出的重点文章，再按 项目场景索引 和 9 月高频真题地图 定向补充。完成主线后，用 前端趋势与面试能力模型 把实验性方向、AI 工程和面试表达串起来。