第 0 章
如何使用本手册
三类读者、三种路径、三档归位——以及为什么本手册"故意不全"
这本手册不打算教会你"前端的一切"。它教你在 2026 年，与 AI 协作的前端工程师必须知道的事，以及为什么其他事可以不知道。
你是谁
本手册预设三类读者。先认出自己，再选路径。
新入行 / 转行者
你刚开始接触前端，或者从别的方向（后端、设计、产品、运营）切换过来。 你面对的最大问题不是"学不会"，而是"不知道学什么、学到哪算够"。
本手册对你的承诺：给你一条清晰的主干路线，明确告诉你学到哪里就可以 开始找工作 / 接项目，以及哪些看起来很热但其实不需要学的东西。
1–3 年经验
你已经能独立完成业务需求，但对底层原理、新技术、AI 协作工作流没有 系统理解。比如：React 服务端组件（RSC）到底解决了什么？Next.js 16 的 Cache Components 该怎么用？React Compiler 帮你做了什么、又没做 什么？你需要的是查漏补缺和对标 2026 年的标准。
本手册对你的承诺：每个知识点配有"为什么 AI 时代仍要学"的判断， 以及精选的一手深入资源。你可以挑感兴趣的章节直接读，不用从头开始。
资深工程师
你已经知道大部分内容，但希望快速判断哪些过去的经验在 AI 时代失效了， 以及新一代工具链（Next.js 16、Tailwind v4、OXC、agent harness）值不值得 切换。
本手册对你的承诺：充当一份反向更新日志——不告诉你"又出了什么新东西"， 而是告诉你什么不用再教新人了、哪些经验已经过期，以及如何把团队的 工作流升级为"AI 友好"。
三种使用方式
不同读者有不同的最佳读法。手册的导航支持你切换路径。
路径 A：系统学习（从头到尾）
适合：新入行 / 转行者。
按章节顺序读，第 0 → 1 → ... → 10。每章自洽，但章节间有合理的递进。
不必预设固定时长。如果你看到的中文学习路线告诉你需要"3 个月全职"才能 入门——那是百科式教学的代价，不是入门的真实成本。
路径 B：按需查阅（速查）
适合：1–3 年经验、资深工程师。
把手册当作一本可搜索的索引：
- 通过侧边栏直接跳到某节
- 每节末尾有"延伸阅读"链向一手来源
每节都能单独读——遇到不熟悉的概念，会有指向对应基础章节的回链。
路径 C：实践驱动（边做边学）
适合：喜欢动手的所有读者。
直接跳到第 10 章「动手实践」（即将推出），从三个项目之一开始：
- mini bundler — 理解构建工具
- mini framework — 理解 React 心智模型
- mini agent app — 理解 AI 时代的完整前端工作流
实践过程中遇到不懂的概念，章节内会带"回溯链接"指向对应理论章节。
三档归位
每个知识点会标注它在 AI 时代的"必要程度"。这是本手册最核心的取舍机制， 也是和 roadmap.sh 等大而全清单最大的区别。
三档不是"重要性"排序，而是"人 vs AI 的分工"。 必学的不是因为它最难，而是因为它是你判断 AI 输出对错的依据。
举个例子帮你理解：你可以让 AI 写一个完整的登录表单组件，但 只有你懂 React 的状态管理和事件处理，才能判断 AI 写的代码是不是 存在不必要的重复渲染、有没有把用户密码不小心存进了 localStorage。 理解是必学的，敲字可以委托。
下面是三档的具体含义和例子：
| 档位 | 含义 | 典型例子 |
|---|---|---|
| 必学 | 你不掌握就没法判断 AI 输出对不对 | 看懂报错信息、调试一个 bug、读懂别人的代码、知道页面卡顿可能怎么排查 |
| 仍需理解 | 应该看得懂、改得动、说得清，不必从零手写 | 正则表达式、配置文件、复杂的 CSS 兼容问题 |
| 可委托 AI | 你说清楚要什么，AI 写、你验证 | 样板组件、commit 信息、单元测试骨架、表单校验逻辑 |
故意不在主干的内容
这是有争议但必要的清单。下列内容在 2026 年的真实前端工作中已不再值得作为 必学项——你可以查到它们，但不需要专门学：
- 浮动布局、清除浮动、CSS Hack、IE 兼容性
- jQuery 及其生态
- ES5 polyfill 手写、Babel 详尽配置
- Webpack 复杂配置（保留概念，配置交给 AI）
- Class 组件生命周期细节
- "手写 Promise / 手写 bind / 手写 deepClone" 类面试八股
- 手写 XHR、AJAX 兼容
- Jest 历史与迁移指南（我们直接用 Vitest）
新入行的读者：如果上面列表里很多词你完全不认识——这是好事。 它们是上一代前端工程师的"必修课"，但 2026 年的工作里你大概率不会遇到。 不要觉得自己"落后"了。
如果你正在准备一些把上述内容当考点的面试——这本手册帮不上你。 但也许问题不在这本手册。
完整理由见 第 1 章 AI 时代前端工程师的能力地图。
关于来源筛选
本手册的内容来源准入标准明确规定了只引用一手权威来源：
优先引用：
- W3C / WHATWG / TC39 / IETF 规范
- MDN、web.dev、Chrome for Developers
- React / Next.js / TypeScript 等框架官方文档
- 大学开放课程（赫尔辛基大学 Full Stack Open、The Odin Project）
- 作者授权免费在线书籍（You Don't Know JS、JavaScript.info、HPBN）
不收录：
- 个人博客（极少数框架核心维护者除外）
- 掘金 / CSDN / 知乎专栏 / 博客园 / 简书等社区投稿文章
- AI 拼接的"路线图汇总"
- 任何付费课程或付费墙后的内容（Frontend Masters / 极客时间 / 慕课网付费课等）
不是因为这些资源都不好，而是因为本手册要做"读者可信赖的导航"——只链向 能长期保持权威性、免费可达的来源。
关于访问性
部分一手来源（Medium 上的英文博客、部分国外厂商文档）在中国大陆需要 代理访问。本手册的处理原则：
- 优先选不需要代理的来源——MDN / 框架官方文档 / GitHub / 大学 开放课程绝大多数可直接访问
- 受限链接旁明确标注「需代理」——让你点开前就知道
- 不可替代的高质量内容会保留——比如 Karpathy 的早期论述、 Anthropic 一手文档；但它们都不是"必读"，本手册主干不依赖它们
- 欢迎在 Issues 提替代来源建议——发现某条受限内容有等质量的 可直访来源，请告诉我们
关于"AI 可委托清单"
本手册的核心立场之一：明确告诉你哪些事现在可以放心委托给 AI 了。 这是一份会随时间变化的清单——我们会持续更新。
完整清单和判断方法见 第 1 章 §1.4。 这里给你一个最直观的速查印象：
- 可以放心委托给 AI：样板代码、commit 信息、单元测试骨架、文档翻译、 正则表达式、注释润色等"有明确对错、改了不破坏现有代码"的任务
- 暂时不要委托给 AI：架构决策、性能诊断、安全相关代码、业务规则 核心逻辑、任何"你说不清楚什么算对"的事
更细的颗粒度和判断维度（D1-D5）在第 1 章里展开。
关于"本手册即活教材"
你正在读的这个站点本身就是手册的实践示例。它使用：
- Next.js 16 + React Server Components + Cache Components
- Tailwind CSS 4（CSS-first 配置）
- OXC 工具链（oxlint + oxfmt，取代 ESLint + Prettier）
- Turbopack（替代 Webpack）
- Vercel 部署 + Speed Insights + Web Analytics
- agent harness：AGENTS.md + specs/ + journal/（源码完全开源）
新入行的读者：上面这些技术栈名字看不懂没关系——你不需要现在就懂。 等读到对应章节自然会讲清楚每一个是什么、为什么选它。
当你读到第 5、6、9 章时，会看到对应章节回链到本项目的真实源码。 源码完全开源，欢迎 fork 后作为你自己的学习笔记。
时效与勘误
每页顶部标注最后更新日期——这是该章文件最近一次提交到 git 仓库的 时间，可以作为内容新鲜度的参考。
发现错误或链接失效？欢迎在 GitHub Issues 提出。
现在开始
- 新入行 / 转行者 → 第 1 章 AI 时代前端工程师的能力地图
- 1–3 年经验 → 从侧边栏直接跳到你感兴趣的章节
- 资深工程师 → 第 1 章的"AI 可委托清单"
- 实践派 → 第 10 章「动手实践」即将推出
读到任何让你说"啊，这就够了？"的时刻——那是本手册在做它该做的事。