前端整学习手册（零基础→中级→高级→架构师·权威定级版）

前端四阶段完整学习手册（零基础→中级→高级→架构师·权威定级版）

说明：本文档基于完整前端知识体系分层切割，严格对应职场 0–5+ 年能力模型。每一级明确「必会、了解、不学」，是求职、晋级、查漏补缺的唯一标准学习大纲。

层级对应职场等级

零基础 = 实习 / 初级前端（0–1年）

中级进阶 = 主力开发（1–3年）

高级进阶 = 技术骨干（3–5年）

架构师 = 前端负责人/架构（5年+）

第一阶段：零基础 / 初级前端（0–1年）

核心定位：能切图、能写页面、能对接业务、完成基础开发

一、HTML 必会

必须掌握

• 常用基础标签、块级/行内元素区别

• 列表、表格、表单基础、input 常用类型

• audio、video、img、a 链接

• 基础语义化标签：header、main、footer、nav

• viewport 移动端适配、基础 meta 标签

了解即可：A11y、iframe 安全属性、OG 社交标签、details 折叠标签

不需要学：底层原理、无障碍深度、HTML 安全策略

二、CSS 必会

必须掌握

• 基础选择器、群组、后代、伪类基础（hover/focus）

• 盒模型完整概念、margin 塌陷、基础 BFC

• 浮动布局、清除浮动、定位 relative/absolute/fixed

• Flex 布局全套（主轴、交叉轴、居中、自适应）

• 常用单位：px、rem、vw、百分比

• 渐变、阴影、透明度、transform 基础变换

• transition 过渡动画

• 简单媒体查询、手机端适配

了解即可：Grid、clamp、CSS 嵌套、@layer、container 查询

不需要学：CSS 渲染原理、图层、样式工程化底层

三、JavaScript 必会（初级核心）

必须掌握

• 变量 var/let/const、数据类型、运算符、判断、循环

• 函数定义、参数、返回值、基础作用域

• 数组常用 API：forEach、map、filter、push、pop、splice、slice

• 对象基础、键值对、取值赋值

• DOM 操作：获取元素、修改内容、样式、类名

• 基础事件：点击、输入、焦点、事件委托

• BOM：定时器、location、localStorage 本地存储

• ES6 高频：箭头函数、解构、展开、模板字符串

• 简单 fetch/axios 接口请求、数据渲染页面

了解即可：Promise、async/await、正则、闭包、原型

不需要学：事件循环、Proxy、Reflect、GC、内存、高阶手写

四、工具 & 工程入门

必须掌握

• Chrome 调试、断点、console、网络面板

• Git 基础：add / commit / push / pull / 切换分支

• npm install、运行脚本、简单 package.json

• VSCode、Prettier 格式化

不需要学：Webpack/Vite 配置、ESLint、工程化、TS、CI/CD

阶段能力结果

可以独立完成静态页面、活动页、简单业务页面、表单、接口渲染，满足初级上岗。

第二阶段：中级前端（1–3年 主力开发）

核心定位：独立做业务、熟练框架+TS、解决常见兼容与性能问题

一、HTML + CSS 完全精通

• 完整语义化、A11y 无障碍、焦点控制 tabindex、aria

• 高阶表单校验、validity、自定义错误、datalist、progress

• iframe 安全策略、noopener、sandbox、原生懒加载

• 全套高级选择器：:has / :is / :where / :not / nth 系列、伪元素全套

• Grid 二维布局精通、aspect-ratio、object-fit

• clamp()/min()/max()/calc()/env() 自适应方案

• content-visibility、contain、will-change 性能优化属性

• keyframes 动画、transform GPU 分层、堆叠上下文 z-index 原理

• 暗黑模式适配、特性查询 @supports、容器查询

• Sass/Less、Tailwind、CSS Module 熟练落地

• 移动端双适配：rem / viewport 完整方案

二、JavaScript 中级全量（面试分水岭）

• 完整数据类型：Symbol、BigInt、类型转换、精准判型

• 严格模式、装箱拆箱、隐式转换全规则

• 闭包、作用域链、this 全部场景、手写防抖节流

• 原型链、new 原理、继承、class 语法糖、mixin

• ES6+ 全集：Set/Map、迭代器、Generator

• Promise 全部用法、async/await、异步串行/并行

• DOM 事件流：捕获、冒泡、委托、自定义事件

• 高级 WebAPI：ResizeObserver、IntersectionObserver、History API

