如何使用本手册

这本手册不打算教会你"前端的一切"。它教你在 2026 年，与 AI 协作的前端工程师必须知道的事，以及为什么其他事可以不知道。

你是谁

本手册预设三类读者。先认出自己，再选路径。

新入行 / 转行者

你刚开始接触前端，或者从别的方向（后端、设计、产品、运营）切换过来。 你面对的最大问题不是"学不会"，而是"不知道学什么、学到哪算够"。

本手册对你的承诺：给你一条清晰的主干路线，明确告诉你学到哪里就可以 开始找工作 / 接项目，以及哪些看起来很热但其实不需要学的东西。

1–3 年经验

你已经能独立完成业务需求，但对底层原理、新技术（RSC、View Transitions、 React Compiler 等）、AI 协作工作流没有系统理解。你需要的是查漏补缺和 对标 2026 年的标准。

本手册对你的承诺：每个知识点配有"为什么 AI 时代仍要学"的判断，以及 精选的一手深入资源。你可以挑感兴趣的章节直接读，不用从头开始。

资深工程师

你已经知道大部分内容，但希望快速判断哪些过去的经验在 AI 时代失效了， 以及新一代工具链（Next.js 16、Tailwind v4、OXC、agent harness）值不值得 切换。

本手册对你的承诺：充当一份"反向 changelog"——告诉你什么不用教新人了， 以及如何把团队的工作流升级为 agent-ready。

三种使用方式

不同读者有不同的最佳读法。手册的导航支持你切换路径。

路径 A：系统学习（从头到尾）

适合：新入行 / 转行者。

按章节顺序读，第 0 → 1 → ... → 10。每章自洽，但章节间有合理的递进。

不必预设固定时长。每个人的基础与学习方法不同，按章节推进、配合自己的 小练手即可。如果你读到的中文学习路线告诉你需要"3 个月全职"才能入门， 那是百科式教学的代价，不是入门的真实成本。

路径 B：按需查阅（速查）

适合：1–3 年经验、资深工程师。

把手册当作一本可搜索的索引：

• ⌘ K（macOS）/ Ctrl K（Windows / Linux）唤起搜索
• 通过侧边栏直接跳到某节
• 每节末尾有"延伸阅读"链向一手来源

每节都做了"独立自洽"处理，你不需要读前置章节也能用。

路径 C：实践驱动（边做边学）

适合：喜欢动手的所有读者。

直接跳到 第 10 章 动手实践，从三个项目之一开始：

• mini bundler — 理解构建工具
• mini framework — 理解 React 心智模型
• mini agent app — 理解 AI 时代的完整前端工作流

实践过程中遇到不懂的概念，章节内会带"回溯链接"指向对应理论章节。

三档归位

每个知识点会标注它在 AI 时代的"必要程度"。这是本手册最核心的取舍机制， 也是和 roadmap.sh 等大而全清单最大的区别。

关键判断：

三档不是"重要性"排序，而是"人 vs agent 的分工"。 必学的不是因为它最难，而是因为它是你判断 AI 输出对错的依据。

举例：你可以让 AI 写一个完整的 React 组件，但只有你理解 React 渲染规则， 你才能判断它有没有引入不必要的重渲染。理解是必学的，敲字可以委托。

故意不在主干的内容

这是有争议但必要的清单。下列内容在 2026 年的真实前端工作中已不再值得作为 必学项——你可以查到它们，但不需要专门学：

• 浮动布局、清除浮动、CSS Hack、IE 兼容性
• jQuery 及其生态
• ES5 polyfill 手写、Babel 详尽配置
• Webpack 复杂配置（保留概念，配置交给 AI）
• Class 组件生命周期细节
• "手写 Promise / 手写 bind / 手写 deepClone" 类面试八股
• 手写 XHR、AJAX 兼容
• Jest 历史与迁移指南（我们直接用 Vitest）

如果你正在准备一些把上述内容当考点的面试——这本手册帮不上你。 但也许问题不在这本手册。

完整理由见 第 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 / 极客时间 / 慕课网付费课等）

不是因为这些资源都不好，而是因为本手册要做"读者可信赖的导航"，只链向 能长期保持权威性的来源。

关于"AI 可委托清单"

本手册的核心立场之一：明确告诉你哪些事现在可以放心委托给 AI 了。 这是一份会随时间变化的清单——我们会持续更新（判断依据见 SPEC-0004）。

完整清单见 第 1 章。这里给一份速查版：

现在可以委托给 AI 的：

• 样板代码：CRUD 组件、表单、配置文件
• 单元测试骨架（你来确认边界用例）
• commit message、PR 描述、变更日志
• 正则表达式、SQL、复杂 CSS 选择器
• 文档翻译、注释润色
• 错误信息的解读与 Stack Overflow 答案的甄别
• TypeScript 类型推导的辅助（特别是泛型）

暂时不要委托的：

• 架构决策（agent 缺乏长程上下文）
• 性能问题诊断（需要 profiling 经验）
• 安全相关代码（CSP、CSRF、SQL 注入防护——必须亲自审）
• 涉及业务规则的核心逻辑
• 任何你说不清楚验收标准的事

关于"本手册即活教材"

你正在读的这个站点本身就是手册的实践示例。它使用：

• 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 后作为你自己的学习笔记。

时效与勘误

每页底部标注最后核对日期。涉及版本号、API 行为的描述如果超过半年未 核对，会显示"此节可能已过期"的提示。

发现错误或链接失效？欢迎在 GitHub Issues 提出。

现在开始

• 新入行 / 转行者 → 第 1 章 AI 时代前端工程师的能力地图
• 1–3 年经验 → 直接搜索你感兴趣的关键词（⌘ K）
• 资深工程师 → 第 1 章的"AI 可委托清单" 和 第 9 章 AI 原生工作流
• 实践派 → 第 10 章 动手实践

读到任何让你说"啊，这就够了？"的时刻——那是本手册在做它该做的事。