这份手册按「阶段递进」组织，共 10 个阶段。每个阶段都从零基础讲起，把原理讲透、配大量代码示例、指出常见坑、布置实战项目、附通关自检题。学完一个阶段再做下一个，不要跳。
这套手册怎么用，效果最好？
每一阶段都建立在前一阶段之上。比如不懂作用域与闭包，后面看框架源码必然卡壳。目录已按依赖排好序。
手册里每个代码示例，先看懂了，再关掉文档凭记忆重写一遍。写不出来，说明还没学会——回炉再看。
每阶段末尾的自检题，试着像讲课一样把答案说出来。能给别人讲清楚，才算真正掌握。
每阶段都有实战项目。项目不是加分项，是检验标准——把项目独立做出来，该阶段才算通关。
所有踩过的坑、写错的代码，记到自己的错题本里（建议存在 D:\WorkBuddy 下）。复习时只看错题本，效率最高。
周末花 30 分钟：这周学了什么？哪些还模糊？下周补什么？用下方进度表持续跟踪。
点击每个阶段可展开详细知识点清单。总学习量约 600~800 小时，每天 2 小时约一年达成。
① 响应式个人主页（桌面 + 手机双端适配）；② 仿一个知名网页的静态布局（如新闻门户首页）。
不用查文档，能独立完成任意给定原型图的静态还原；能解释「为什么这个元素会在页面那个位置」。
① 手写 Promise；② 手写防抖/节流/深拷贝；③ 原生 JS 实现一个 Todo 应用（含增删改查、本地存储）。
能不看资料手写：深拷贝、Promise、防抖节流；能说清「闭包为什么会造成内存泄漏，怎么解决」；能画出事件循环的执行流程图。
① 用性能面板分析自己主页的加载与渲染瓶颈；② 写一篇「从输入 URL 到页面显示」的完整流程图笔记。
能完整口述「输入 URL 后发生了什么」；能解释强缓存与协商缓存的区别并说出配置方式；能说清 XSS 与 CSRF 的三种防御手段。
① 从零用 Vite 搭一个项目并接入 ESLint+Prettier+husky；② 手写一个简单的打包器（处理依赖图）。
能说清 Vite 为什么比 Webpack 快；能解释 Tree Shaking 的原理与前提条件；能独立搭建规范的工程化项目。
① 用 React 重写 Todo 应用并加多用户；② 实现一个带虚拟滚动的表格组件；③ 封装一个自定义 Hook 库。
能画出「setState 后界面如何更新」的完整流程图；能解释为什么 Hooks 不能写在条件语句里；能独立设计组件树并给出理由。
① 购物车应用：全局购物车 + 服务端商品列表 + 表单结算，做完整状态分层；② 给现有项目做状态重构。
给任意一个功能描述，能说出每个状态放哪、用什么方案、为什么；能解释「为什么服务端数据不该放全局 store」。
① 将自己的项目核心指标优化到绿色区间并记录前后对比；② 写一份性能优化报告（问题→方案→结果）。
能独立完成一次完整的性能诊断与优化闭环；能用数据证明优化效果；能说清每个指标的含义与优化手段。
① 给 Todo 应用写完整的单元+组件+端到端测试，覆盖率超 80%；② 对自己代码做一次重构并说明手法。
能解释为什么「单元测试覆盖率高不等于质量好」；能独立设计测试用例；能安全地完成一次小规模重构。
① 设计一个中后台系统的完整架构方案（含分层图、状态模型、工程化方案）；② 给一个「假想业务」做微前端 vs 单体的决策分析。
能独立撰写架构设计文档并通过模拟评审；能在「加抽象」与「不加抽象」之间给出有说服力的权衡；能说出微前端真正解决的问题是什么。
① 整理一份自己项目的技术债台账并排优先级；② 写 3 篇 ADR 覆盖近期的关键技术决策；③ 准备一场 30 分钟技术分享并演练。
能在团队中发起并主持一次技术评审；能把自己的技术方案讲清楚并推动落地；能系统管理一个项目的技术债。
每完成一个阶段，把对应行的状态改为「进行中」或「已完成」，并记录日期与心得。
| 阶段 | 主题 | 预计时长 | 开始日期 | 完成日期 | 状态 | 自评（1-5） |
|---|---|---|---|---|---|---|
| 1 | HTML 与 CSS | 60h | ⬜ 未开始 | |||
| 2 | JavaScript 核心 | 100h | ⬜ 未开始 | |||
| 3 | 浏览器与网络 | 80h | ⬜ 未开始 | |||
| 4 | 工程化与构建 | 80h | ⬜ 未开始 | |||
| 5 | 框架核心 | 120h | ⬜ 未开始 | |||
| 6 | 状态管理与数据流 | 60h | ⬜ 未开始 | |||
| 7 | 性能优化实战 | 70h | ⬜ 未开始 | |||
| 8 | 测试与代码质量 | 60h | ⬜ 未开始 | |||
| 9 | 架构设计与模式 | 100h | ⬜ 未开始 | |||
| 10 | 团队协作与治理 | 40h | ⬜ 未开始 |