前端工程师能力全景

前端工程师能力全景

我把前端能力分成 5 大块、20 个模块，按「投入产出比 + 长期价值」排序。先看雷达图，再挑重点。

一、能力雷达（一眼看清）

                    JS 基础与 TS
                      ●●●
                  ●●         ●●
              ●●                 ●●
   CSS 布局   ●●                   ●●  框架深度
       ●●●●● ●                     ● ●●●●
   安全       ●●                  ●●       性能
              ●●                 ●●
                  ●●          ●●●
                    ●●   ●●●
                工程化  ●●●  架构
                ●●●●●●●●●●●
                调试  测试   可观测
                ●●●
                
          +  AI 时代：AI 编程 + 流式协议 + Agent
          +  软技能：业务理解、协作、文档、分享

异步请求只是「网络」这一块里的一小部分。

二、按"对中高级前端的优先级"排

🔴 必学（决定职业上限）

# 模块 核心内容 评级
1 JS 基础与底层 闭包、原型链、this、作用域、ES6+、事件循环 ⭐⭐⭐⭐⭐
2 TypeScript 类型系统、泛型、infer、类型体操、声明文件 ⭐⭐⭐⭐⭐
3 框架深度 响应式原理、diff 算法、生命周期、组合式 API/hooks 心智 ⭐⭐⭐⭐⭐
4 性能优化 加载（LCP/FCP）、运行时（长任务）、网络（缓存/合并）、CLS ⭐⭐⭐⭐⭐
5 调试能力 DevTools 全会用、断点、SourceMap、性能分析、内存泄漏 ⭐⭐⭐⭐⭐
6 安全 XSS、CSRF、Token 存储、依赖审计、内容安全策略（CSP） ⭐⭐⭐⭐⭐
7 可观测性 错误日志、慢请求、性能监控、用户行为埋点 ⭐⭐⭐⭐⭐

🟡 进阶（决定能不能独立做项目）

# 模块 核心内容 评级
8 CSS 深度 Flex/Grid、动画、CSS 变量、Container Queries、CSS-in-JS ⭐⭐⭐⭐
9 工程化 Vite/Webpack 原理、Tree-shaking、Code Splitting、CI/CD ⭐⭐⭐⭐
10 测试 单测（vitest）、组件测试、Playwright E2E、覆盖率 ⭐⭐⭐⭐
11 代码质量 ESLint/Prettier、Pre-commit、CR 规范、技术债管理 ⭐⭐⭐⭐
12 架构能力 状态管理、路由、权限、组件库设计、Monorepo ⭐⭐⭐⭐
13 微前端（本项目用了） qiankun / micro-app / Module Federation、隔离、通信 ⭐⭐⭐⭐

🟢 拓展（决定天花板和稀缺性）

# 模块 核心内容 评级
14 BFF / Node 写中间层、用 TS 写服务端、了解 RPC ⭐⭐⭐
15 跨端 小程序、Taro、React Native、Electron ⭐⭐⭐
16 可视化 Canvas/SVG/WebGL、ECharts/Three.js 二次开发 ⭐⭐⭐
17 低代码 协议设计、表单引擎、组件编排 ⭐⭐
18 业务建模 领域驱动、复杂状态机、流程引擎 ⭐⭐⭐

🆕 AI 时代的新重点（强烈建议立刻补）

# 模块 核心内容 评级
19 AI 编程工具 Copilot / Cursor / Claude Code、Prompt 技巧、Agent 协作 ⭐⭐⭐⭐⭐
20 AI 协议与流式 Function Call、Tool Use、SSE/流式 fetch、Embedding ⭐⭐⭐⭐
21 RAG / Agent 向量检索、Agent 编排、私有知识库、Prompt 工程 ⭐⭐⭐⭐

三、每个模块"最该做的 3 件事"

不给书单（容易过时），只给立刻能动手的事。

1. JS 基础

  • ✅ 手写 5 个 bind/call/apply/Promise/EventEmitter
  • ✅ 用 Chrome Memory 抓一次内存泄漏
  • ✅ 读 V8 源码的 TurboFan 优化 一篇博客

2. TypeScript

  • ✅ 给自己的项目写一个 Result<T, E> 错误处理类型
  • ✅ 用 infer 推导 API 响应类型
  • ✅ 读 tsconfig.json 每个选项的官方解释

3. 框架深度（Vue 3）

  • ✅ 读 Vue 源码的 reactive.ts 和 diff 算法
  • ✅ 写一个支持 v-model + slot + provide/inject 的组件
  • ✅ 调研"为什么 ref 用 .value 而 reactive 不需要"

4. 性能

  • ✅ 用 Lighthouse 跑自己项目，把 LCP 压到 1.5s 内
  • ✅ 用 Performance 面板找一段代码里 50ms+ 的长任务并优化
  • ✅ 学React DevTools Profiler / Vue DevTools Performance

5. 调试

  • ✅ 学会用 条件断点、事件断点、XHR 断点
  • ✅ 用 debugger; 替代 console.log
  • ✅ 学会 Blackbox（让断点不进 node_modules）

6. 安全

  • ✅ 自己造一次 XSS（用 v-html），理解为什么危险
  • ✅ 检查项目 cookie 是否 HttpOnly + Secure
  • ✅ npm audit 跑一次

7. 可观测性

  • ✅ 接入 Sentry / 自建错误监控
  • ✅ 给关键接口加 traceId

