学习路线
六个递进阶段
| 阶段 | 训练重点 | 入口 |
|---|---|---|
| Web 基础 | 平台、语言和类型边界 | 开始学习 |
| 前端框架 | 响应式、渲染和全栈框架设计 | 比较框架 |
| 构建工具 | 转换、打包、缓存和产物 | 开始学习 |
| JavaScript 运行时 | 引擎、事件循环和权限模型 | 开始学习 |
| 全栈后端 | 契约、并发和部署选择 | 开始学习 |
| Agent Developer | 检索、工具、评测和安全 | 开始学习 |
文章中的“运行效果”直接加载仓库对应示例。每个示例独立构建，运行时与文档样式互不干扰。
从问题进入路线
如果你正在排查浏览器行为，先从 Web 基础 建立 DOM、样式、脚本、类型与宿主 API 的共同模型；如果问题是状态更新、首屏渲染或缓存策略，进入 前端框架 对照不同实现；如果问题发生在配置、产物、HMR、chunk 或部署，进入 构建工具 沿流水线定位。每个阶段的比较与总结页都会说明职责、性能条件、可靠性、维护成本和迁移边界，避免把工具名称本身当作结论。
完整的阶段依赖与贯穿项目边界见 项目总览。
用同一个任务串起前三个阶段
建议选取同一个小任务反复阅读前三个阶段，例如“用户修改一条检查记录并在另一台设备看到确认结果”。在 Web 基础部分，先理解这条任务的 HTML 表单、CSS 可读性、JavaScript 取消与时间模型、TypeScript 运行时验证，以及 Fetch、存储、Worker 和缓存边界；进入前端框架后，再比较组件草稿、路由读取、SSR 与水合、服务端命令、缓存失效和发布资源如何组织；最后到构建工具部分查看源码、模块图、动态 chunk、manifest、CDN 与回滚如何把同一任务交付给浏览器。
| 当前问题 | 先读 | 再读 | 用于复盘的入口 |
|---|---|---|---|
| 表单、请求、离线或浏览器缓存 | Web 基础总结 | Web 基础对比 | 浏览器 API |
| 组件状态、首屏、服务端读取或命令 | 框架导读 | 框架对比 | 框架总结 |
| HMR、资源 404、chunk、source map 或发布 | 构建工具导读 | 构建工具对比 | 构建工具总结 |
阅读过程中保留四个共同字段：用户任务、当前范围（匿名/用户/组织）、数据/命令版本、资源/构建版本。它们能把“页面有时不对”“刷新后恢复”“只有旧标签失败”这样的描述，逐步缩小为浏览器、框架状态或构建发布中的具体边界。每一栏的比较页给出条件化选择，而总结页则提供从用户症状反向定位的复盘路径。