• Proxy/Reflect、Object.defineProperty、深浅拷贝

• 正则高阶：零宽断言、贪婪惰性、捕获组、修饰符

• 浏览器事件循环、宏微任务完整流程

• 全局异常捕获、基础内存泄漏识别

三、TypeScript 项目必备

• 基础类型、联合/交叉、元组、枚举、unknown/never

• interface / type、泛型基础、类型断言、类型守卫

• keyof、in、索引类型、satisfies

• tsconfig 核心配置、paths 别名、strict 严格模式

• 常用工具类型：Partial、Required、Pick、Omit、Record

了解即可：高阶类型体操、递归类型、infer

四、工程化完整掌握

• npm/yarn/pnpm 区别、依赖类型、peer 依赖、lock 文件

• Webpack 完整配置：loader、plugin、HMR、splitChunks、Tree-Shaking

• Vite 项目搭建、代理、预构建、环境变量

• ESLint + Prettier + StyleLint 规范落地

• Husky + lint-staged + Commitlint 提交规范

• 多环境 .env 配置、静态资源压缩、gzip

五、框架（Vue / React 任选其一精通）

Vue 中级栈

• Vue2 响应式原理、数组重写、$set、Watcher/Dep

• 虚拟 DOM、Diff、key 作用、组件通信全方案

• 生命周期、自定义指令、mixins 优缺点

• Vuex、Router 路由守卫、懒加载

• Vue3 语法糖、Composition API、ref/reactive

• computed、watch、watchEffect 区别

• defineProps / defineEmits / defineExpose、Teleport、Suspense

• Pinia、Router4 实战

React 中级栈

• JSX、函数组件、类组件、单向数据流

• 全套 Hooks：useState/useEffect/useMemo/useCallback/useRef

• Hooks 闭包陷阱、依赖规则、memo 优化

• Redux / Redux-Toolkit / Zustand 状态管理

• React Router 路由、权限、懒加载

• 合成事件与原生事件区别

六、浏览器 & 网络 & 安全基础

• 浏览器渲染流程：DOM/CSSOM/渲染树/布局/绘制/合成

• 重排重绘、GPU 加速、渲染阻塞资源

• HTTP1.1/2/3、HTTPS、状态码、缓存完整体系

• 强缓存、协商缓存完整机制与区别

• 同源策略、全部跨域方案、CORS 预检

• XSS、CSRF 原理与基础防御

七、性能优化 & 部署 & 测试基础

• preload/prefetch 预加载、代码分割、懒加载

• 图片优化、WebP、CDN、资源压缩

• LCP/FCP/CLS/INP 核心性能指标

• Vitest/Jest 基础单元测试

• Nginx 基础部署、history 路由配置、静态缓存

• Git 进阶：stash、cherry-pick、简单 rebase

阶段能力结果

独立负责中型业务模块、熟练工程化+TS+框架、独立解决兼容、样式、接口、渲染问题，具备常规性能优化能力。

第三阶段：高级前端（3–5年 技术骨干）

核心定位：懂原理、能造轮子、能优化架构、解决线上疑难问题

一、JS 底层手写与内核原理

• 手写：Promise、防抖节流、深浅拷贝、call/apply/bind、new、instanceof

• 浏览器 / Node 事件循环完整差异、libuv 原理

• V8 引擎编译流程、AST、字节码、GC 垃圾回收机制

• 内存泄漏深度排查、内存快照分析、线上内存优化

• 异步迭代器、Generator 调度、手写异步队列

二、框架源码吃透

Vue

• Vue2 完整响应式源码、Dep/Watcher 依赖收集与更新

• Diff 完整 patch 流程、最长递增子序列优化原理

• Vue3 Proxy 响应式、track/trigger/effect 调度

• 手写迷你 Vue、简易响应式框架

• Nuxt3 SSR/SSG 渲染机制、注水、服务端中间件

React

• Fiber 架构、时间切片、优先级调度、协调机制

• Hooks 底层链表、批量更新、更新调度原理

• Next.js RSC 服务端组件、SSR/SSG/ISR 全模式

• 手写迷你 React、简易状态库

三、工程化高阶能力

• 手写 Webpack Loader / Plugin、自定义构建逻辑

• Vite/Esbuild 插件开发、构建优化策略

• Monorepo 大型项目架构、版本管理、workspace

• CI/CD 流水线编写、自动部署、灰度、自动回滚

