从头梳理一遍前端开发工程师需要掌握的知识点

codeyx 发布于 2026-2-27 11:16 阅读：11 笔记

阶段划分

首先，我将按照自己对前端的理解，将前端分为三个等级：初级、中级、高级。
这三个阶段对应了不同的能力范围。

初级前端开发工程师：
定位：
能独立完成页面、组件、简单业务，不拖团队后腿。
基础必须扎实：
1.HTML5 语义化、SEO 基础、无障碍（a11y）常识
2.CSS / CSS 预处理器（Sass/Less）、Flex / Grid 布局
3.移动端适配：rem /vw/ 媒体查询、1px 问题、横屏适配
4.原生 JS 熟练：闭包、原型、异步、Promise、模块化
框架与工程化：
1.Vue 或 React 基础语法、组件、状态、路由（在国内通常掌握Vue即可）
2.能看懂并使用：Axios/fetch、请求封装、本地存储
3.基础工程化：npm/yarn/pnpm、webpack/vite 基础使用
4.Git 基础：clone/commit/pull/push/ 分支 / 解决简单冲突
能做的事：
1.还原设计稿（PC+移动端）
2.写通用组件：按钮、表单、弹窗、列表
3.对接简单接口、渲染页面、表单提交、分页、搜索
4.基础调试：Chrome DevTools、网络/控制台/性能面板
趋势要求：
1.了解 ESLint/Prettier 规范
2.基础TypeScript类型(string/number/interface/简单泛型)
中级前端开发工程师：
定位：
能负责模块/页面/小项目/，能优化、能封装、能协作。
在初级的基础上提高深度：
1.TypeScript熟练：泛型、工具类型、类型体操、类型约束
2.JS异步深入：async/await、并发控制、错误处理
3.理解事件循环、垃圾回收、内存泄露排查
框架与工程化：
1.精通Vue、React全家桶：路由、状态管理（Pinia/Redux/Zustand）
2.能做组件设计与封装：高复用、高可配置、支持扩展
3.掌握构建优化：分包、懒加载、图片优化、CDN、gzip
4.熟悉CI/CD基本流程、环境变量、多环境打包
网络与性能：
1.HTTP / HTTPS、缓存策略、跨域、Cookie/Session/JWT
2.性能指标：LCP、FCP、CLS、FP
3.做过真实性能优化：图片、请求、渲染、打包体积
工程与协作：
1.能写可维护代码：设计模式简单应用、职责拆分
2.Code Review、规范制定、文档编写
3.与产品/后端/设计有效沟通，评估需求与排期
趋势要求：
1.掌握一种现代构建工具的使用/配置，比如Vite
2.了解SSR/SSG/ISR（Nuxt/Next）
3.会用组件库二次封装、主题定制
4.简单的Monorepo概念
高级前端开发工程师：
定位：
能主导项目、做技术选型、解决疑难问题、带方向。
技术深度：
1.精通 JavaScript 引擎机制、执行模型、内存模型、编译优化
2.精通浏览器渲染原理、合成层、重排重绘、性能瓶颈定位
3.精通 TypeScript 类型系统，能写类型框架、类型工具、复杂泛型
4.精通 React / Vue 源码级原理：调度、协调、渲染、Fiber、响应式系统
5.能从零手写：虚拟 DOM、打包器、编译器、状态库、路由等核心轮子
架构能力：
1.能设计企业级前端架构：权限、路由、状态、请求、埋点、监控、国际化
2.能做跨项目、跨团队的技术规范、架构收敛、技术债务治理
3.能主导大型重构 / 架构升级，控制风险、保证质量、平滑过渡
4.能做技术选型与决策，判断趋势、成本、收益、长期维护性
工程化与基建：
1.负责 / 主导公司级前端基建：CLI、组件库、工具链、构建系统、模板仓库
2.精通构建工具链：Vite、Webpack、Esbuild、Rspack、Turbopack 底层思想
3.精通 Monorepo、依赖治理、CI/CD、质量门禁、自动化测试
4.能搭建前端效能平台，大幅提升团队开发、联调、发布、排查效率
全栈能力：
1.精通 Node.js 服务端开发，能写高可用、高性能服务
2.精通 Nest.js/ 类似企业级框架，能做 BFF、网关、接口聚合、鉴权
3.懂数据库、缓存、RPC / 微前端调用、部署、监控、容灾
4.能独立负责从前端到 Node 服务的全链路设计与实现
跨端与前沿技术：
1.精通小程序、跨端（Taro/Uniapp）、RN（Flutter）、Electron、WebAssembly
2.精通 SSR / SSG / ISR / 流式渲染，能做极致首屏体验
3.精通可视化、Canvas/WebGL、大屏、复杂交互、高性能长列表
4.能啃业界最难场景：低代码、流程图、编辑器、富文本、视频剪辑、3D
5.熟悉 AI 赋能前端：AI 组件、提示词工程、AI 辅助开发流程
性能与稳定性：
1.能定义性能指标、监控体系、优化标准
2.能把大型项目做到极致性能：秒开、流畅、低包体、低流量
3.能搭建线上监控、异常上报、日志、告警、回放、定位全链路系统
4.能解决别人解决不了的疑难杂症：内存泄漏、卡顿、白屏、崩溃
业务与技术产品能力：
1.能理解业务本质，给出技术驱动体验 / 效率 / 转化的方案
2.能做技术规划、Roadmap、风险评估、资源评估
3.能推动跨部门协作，把技术方案落地成业务价值
影响力与领导力：
1.能解决团队 90% 以上技术难题
2.能培养中级→高级的工程师
3.在业界 / 公司内有技术影响力
4.能做技术决策、技术文化、技术氛围

