高级前端需要学习那些东西？

一、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 人小团队