• Docker 前端容器化、多阶段构建、镜像瘦身

• 产物安全、代码混淆、sourceMap 隔离

四、TypeScript 类型体操

• 条件类型、infer 推断、递归类型、模板字符串类型

• 高级泛型封装、元组运算、映射类型改造

• 自定义模块声明、第三方库类型补丁、全局类型扩展

• type-coverage 类型覆盖率管控

五、前端安全体系（全链路防御）

• XSS 三类攻击完整防御、CSP 策略、转义体系

• CSRF 深层防御、SameSite、双重 Cookie

• 点击劫持、中间人攻击、HSTS、HTTPS 加固

• 前端加密、数据脱敏、文件上传安全校验

• 接口越权、权限管控、前端安全规范

六、高阶性能优化体系

• 精细化分包、依赖分析、超大包拆分与优化

• 渲染分层优化、规避强制同步布局、减少重排重绘

• 大数据渲染：虚拟列表、分片渲染、流式渲染

• WebWorker 密集计算、主线程解放

• 完整前端监控体系：性能、错误、行为、白屏采集

• PWA 离线缓存、Workbox、首屏极致优化

七、测试全覆盖

• 单元测试：mock 接口、定时器、快照测试、覆盖率

• 组件测试：用户行为驱动测试、插槽、事件测试

• E2E 自动化：Playwright/Cypress、网络拦截、多浏览器测试

• 视觉回归测试、压测基础

八、全栈 & 跨端能力

• Node.js 核心：Stream、Buffer、事件、中间件洋葱模型

• Koa/NestJS 接口开发、JWT 鉴权、数据库基础

• 可视化进阶：Canvas 离屏、SVG 高级、Three.js 基础

• 跨端：小程序双线程、分包机制、Electron 进程通信、RN 原理

阶段能力结果

可独立搭建项目架构、编写工程工具、解决线上疑难问题、输出技术方案、承担核心业务架构、带新人、做代码评审。

第四阶段：前端架构师（5年+ 技术负责人）

核心定位：定技术方向、搭基建、建规范、控风险、降本增效

一、架构设计核心能力

1. 微前端架构

• qiankun / Micro App / Module Federation 方案选型对比

• JS 沙箱：快照沙箱、代理沙箱隔离原理

• 样式隔离：ShadowDOM / CSS Module / 命名空间

• 应用通信、路由隔离、依赖共享、生命周期管控

• 微前端灰度、容错、降级、监控体系

2. 组件库 & 工具库架构

• Monorepo 组件库整体架构设计

• 按需打包、主题系统、暗黑模式、多主题切换

• Storybook 文档、测试全覆盖、版本管理、发包流程

• Web Components 跨框架组件、ShadowDOM 封装

3. 低代码平台架构

• JSON 渲染引擎、物料体系、拖拽核心算法

• 表单引擎、画布系统、属性配置系统

• 编辑器沙箱、表达式解析、动态渲染调度

二、企业级工程基建搭建

• 统一前端脚手架、项目模板体系

• 团队代码规范体系、lint 规则、提交规范、CR 规范

• 构建性能大盘、增量构建、缓存策略、构建提速

• 私有 NPM 仓库、包版本管控、漏洞扫描

• 全链路 DevOps、环境隔离、自动部署、告警联动

三、监控、性能、安全平台体系

• 自研前端监控平台：错误、性能、白屏、接口、内存、用户行为

• 性能预算、准入标准、上线卡点机制

• 企业级安全规范、CSP 全局策略、依赖安全审计

四、全栈架构统筹

• BFF 层架构设计、接口聚合、权限透传、限流熔断

• 前后端协作规范、接口标准、Mock 平台建设

• 数据库缓存、高并发场景前后端协同优化

• CDN、Nginx、负载均衡、静态资源全局调度

五、团队体系与技术治理

• 职级能力模型、团队培养体系、学习路线标准化

• 技术债务治理、项目重构计划、架构迭代规划

• 技术选型、风险评估、新技术落地预判

六、前沿技术落地

• WASM 业务落地、AI 前端集成

• 大型 3D 可视化、实时协同编辑架构

• 大规模 SSR/RSC 集群部署、高并发流量应对

阶段能力结果

掌控整条业务前端技术体系，负责架构迭代、技术决策、团队基建、风险把控、降本增效，是团队技术顶层负责人。

附录：四阶段能力速查表