FRONTEND ARCHITECT HANDBOOK

前端架构师通关手册

从基础到架构，从理论到实战。系统梳理前端工程师的完整成长路径，助你突破技术瓶颈，迈向架构师。

22

篇教程

3

张思维导图

8

个进阶专题

📚

分阶段教程

11 个阶段，从零基础到架构师的完整路径

HTML 与 CSS 基础

语义化标签、布局模式、响应式设计与 CSS 核心原理

JavaScript 核心

原型链、闭包、异步编程、ES6+ 新特性与 V8 引擎

浏览器与网络

渲染引擎、事件循环、HTTP 协议、跨域与安全策略

工程化与构建

Webpack、Vite、Rollup 构建原理与工程化体系建设

框架核心

React / Vue 双框架核心原理、响应式与虚拟 DOM

状态管理与数据流

Redux、Pinia、MobX 状态管理方案与数据流设计

性能优化实战

加载优化、渲染优化、性能监控与指标体系

测试与代码质量

单元测试、E2E 测试、Lint 规范与 CI/CD 质量门禁

架构设计与模式

设计模式、架构风格、组件库设计与技术选型

团队协作与架构治理

代码规范、技术评审、架构演进与团队技术管理

数据结构与算法

前端必备算法、LeetCode 高频题与解题思路

🧠

思维导图

可视化知识图谱，快速建立知识体系

学习路线思维导图

前端工程师完整成长路径与技能树全景图

React 源码思维导图

Fiber 架构、调度机制、Hooks 原理全景解析

Vue 源码思维导图

响应式系统、虚拟 DOM、编译优化核心原理

🚀

进阶专题

8 大前沿方向，突破技术天花板

专题总览

8 大进阶专题的学习路径与推荐顺序

大前端全景导论

Web、移动端、桌面端、IoT 全端技术生态概览

SSR 与同构渲染

Next.js / Nuxt 原理、SSR/SSG/ISR 方案对比

BFF 架构设计

后端-for-前端模式、GraphQL 与 API 聚合层设计

微前端全面解析

qiankun、Module Federation 方案对比与落地实践

低代码平台从 0 到 1

可视化搭建、DSL 设计、物料体系与引擎原理

微服务架构认知

前端工程师必备的后端架构知识体系

AI 公司级应用落地

大模型应用架构、Agent 设计与企业级落地实践

前端负责人实战手册

团队管理、技术规划、业务驱动与影响力建设