从头梳理知识点

HTML
基础标签：div、p、span、a、img、ul/ol/li、table、form、input/button/select/textarea
HTML5 语义化：header、footer、nav、section、article、aside、main
多媒体：video、audio、canvas 基础
表单验证、name、placeholder、required、pattern
SEO 基础：title、description、h1～h6 层级
无障碍：alt、role、aria-label 简单了解
CSS
选择器：类、标签、ID、属性、伪类、伪元素、子选择器、相邻选择器
盒模型：content、padding、border、margin、box-sizing
布局：
标准文档流
float 浮动与清除浮动
position：static/relative/absolute/fixed/sticky
Flex 布局完整掌握（主轴、交叉轴、align-items、justify-content、flex-wrap 等）
Grid 布局基础
样式：
字体、颜色、透明度、圆角、阴影、渐变
过渡 transition、变换 transform、动画 animation
响应式：
媒体查询 @media
移动端 viewport 设置
rem、em、vw/vh 适配方案
CSS 预处理：
Sass/Scss 变量、嵌套、mixin、extend、import
JavaScript 基础
变量：var/let/const、作用域、块级作用域
数据类型：
基本类型：string、number、boolean、null、undefined、symbol
引用类型：object、array、function
运算符、条件、循环、函数
数组常用方法：
forEach、map、filter、reduce、find、some、every、slice、splice
对象：遍历、深浅拷贝基础
DOM 操作：
获取元素、增删改查
事件绑定、事件冒泡、事件捕获、事件委托
BOM：window、location、history、navigator
异步入门：setTimeout、setInterval、回调函数
JavaScript 进阶
执行上下文、作用域链、闭包
this 指向、bind/call/apply
原型与原型链、继承
异步核心：
Promise 完整使用
async/await
宏任务 / 微任务、事件循环初步
模块化：
CommonJS
ES Module：import/export
正则表达式常用场景：表单验证、手机号、邮箱
工程化基础
npm /yarn/pnpm 命令
package.json：dependencies、devDependencies、scripts
模块化、按需引入
ESLint、Prettier 基础配置
Git：
clone、commit、push、pull、branch、merge、stash
解决简单冲突
Vue 体系
Vue 3 核心
模板语法、指令：v-if/v-for/v-show/v-bind/v-on/v-model
响应式原理基础
setup 语法糖
ref / reactive / computed / watch / watchEffect
组件
组件定义、引用、通信
props / emit / expose
插槽：默认插槽、具名插槽、作用域插槽
Vue Router
路由安装与配置
路由模式：hash /history
路由跳转：router-link /useRouter
动态路由、嵌套路由、重定向、别名
路由守卫：全局守卫、路由独享守卫、组件内守卫
路由元信息 meta
Pinia（状态管理）
定义 store
state、getters、actions
数据持久化
网络请求
HTTP 基础：请求方法、状态码、请求头、响应头
Fetch / Axios
封装请求工具：
统一请求头
拦截器
错误统一处理
loading、token 处理
跨域：CORS、代理配置
项目能力
还原设计稿
表单、列表、分页、搜索、上传、导出
本地存储：localStorage、sessionStorage、cookie
简单组件封装：按钮、弹窗、表单组件
TypeScript 系统掌握
基础类型：string、number、boolean、any、unknown、never、void
接口 interface、类型别名 type
数组、对象、函数类型
联合类型、交叉类型
泛型、工具类型：Partial、Required、Readonly、Pick、Omit、Exclude、Extract
类型守卫、类型断言
模块与类型声明文件 .d.ts
框架深入
Vue 源码级理解
响应式系统原理
diff 算法、虚拟 DOM
编译原理简单理解
组件设计模式：
高阶组件
组合式函数封装
函数式组件
构建工具
Vite 原理与配置
代理
路径别名
插件配置
环境变量
Webpack 核心概念
entry、output、loader、plugin
打包优化：分包、压缩、图片处理
性能优化
网络优化：
浏览器缓存、强缓存 / 协商缓存
防抖、节流
图片优化：WebP、压缩、懒加载
渲染优化：
减少重排重绘
虚拟列表
代码优化：
懒加载、异步组件
包体积分析与优化
Node.js 基础
核心模块：fs、path、http、url、stream
写简单接口服务
中间件概念
跨域、静态服务、文件上传
项目工程化
规范：ESLint、Stylelint、Commitlint
CI/CD 基础
单元测试入门：Jest / Vitest
Node.js 服务端开发
Node 事件循环、异步 I/O
内存管理、排查内存泄漏
Express / Koa / Nest.js
Nest.js 完整体系
模块化 Module
控制器 Controller
服务 Provider/Service
中间件 Middleware
拦截器 Interceptor
守卫 Guard
管道 Pipe
异常过滤器 ExceptionFilter
配置、环境变量
日志系统
数据库
MySQL / PostgreSQL
MongoDB
ORM：Prisma / TypeORM
缓存：Redis 基础
鉴权：JWT、Session、OAuth2
BFF 层（前端必备后端能力）
接口聚合、数据裁剪
接口代理、透传
签名、加密、防重放
限流、降级、缓存
微前端 / 跨端
微前端：qiankun、wujie、single-spa
跨端：Taro / Uniapp
Electron 桌面端
WebAssembly 入门
SSR / 现代化渲染
Nuxt / Next.js
SSR、SSG、ISR
流式渲染
服务端数据获取、缓存策略
前端架构设计
项目架构分层
请求封装、权限系统、路由系统
状态管理设计
埋点、监控、日志
多环境、灰度、ABTest
前端基建
组件库设计与开发
CLI 工具开发
Monorepo：pnpm workspace、turbo
构建系统深度优化
源码级能力
手写：
Promise
虚拟 DOM + diff
响应式系统
路由
状态库
阅读 Vue / React / Vite 源码
理解编译器、渲染器、响应式核心
高难度业务场景
富文本编辑器
流程图、拓扑图
大数据渲染、高性能长列表
Canvas / WebGL / 可视化
视频剪辑、画板、在线设计
极致性能
全链路性能监控
LCP、FCP、CLS 优化
崩溃监控、异常回放
大型项目重构
全栈能力
后端架构思维
微服务、RPC、网关
数据库设计、分库分表
服务部署、Docker、K8s 入门
技术领导力
制定公司前端规范、架构标准
技术选型、技术战略、Roadmap
解决业界顶级难题
主导重大架构升级与重构
技术产品化
造平台：低代码、无代码、搭建系统
造生态：组件库、工具链、插件市场
用技术驱动业务增长
全栈 + 架构顶层视野
能主导从客户端 → 前端 → BFF → 后端 → 数据库的全链路设计
高并发、高可用、高安全系统
跨端统一架构
行业影响力
输出体系化文章、开源项目
培养出一批高级 / 专家工程师
在公司内部是技术最终决策人

至此，可完成前端毕业。

最后，我来表达一下我对AI时代“前端已死”话题的看法。
首先，我认为AI辅助编码确实能够代替前端开发工程师完成很多事情，加之很多公司并没有对技术的追求，当然也不需要。
在这种环境下我认为前端的招聘岗位会少很多很多，大部分公司招一些拥有基本Vue技术栈使用经验的Java后端（也可称初中级全栈？）就可以了。
但在大厂中，还是会存在高级前端开发工程师或者架构师的岗位，毕竟现阶段的AI还是没有真正的思考/架构能力。
作为大多数的普通人，我认为应该从初级开始，就要积极的去拥抱AI。比如去了解了解如何创建Skill、SDD开发的模式、如何规范AI生成的代码等等。
让AI去干那些麻烦的、重复性的工作，节省出来的时间我们可以继续学习，防止自己被AI替代。