8. CSS 深度

  • ✅ 用 Grid 重构一个老 Flex 布局
  • ✅ 学 CSS 容器查询（Container Queries）
  • ✅ 了解 CSS Houdini 是什么

9. 工程化

  • ✅ 把项目从 webpack 迁到 vite（或反过来），理解原理
  • ✅ 写一个 vite 插件
  • ✅ 调研 Rspack（Rust 版的 webpack）

10. 测试

  • ✅ 给项目加上 vitest（如果还没）
  • ✅ 用 Playwright 写第一个 E2E（登录 → 列表 → 导出）
  • ✅ 跑覆盖率，核心模块要 > 80%

11. 架构（和本项目最相关）

  • ✅ 设计一个支持 v-model / slot / 受控非受控的组件
  • ✅ 学状态机（XState）处理复杂表单/流程
  • ✅ 调研本项目的 qiankun 通信机制

12. AI 工具（这是最大的杠杆）

  • ✅ Cursor 全程写一天代码，感受差距
  • ✅ 学写 .cursorrules / CLAUDE.md（项目级 prompt）
  • ✅ 用 Claude Code / Codex 做完整 feature

13. AI 协议与流式

  • ✅ 调通一个 LLM API（OpenAI/Claude/本地 Ollama）
  • ✅ 实现打字机效果（阶段 12.3）
  • ✅ 实现一个 Function Call（让 AI 调用你的接口）

四、🎯 给你（中高级 Vue 前端）的短中长期建议

结合你的项目画像：Vue 3 + TS + qiankun + Antd-vue + 资产/财务系统

短期（1~2 月）— 补短板

优先级 内容 理由
🔴 TypeScript 进阶（泛型、类型推导、声明文件） 你项目里 vue-tsc 一堆错误，根因是 TS 不熟
🔴 DevTools 调试全通 卡 1 小时 = 浪费 1 天工资
🔴 写 1 个可复用组件 练组件设计，比看 10 篇博客有用
🟡 vitest 单测 你已经会了，加到项目里
🟡 Sentry / 错误监控 线上事故 80% 靠它定位

中期（3~6 月）— 建护城河

优先级 内容
🔴 读 Vue 3 源码（reactive / runtime-core / compiler）
🔴 Lighthouse 性能调到 90+（自己项目）
🟡 写一个 vite 插件（哪怕很小的）
🟡 学 BFF 写一个聚合接口（阶段 10.3 实战）
🟡 学 qiankun 原理（主项目用的）
🟡 状态机（XState）做复杂表单

长期（6~12 月）— 建影响力 / 跨界

优先级 内容
🔴 AI 编程深度用户（Cursor / Claude Code 全流程）
🔴 学 LLM 应用开发（RAG / Agent）—— 前端做 AI 应用有天然优势
🟡 写技术博客 / 内部分享
🟡 参与开源项目（哪怕一个 PR）
🟡 学一点可视化（业务里总会用到图表）

五、本项目画像的"应做清单"

按你项目实际情况（不空谈）：

现在就该做 收益
给 request.ts 加慢请求 + traceId 上抛 线上事故可定位
给 useListQuery 写单测 改造其他页有保障
修 XcTableCom attrs 透传 全局受益
给 downloadFile 加 JSON 错误包检测 挡 80% 下载事故
调研 qiankun 子应用沙箱怎么做的 理解项目底层

六、几个反常识但重要的点

误区 真相
"学完 React 才能进大厂" Vue 3 一样能进，但 TS 必须好
"性能优化就是首屏" 运行时性能（长任务、内存泄漏）才是大头
"AI 时代前端要失业" 前端做 AI 应用最有优势（UI/UX + 流式）
"异步请求是前端最难的" 状态管理 + 性能 + 架构更难
"TypeScript 会让代码变慢" 慢的是写代码（多 30%），快的是改代码（少 70% bug）
"全栈是趋势" BFF 是前端趋势，全栈不是

七、推荐的"知识源"

比书单更靠谱

类型 推荐 用途
官方文档 vuejs.org / react.dev / developer.mozilla.org 一手资料，最准
技术博客 web.dev / v8.dev / overreacted.io 深度文章
源码 Vue / Vite / TanStack Query 读源码 = 最好的学习
周报 JavaScript Weekly / Node Weekly 跟进趋势
AI 工具 Cursor / Claude Code / Codex 加速学习 5~10 倍
项目实践 自己项目造一个轮子 唯一"真的会了"的路径

八、回答你的问题

除了前端异步请求外，还有哪些内容对前端这个岗位需要重点学习？

一句话：

TS 深度 + 性能优化 + 调试能力 + 框架源码 + AI 编程 —— 这五项决定一个中高级前端能不能继续往上走。

异步请求只是「网络与数据」这一小块，是基础设施，学完一遍就够用；而上面这五项是长期主义，每年都要往前一步。

要我接下来深挖哪个模块？比如：

  1. TypeScript 进阶（泛型、infer、声明文件 —— 写一个 Result<T, E>）
  2. Vue 3 响应式原理（手写一个 mini reactive）
  3. 性能优化（用 Lighthouse 调自己项目）
  4. AI 编程实战（Cursor 全流程 + 写 .cursorrules）
  5. LLM 应用开发（调通 OpenAI API + Function Call + 打字机）
posted @ 2026-10-19 10:55  寅信  阅读(17)  评论(0)    收藏  举报