5 到 8 年资深前端：AI Agent 时代前置能力大纲
这份大纲是进入 AI Agent 学习之前的前端能力回顾地图。它不是基础教程，不重复介绍 HTML、CSS、JavaScript 语法和框架入门，而是把资深前端需要掌握的运行时、异步、事件、工程化、产品形态和系统能力整理成模块。每个模块都会说明它和 AI Agent 的哪些概念有关系。
模块 1：浏览器 JavaScript 运行时、异步与事件系统
模块定位
浏览器运行时是前端理解异步、流式渲染和交互状态的基础。AI 前端大量处理 SSE、token 流和工具结果事件，所以必须先能解释事件循环和异步模型。
广度知识地图
- JavaScript 调用栈、堆、执行上下文和闭包。
- 微任务、宏任务、渲染帧、
requestAnimationFrame、MessageChannel。 - Promise、
async/await、Generator、AsyncGenerator、AsyncIterable。 AbortController、AbortSignal、超时和取消传播。- DOM 事件捕获、冒泡、委托、
EventTarget和自定义事件。
深入主题
- 微任务、宏任务和浏览器渲染之间的执行顺序。
Promise.then和queueMicrotask的差异。- 如何用
AsyncIterable消费流式数据。 - 如何把高频 token 更新合并到 React 渲染周期。
AbortSignal在 fetch、流和自定义任务中的取消语义。
必须能回答的问题
- 为什么
setTimeout(0)不一定立即执行？ Promise.then、requestAnimationFrame和MessageChannel的执行顺序是什么？- 为什么处理 SSE 输出更合适用
AsyncIterable，而不是普通回调数组？ - 如何在一个组件卸载时可靠取消进行中的流式请求？
- 事件委托在什么场景下会失效？
最小实践
实现一个浏览器端的 token 流渲染器，用 ReadableStream 或 AsyncIterable 消费分块文本，并按帧合并更新页面内容。
AI Agent 概念对照
- LLM SSE chunk 对应异步流。
- token 到消息节点对应高频状态更新和渲染合批。
- 工具调用完成事件对应自定义事件或事件委托。
AbortController对应 Agent 请求取消和用户中断。
后续阅读入口
模块 2：TypeScript 类型系统与结构化设计
模块定位
资深前端不能用 TypeScript 只写接口和 any，而要能设计类型边界、约束工具参数和表达复杂状态。AI Agent 的会话事件、工具 Schema 和消息联合类型都依赖这一点。
广度知识地图
- 接口、类型别名、泛型、联合类型和交叉类型。
- 条件类型、
infer、映射类型、模板字面量类型。 - 判别联合、
satisfies、as const、branded type。 - 模块扩展、声明合并和全局类型。
zod、JSON Schema 和运行时校验。
深入主题
- 用判别联合表达不同消息类型。
- 用 branded type 区分 session id、tool id 和普通 string。
- 用类型系统约束工具输入，而不是运行时层层手写判断。
- 类型化事件表和声明合并。
- 结构化输出和 partial JSON 的边界。
必须能回答的问题
- 为什么工具结果最好使用判别联合，而不是统一对象加
type字符串？ infer在哪些真实业务场景中能减少重复类型？- 什么是 branded type，为什么跨边界 id 不应该裸用 string？
- TypeScript 的类型安全和运行时 JSON Schema 分别负责什么？
- 如何在不引入运行时库的情况下让联合类型覆盖完整？
最小实践
定义一套 Session Event 联合类型，包含用户消息、助手消息、工具调用、工具结果和错误，并写一个不会遗漏分支的渲染函数。
AI Agent 概念对照
- Session Event 对应判别联合。
- Tool Definition 对应输入 Schema 和输出 Contract。
- 结构化输出对应 partial JSON 和运行时校验。
- 声明合并对应 Agent 事件类型扩展。
后续阅读入口
模块 3：Node.js 运行时、事件循环与后端异步
模块定位
前端工程师不一定写完整后端，但 AI 应用前端经常要和 Node 服务、SSE、工具执行和会话日志打交道。理解 Node.js 运行模型能避免把浏览器经验直接套到服务端。
广度知识地图
- libuv 和 Node.js Event Loop。
- timers、pending callbacks、poll、check、close callbacks 阶段。
process.nextTick、setImmediate和 Promise 微任务。- Stream、Readable、Writable、Transform 和 backpressure。
worker_threads、child_process、IPC 和进程退出。
深入主题
- Node.js Event Loop 与浏览器 Event Loop 的差异。
process.nextTick、setImmediate和 Promise 的执行顺序。- 如何正确关闭子进程并处理孤儿进程。
- SSE 服务如何保持连接、处理断线和清理资源。
- 异步错误如何传播，哪些边界必须捕获。
必须能回答的问题
- Node.js 为什么需要 libuv？
process.nextTick和 Promise 微任务谁先执行？- 什么时候用
worker_threads，什么时候用child_process？ - Stream 的 backpressure 是什么，前端消费 SSE 时需要注意什么？
- 一个子进程在 Agent 工具执行中崩溃，如何可靠回传失败？
最小实践
实现一个最小 Node.js SSE 服务，持续输出 token 流，并正确处理客户端断开、超时和进程退出。
AI Agent 概念对照
- Node.js Event Loop 对应 Agent 请求调度。
child_process对应工具执行和沙箱。- Stream 对应 LLM Provider 的输出流。
- 进程退出和清理对应工具超时、取消和 guard。
后续阅读入口
模块 4：前端事件传递、注册与插件机制
模块定位
插件系统和事件机制是大型前端架构的核心。DeepSeek Harness 把事件和 effect 作为插件贡献入口，前端需要理解这些模型才能设计工具 UI、扩展点和可恢复状态。
广度知识地图
- DOM 事件捕获、冒泡和目标阶段。
- 事件委托、自定义事件和
EventTarget。 EventEmitter、类型化事件表和事件订阅清理。- 中间件、waterfall、hook、effect 和 disposer。
- 插件注册、生命周期和依赖注入。
深入主题
- 捕获和冒泡的执行顺序，以及何时使用
stopPropagation。 - 为什么类型化事件表比字符串事件名更可靠。
- waterfall 中必须调用
next()的语义。 - 如何保证插件 disposer 和事件订阅成对清理。
- 事件日志和只追加日志如何支持回放。
必须能回答的问题
- 事件捕获和冒泡分别适合什么场景？
- 为什么大型插件系统通常使用事件或 effect，而不是继承？
- 一个插件注册后返回的 disposer 应该承担什么职责？
- 类型化事件表如何约束事件负载？
- waterfall 和普通观察者模式有什么区别？
最小实践
实现一个带类型化事件表和 disposer 的最小插件注册器，支持 on、effect 和可撤销注册。
AI Agent 概念对照
ctx.on对应事件订阅。ctx.effect对应插件贡献和 disposer。- Session Event 对应只追加事件日志。
- Tool Lifecycle 对应 pre-execute、execute、post-execute 的 hook。
后续阅读入口
模块 5：前端工程化、构建与架构
模块定位
5 到 8 年经验需要从单仓库开发进入工程体系和模块边界设计。前端工程化决定团队能否稳定交付，也决定大型 AI 应用如何组织代码。
广度知识地图
- Monorepo、workspace、包依赖和版本管理。
- Vite、webpack、Rspack、esbuild 等构建工具。
- Module Federation、微前端、共享依赖和运行时边界。
- lint、typecheck、测试、CI/CD 和发布回滚。
- source plane 与 artifact plane 的区别。
深入主题
- 微前端和模块联邦分别解决什么问题。
- 如何控制 monorepo 的依赖边界和循环依赖。
- 为什么静态检查要在 source 上执行，发布检查要在 artifact 上执行。
- 大型项目如何做增量构建和缓存。
- 插件架构如何替代硬编码扩展点。
必须能回答的问题
- 什么时候不需要微前端？
- 为什么 source 路径和构建产物路径不能混用？
- 如何避免多个包复制同一份依赖？
- 一个构建缓存失效时，如何定位是配置、版本还是产物问题？
- 插件系统在构建工具和业务系统中分别怎么体现？
最小实践
搭建一个最小 monorepo，包含 shared types、Agent 核心包和前端包，并证明包边界、类型检查和构建顺序正确。
AI Agent 概念对照
- 插件化 Harness 对应工程化扩展机制。
- Tool Registry 对应包注册和依赖治理。
- Profile 和 bundle 对应可配置构建组合。
- source/artifact plane 对应源码运行和发布运行。
后续阅读入口
模块 6：B 端中后台系统
模块定位
B 端系统是复杂权限、表单、表格、工作流和审计的集合。资深前端必须能设计配置化系统，而不是逐个页面堆组件。
广度知识地图
- RBAC、租户、数据权限和按钮权限。
- 复杂表格、虚拟列表、筛选、排序、分页。
- 配置化表单、动态字段和校验。
- 工作流、状态机、审计日志。
- 设计系统、主题、国际化。
深入主题
- 如何设计权限矩阵而不是写一堆
if。 - 表格和表单的 schema 驱动。
- 复杂编辑器的脏状态和撤销。
- 长列表和大量字段下的性能。
- 审计日志如何记录谁、何时、做了什么。
必须能回答的问题
- RBAC 和数据权限分别在哪里控制？
- 为什么大型表单更适合 schema 驱动？
- 一个虚拟表格在快速滚动时如何保持选择状态？
- 工作流审批和普通状态机有什么差异？
- 审计日志应该记录哪些关键信息？
最小实践
实现一个 schema 驱动的权限表格或审批表单，并加入权限过滤和操作审计。
AI Agent 概念对照
- 工具审批 UI 对应权限系统。
- 工具执行状态对应工作流状态机。
- 会话审计对应 B 端审计日志。
- 危险操作确认对应按钮权限和风险提示。
后续阅读入口
模块 7：C 端产品、体验与渲染架构
模块定位
C 端产品关注首屏、交互、可访问性、实时体验和用户留存。AI 对话产品的流式体验、乐观更新和失败恢复都属于这一类能力。
广度知识地图
- CSR、SSR、SSG、ISR、Islands。
- Hydration、流式 HTML 和渲染边界。
- CDN、缓存、预加载、图片优化。
- Core Web Vitals、SEO 和可访问性。
- 实时协作、乐观更新和离线体验。
深入主题
- SSR、CSR 和 Islands 的取舍。
- Hydration 不匹配的产生和处理。
- 乐观更新失败时如何回滚。
- 如何保证流式对话不被高频重渲染拖慢。
- 断线重连如何做到用户无感或状态可恢复。
必须能回答的问题
- 一个内容型页面为什么不一定需要 SSR？
- Islands 架构如何减少 hydration 成本？
- 乐观更新如何设计撤销和补偿？
- 如何把 SSE 内容渲染和 React 更新解耦？
- 断线重连后如何恢复未完成的消息？
最小实践
实现一个带流式输出、乐观状态和断线重连的 C 端聊天页面，并记录首屏和交互指标。
AI Agent 概念对照
- 流式 Markdown 对应 token 增量渲染。
- 乐观 UI 对应工具执行中的 pending 状态。
- 断线重连对应会话恢复。
- Islands 和对象层对应 React-free runtime 设计。
后续阅读入口
模块 8：数据可视化与大屏交互
模块定位
可视化不只是画图表，还要理解数据转换、坐标系、渲染性能和交互状态。AI 系统中的 Agent Trace、工具状态和成本分析都需要可视化表达。
广度知识地图
- Canvas、SVG、WebGL、Three.js。
- ECharts、D3、数据驱动图形。
- 坐标系、比例尺、数据转换和动画。
- 大数据量、视口裁剪和渐进渲染。
- 交互、tooltip、缩放、刷选和状态回放。
深入主题
- Canvas 和 SVG 在大量节点下的性能差异。
- 如何做数据降采样和视口裁剪。
- 如何表达时间序列中的工具调用和 token 成本。
- WebGL 适合什么，什么时候只是增加复杂度。
- 可视化如何成为调试工具，而不只是展示层。
必须能回答的问题
- 十万个点用 Canvas 还是 SVG？
- 怎样避免 ECharts 配置变成不可维护的巨石？
- 时间轴动画如何和实际事件顺序一致？
- 如何设计一个可交互的 Agent 执行时间线？
- 可视化大屏如何平衡效果和性能？
最小实践
实现一个 Agent 执行时间线或 token 成本图，展示用户消息、工具调用、工具结果和错误节点。
AI Agent 概念对照
- Agent Trace 对应事件时间线。
- 工具状态对应节点类型和颜色编码。
- token 成本和延迟对应数据可视化指标。
- Session 回放对应时间轴播放和缩放。
后续阅读入口
模块 9：跨端开发：uni-app、小程序、H5 与多端桥接
模块定位
跨端开发要求理解不同运行容器、编译差异和桥接机制。AI Agent 如果要在小程序、H5 或移动端使用，就需要把流式 UI 和工具状态适配到不同平台。
广度知识地图
- uni-app、Taro 和小程序平台差异。
- H5、原生 WebView、混合应用。
- JSBridge、原生通信和平台 API。
- 多端编译、条件编译和样式差异。
- 离线缓存、性能、通知和后台能力。
深入主题
- 跨端框架解决什么，不能解决什么。
- 小程序与 H5 的渲染和能力差异。
- JSBridge 的调用时序、回调和错误处理。
- 流式请求在移动网络和小程序中的处理。
- 不同平台如何管理会话恢复和通知。
必须能回答的问题
- 什么时候跨端框架划算，什么时候应该原生分端？
- 小程序和 H5 在处理 SSE 时有什么限制？
- JSBridge 如何保证回调不会丢失？
- 跨端项目如何做条件编译而不破坏可维护性？
- 多端 AI 聊天状态如何保持一致？
最小实践
实现一个 uni-app 或 H5 的 AI 聊天页，处理流式输出、重连和平台能力差异。
AI Agent 概念对照
- 多端 UI 对应工具状态和消息状态的一致渲染。
- JSBridge 对应 MCP 客户端与外部工具通信。
- 通知和后台任务对应异步工具结果回传。
- 平台差异对应工具能力在客户端的降级。
后续阅读入口
模块 10：Electron 桌面应用与本地运行时
模块定位
Electron 是前端构建桌面工具和本地 Agent Runtime 的重要路径。它要求同时理解浏览器上下文和 Node.js 上下文，以及两者之间的安全边界。
广度知识地图
- 主进程、渲染进程、preload 和
contextBridge。 - IPC、主从进程职责和窗口生命周期。
contextIsolation、nodeIntegration和权限。- 原生模块、自动更新、打包和签名。
- 本地文件、进程和资源管理。
深入主题
- 主进程和渲染进程分别应该承担什么。
contextBridge为什么不能随意暴露 Node 能力。- IPC 如何避免回调地狱和消息丢失。
- 本地 Agent 如何执行文件工具并保持安全。
- 崩溃、退出和更新时如何保持会话数据。
必须能回答的问题
- 为什么不能直接给渲染进程开
nodeIntegration？ - preload 和
contextBridge的安全边界是什么？ - Electron 应用如何实现可靠自动更新？
- 本地文件工具如何把用户确认和执行隔离开？
- 主进程崩溃后如何恢复 Agent 会话？
最小实践
实现一个 Electron 壳，封装本地文件工具调用，使用 preload 暴露最小 API，并在前端展示工具状态。
AI Agent 概念对照
- 主进程对应本地 Agent Runtime。
- 渲染进程对应工具 UI。
contextBridge对应最小权限暴露。- 本地文件工具对应 sandbox 和审批。
后续阅读入口
模块 11：安全、权限与数据边界
模块定位
资深前端必须理解浏览器安全、认证、数据边界和危险操作。AI Agent 还要额外面对 prompt injection、SSRF 和危险工具。
广度知识地图
- XSS、CSRF、CORS、CSP。
- Cookie、SameSite、JWT、OAuth。
- 鉴权、授权、RBAC 和数据脱敏。
- 敏感数据、日志、审计。
- 输入校验和输出编码。
深入主题
- XSS 的存储型、反射型和 DOM 型防御。
- JWT 存储位置和 Cookie 安全的取舍。
- CORS 和 CSRF 的关系。
- prompt injection 为什么不是传统输入校验。
- 工具调用如何把用户意图和执行权限分开。
必须能回答的问题
- SameSite Cookie 能完全替代 CSRF Token 吗？
- JWT 放在 localStorage 还是 HttpOnly Cookie？
- CORS 只是保护浏览器端，还是也保护服务端？
- 为什么模型生成的 HTML 需要额外过滤？
- 危险工具为什么需要 allow、deny 和 ask？
最小实践
为一个 Agent 工具界面设计权限卡片、风险提示和审批流程，并区分允许、拒绝和需要确认。
AI Agent 概念对照
- prompt injection 对应不可信输入。
- SSRF 对应网络工具边界。
- tool approval 对应人类确认。
- 权限卡片对应前端风险表达。
后续阅读入口
模块 12：性能优化与可观测性
模块定位
性能优化需要证据，不能靠感觉。资深前端要能定位瓶颈、建立指标、观察用户行为和持续回归。AI 系统还要关心 token 成本、延迟和工具成功率。
广度知识地图
- Core Web Vitals、首屏、长任务和内存。
- 包体、拆包、按需加载、缓存。
- 网络、并发、流式传输和背压。
- Performance、Memory、Profiler、DevTools。
- 前端监控、Sentry、埋点、Trace。
深入主题
- 如何区分首屏性能、交互性能和内存问题。
- 如何定位长任务和高频渲染。
- 如何把前端 trace 和服务端 trace 串起来。
- token 流式更新如何避免 React 重复渲染。
- 如何设计可回答“为什么慢”的监控。
必须能回答的问题
- LCP、INP、CLS 分别说明什么问题？
- 一个页面很慢，如何用证据而不是经验定位？
- 高频 token 更新为什么不能每个 chunk 都触发整树 render？
- 如何监控流式连接中断和重连？
- 前端如何表达一次 Agent 请求的总延迟和分段成本？
最小实践
为一个 AI 聊天页加入性能埋点，记录首屏、token 到达、工具状态、错误和重连，并输出可解释的 Trace。
AI Agent 概念对照
- token latency 对应前端性能指标。
- tool success rate 对应业务可观测性。
- session trace 对应端到端追踪。
- 流式重连对应网络稳定性。
后续阅读入口
模块 13：测试、质量体系与评估
模块定位
资深前端要能设计测试体系，而不是只写“能跑的测试”。AI Agent 的输出不确定，所以还需要评估集、回放和快照。
广度知识地图
- 单元测试、集成测试、E2E 测试。
- 快照测试、fixture、test double。
- 类型级测试、编译期约束。
- 视觉回归、性能回归。
- 覆盖率、稳定性和测试成本。
深入主题
- 什么逻辑应该单元测试，什么应该 E2E。
- 如何让测试不依赖真实模型和 API Key。
- 如何用 fixture 回放会话和工具结果。
- 为什么覆盖率不是唯一目标。
- 如何设计可维护的测试数据。
必须能回答的问题
- AI 应用前端如何做不依赖真实模型的确定性测试？
- 快照测试什么时候有价值，什么时候是负担？
- 工具调用链路更适合单元测试还是集成测试？
- 如何保证测试在 Windows、macOS 和 Linux 都能稳定运行？
- 如何评估一个“看起来更好”的流式 UI？
最小实践
为一个工具状态机编写 fixture 回放测试，验证执行中、成功、失败和取消状态。
AI Agent 概念对照
- eval set 对应测试集。
- keyless snapshot 对应确定性格言。
- session replay 对应 fixture 回放。
- tool tests 对应工具执行测试。
后续阅读入口
模块 14：前端解决方案与系统设计
模块定位
这一模块把前面所有能力组合成端到端方案。资深前端要能从需求、数据流、状态、错误和扩展点出发设计系统，而不是只关注组件。
广度知识地图
- 端到端架构和数据流。
- 状态管理、缓存、同步和冲突。
- 实时系统、离线系统、权限系统。
- 插件系统、微前端和模块边界。
- 权衡分析、迁移和灰度。
深入主题
- 如何设计一个流式 AI 聊天的前端架构。
- 如何设计工具审批和人工接管。
- 如何设计会话恢复和回放。
- 如何设计插件化工具界面。
- 如何定义系统边界和失败兜底。
必须能回答的问题
- 设计一个 AI 客服前端，你会先定义哪些核心对象？
- 如何让工具 UI 不感知工具来源是本地还是 MCP？
- 会话日志应该保存原始事件还是派生视图？
- 一个 Agent 请求被取消、失败和重试，状态机如何建模？
- 如何证明这个方案比直接调用 API 更值得做？
最小实践
写一份 AI Agent 前端架构一页纸，包含核心对象、事件流、工具 UI、错误处理和可观测性。
AI Agent 概念对照
- Session Log 对应事件溯源。
- Tool Registry 对应插件扩展。
- Provider Seam 对应适配层。
- Frontend Streaming Runtime 对应 UI 运行时。
后续阅读入口
模块 15：技术负责人能力：方案评审、交付和团队协作
模块定位
5 到 8 年经验如果想继续向上，必须从个人产出转向方案 owner。这个模块不是技术细节，而是如何用技术判断推动交付和证明价值。
广度知识地图
- 需求拆解、范围管理和优先级。
- 技术方案、ADR、Code Review。
- 风险识别、排期、里程碑和发布。
- 事故复盘、根因分析和改进项。
- 文档、知识传递和新人指导。
深入主题
- 如何把模糊需求拆成可交付、可验证的工作。
- 如何写一份能驱动决策的技术方案。
- 如何做有效的 Code Review。
- 如何区分技术债和真正影响业务的缺陷。
- 如何用指标证明前端工作价值。
必须能回答的问题
- 一个复杂需求到达时，你会先做什么？
- 如何在时间紧张时选择保留质量和删除范围？
- 一个事故复盘应该记录什么？
- 你如何证明自己不是普通开发，而是某个模块的 owner？
- 如何把 AI Agent 项目翻译成团队目标和业务价值？
最小实践
为教育或企业服务 AI Agent 项目写一份技术方案和复盘模板，包含目标、方案、风险、验证和失败处理。
AI Agent 概念对照
- Agent 项目 owner 对应系统责任。
- 工具风险对应技术方案中的风险项。
- Session Trace 对应事故复盘证据。
- 指标和 ROI 对应项目价值证明。
后续阅读入口
Event Loop 与 Agent Loop 执行模型对照
| 执行模型 | 触发方式 | 执行单位 | 调度机制 | 取消方式 | 状态来源 | 前端如何观察 |
|---|---|---|---|---|---|---|
| 浏览器 Event Loop | 用户事件、定时器、网络回调 | 宏任务和微任务 | 事件队列加渲染帧 | AbortController 或手动清理 | DOM、组件状态和网络状态 | 性能、交互和渲染帧 |
| Node.js Event Loop | I/O、定时器、系统事件 | 阶段回调和微任务 | libuv 各阶段循环 | 流销毁、信号、进程退出 | 服务端状态和连接 | 日志、Trace 和 SSE |
| 前端异步状态机 | Promise、AsyncIterable、状态变化 | 异步任务和快照 | 队列、调度器和 React 更新 | 取消信号或 reducer 状态 | store、session 和派生视图 | UI 状态、loading 和错误 |
| Agent ReAct Loop | 用户消息或工具结果 | turn 和 step | 模型决定继续、调用工具或结束 | 用户中止、策略拒绝或超时 | Session Event Log | 消息、工具状态和 Trace |
这四种模型不是同一层级。浏览器和 Node.js Event Loop 是底层执行机制，前端异步状态机是业务层状态组织，Agent ReAct Loop 是模型和工具共同驱动的上层控制流。理解它们的差异，才能解释为什么 Agent 前端需要同时处理流、事件、工具状态和用户中止。
建议阅读顺序
第 1 阶段：建立运行时基础
读模块 1 到 3，重点是浏览器 Event Loop、Node.js Event Loop、异步编程和 AsyncIterable。这些是进入流式 UI 和 Agent Loop 的前置能力。
第 2 阶段：建立事件和工程化能力
读模块 4 到 5，重点是事件传递、插件注册、disposer、monorepo 和包边界。这些能力对应 Agent 的插件系统和工具注册。
第 3 阶段：理解产品形态
读模块 6 到 7，覆盖 B 端权限、表单、审计和 C 端流式体验。这是 AI Agent 产品前端最直接的业务底座。
第 4 阶段：扩展平台能力
读模块 8 到 10，覆盖可视化、跨端和 Electron。这些模块决定你能否把 Agent 产品扩展到更多设备和本地运行场景。
第 5 阶段：补齐系统级能力
读模块 11 到 15，覆盖安全、性能、测试、系统设计和技术负责人能力。它们决定你能否从“做页面”升级为“负责一个完整 AI 应用前端”。
完成这份大纲后，再进入 agent-frontend-interview 基础版和进阶版，会有更清晰的技术底座。