一、JavaScript 深度（这是分水岭）
高级前端必须对 JS 有“语言级理解”，而不是 API 使用者。
必须掌握
-
执行机制
- 事件循环（Event Loop：宏任务 / 微任务）
- 调用栈 / 执行上下文
-
作用域 & 闭包
-
this 绑定规则（call/apply/bind/new）
-
原型链 & 继承模型
-
模块化（ESM vs CommonJS）
-
Promise 原理（手写 Promise）
-
async/await 本质
进阶能力
-
手写核心能力
- Promise
- debounce / throttle
- 深拷贝（考虑循环引用）
- 发布订阅 / EventEmitter
-
垃圾回收机制（V8）
-
内存泄漏排查
👉 判断标准：
你能不能解释“为什么会这样”，而不是“怎么用”。
二、浏览器 & Web 原理（高级核心）
这是很多中级卡住的地方。
浏览器原理
-
从 URL 输入到页面渲染全过程
-
渲染流程
- DOM / CSSOM
- Render Tree
- Layout / Paint / Composite
-
重排（Reflow）与重绘（Repaint）
网络
- HTTP / HTTPS（TLS）
- HTTP1.1 / HTTP2 / HTTP3
- 缓存策略（强缓存 / 协商缓存）
- 跨域（CORS / JSONP / 代理）
存储
- Cookie / LocalStorage / SessionStorage / IndexedDB
三、React（或 Vue）深入（你是 React + Vue，重点更高）
你已经有经验，这里是你拉开差距的地方。
React 深度
- Fiber 架构
- Diff 算法原理
- Hooks 原理（useState / useEffect）
- 状态管理思想（Redux / Zustand / Recoil）
必须进阶
-
渲染优化
- memo / useMemo / useCallback
-
并发特性（React 18）
-
自定义 Hooks 设计
工程能力
- 组件设计（高复用、低耦合）
- 复杂状态拆分
四、工程化（高级标志）
这是“会写页面”和“能带团队”的分界线。
构建工具
-
Webpack（必须深入）
- loader / plugin 原理
- 构建优化（分包、tree shaking）
-
Vite（现代趋势）
-
Rollup / ESBuild（了解）
工程能力
- Monorepo（pnpm / turborepo）
- CI/CD
- Git flow
- 环境配置（dev / test / prod）
五、性能优化（高级必问）
没有这个，很难算高级。
前端性能
- 首屏优化（LCP / FCP）
- 懒加载 / 预加载
- 代码分割
- CDN 加速
渲染优化
- 虚拟列表
- 防抖节流
- 大数据渲染
工具
- Chrome Performance
- Lighthouse
六、架构设计（真正的高级能力）
这是最值钱的部分。
必须掌握
- 前端分层设计
- 模块化架构
- 微前端（qiankun / module federation）
能做的事
- 设计一个后台系统架构
- 抽离通用组件库
- 设计低耦合 API 层
七、Node.js（必须具备后端能力）
高级前端不能只会前端。
必会
- Node.js
- Express / Koa
- 中间件机制
- RESTful API
进阶
- SSR（Next.js）
- BFF（Backend For Frontend）
八、TypeScript（必须精通）
你之前想学 TS，这个是关键突破点。
必会
- 泛型
- 类型推导
- 类型工具（Partial / Pick / Record）
高级
- 类型体操
- TS 在大型项目中的设计
九、可视化（你项目已经用 ECharts，这是加分项）
- ECharts 深度使用
- 大屏可视化
- 数据建模能力
十、软实力（很多人忽略）
高级不是技术堆出来的。
必须具备
- 技术选型能力
- 代码评审（Code Review）
- 推动项目落地
- 跨团队沟通
给你一个现实判断标准（很关键）
如果你具备以下能力，基本就是高级前端：
- 能独立设计一个中后台系统架构
- 能解决线上复杂性能问题
- 能写出可复用的组件库
- 能主导技术选型
- 能带 2~5 人小团队
