前端四阶段完整学习手册零基础→中级→高级→架构师·权威定级版说明本文档基于完整前端知识体系分层切割严格对应职场 0–5 年能力模型。每一级明确「必会、了解、不学」是求职、晋级、查漏补缺的唯一标准学习大纲。层级对应职场等级零基础 实习 / 初级前端0–1年中级进阶 主力开发1–3年高级进阶 技术骨干3–5年架构师 前端负责人/架构5年第一阶段零基础 / 初级前端0–1年核心定位能切图、能写页面、能对接业务、完成基础开发一、HTML 必会必须掌握常用基础标签、块级/行内元素区别列表、表格、表单基础、input 常用类型audio、video、img、a 链接基础语义化标签header、main、footer、navviewport 移动端适配、基础 meta 标签了解即可A11y、iframe 安全属性、OG 社交标签、details 折叠标签不需要学底层原理、无障碍深度、HTML 安全策略二、CSS 必会必须掌握基础选择器、群组、后代、伪类基础hover/focus盒模型完整概念、margin 塌陷、基础 BFC浮动布局、清除浮动、定位 relative/absolute/fixedFlex 布局全套主轴、交叉轴、居中、自适应常用单位px、rem、vw、百分比渐变、阴影、透明度、transform 基础变换transition 过渡动画简单媒体查询、手机端适配了解即可Grid、clamp、CSS 嵌套、layer、container 查询不需要学CSS 渲染原理、图层、样式工程化底层三、JavaScript 必会初级核心必须掌握变量 var/let/const、数据类型、运算符、判断、循环函数定义、参数、返回值、基础作用域数组常用 APIforEach、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.jsonVSCode、Prettier 格式化不需要学Webpack/Vite 配置、ESLint、工程化、TS、CI/CD阶段能力结果可以独立完成静态页面、活动页、简单业务页面、表单、接口渲染满足初级上岗。第二阶段中级前端1–3年 主力开发核心定位独立做业务、熟练框架TS、解决常见兼容与性能问题一、HTML CSS 完全精通完整语义化、A11y 无障碍、焦点控制 tabindex、aria高阶表单校验、validity、自定义错误、datalist、progressiframe 安全策略、noopener、sandbox、原生懒加载全套高级选择器:has / :is / :where / :not / nth 系列、伪元素全套Grid 二维布局精通、aspect-ratio、object-fitclamp()/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 语法糖、mixinES6 全集Set/Map、迭代器、GeneratorPromise 全部用法、async/await、异步串行/并行DOM 事件流捕获、冒泡、委托、自定义事件高级 WebAPIResizeObserver、IntersectionObserver、History APIProxy/Reflect、Object.defineProperty、深浅拷贝正则高阶零宽断言、贪婪惰性、捕获组、修饰符浏览器事件循环、宏微任务完整流程全局异常捕获、基础内存泄漏识别三、TypeScript 项目必备基础类型、联合/交叉、元组、枚举、unknown/neverinterface / type、泛型基础、类型断言、类型守卫keyof、in、索引类型、satisfiestsconfig 核心配置、paths 别名、strict 严格模式常用工具类型Partial、Required、Pick、Omit、Record了解即可高阶类型体操、递归类型、infer四、工程化完整掌握npm/yarn/pnpm 区别、依赖类型、peer 依赖、lock 文件Webpack 完整配置loader、plugin、HMR、splitChunks、Tree-ShakingVite 项目搭建、代理、预构建、环境变量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/reactivecomputed、watch、watchEffect 区别defineProps / defineEmits / defineExpose、Teleport、SuspensePinia、Router4 实战React 中级栈JSX、函数组件、类组件、单向数据流全套 HooksuseState/useEffect/useMemo/useCallback/useRefHooks 闭包陷阱、依赖规则、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 调度、手写异步队列二、框架源码吃透VueVue2 完整响应式源码、Dep/Watcher 依赖收集与更新Diff 完整 patch 流程、最长递增子序列优化原理Vue3 Proxy 响应式、track/trigger/effect 调度手写迷你 Vue、简易响应式框架Nuxt3 SSR/SSG 渲染机制、注水、服务端中间件ReactFiber 架构、时间切片、优先级调度、协调机制Hooks 底层链表、批量更新、更新调度原理Next.js RSC 服务端组件、SSR/SSG/ISR 全模式手写迷你 React、简易状态库三、工程化高阶能力手写 Webpack Loader / Plugin、自定义构建逻辑Vite/Esbuild 插件开发、构建优化策略Monorepo 大型项目架构、版本管理、workspaceCI/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 集群部署、高并发流量应对阶段能力结果掌控整条业务前端技术体系负责架构迭代、技术决策、团队基建、风险把控、降本增效是团队技术顶层负责人。附录四阶段能力速查表阶段核心能力标签岗位定位零基础切图、静态页、接口渲染、基础业务实习/初级中级TS框架工程化、独立业务、常规优化与排错主力开发高级源码原理、手写能力、架构优化、全栈能力、疑难问题攻坚技术骨干架构师基建搭建、规范体系、技术决策、团队治理、全局架构技术负责人