← 返回十阶段学习总览

🚀 大前端进阶专题 · 八大专题体系

基础（十阶段手册）打底，这里补全「大前端」高端知识版图：SSR、BFF、微前端、低代码、微服务、AI 落地、负责人实战。每个专题 = 原理详解 + 优质案例 + 解析过程 + 实战项目 + 通关自检。

每个专题 8~15 小时建议按编号顺序学习重点专题标注 🔥

为什么需要这套专题？

大前端 ≠ 写页面。 它是「前端 + 服务端 + 跨端 + 工程 + AI」的融合能力。公司请你做负责人，面试考的、实际干的，全在下面八个专题里：技术深度（SSR/BFF/微前端/低代码）、架构广度（微服务/大前端全景）、以及未来方向（AI 落地）和软实力（负责人实战）。

八大专题地图

01 大前端全景导论认知框架

大前端演进史：页面 → 应用 → 全栈 → 全端
能力版图：Web / 跨端 / 服务端 / 工程化 / 数据 / AI
架构演进：MPA → SPA → SSR → 微前端 → 云原生
案例解析：大厂前端团队组织与技术分工

前置：完成十阶段手册｜学习时长：约 8 小时｜产出：画出自己的能力地图

02 SSR 与同构渲染渲染架构

CSR / SSR / SSG / ISR 四种渲染模式对比与选型
SSR 原理 + 水合（Hydration）全流程图解
Next.js App Router 与 RSC（React Server Components）详解
同构代码要点：Node / 浏览器环境差异与坑
案例：电商列表页从 CSR 改 SSR 首屏提升 42% 的完整解析

前置：阶段 02 / 03 / 05｜学习时长：约 12 小时｜产出：SSR 电商页 + 性能对比报告

03 BFF 架构设计服务端架构

BFF 是什么、解决什么：接口聚合 / 字段裁剪 / 鉴权会话
REST BFF vs GraphQL BFF 对比与适用场景
Node BFF 落地：NestJS 聚合三个后端接口示例
Token 透传、SSO 单点登录、安全边界
案例：订单详情页一次请求聚合 5 个服务 + 解析

前置：阶段 03 / 04｜学习时长：约 10 小时｜产出：可运行的 Node BFF 聚合服务

04 微前端全面解析 🔥 重点

微前端要解决的三大问题：巨石应用 / 多团队协作 / 技术栈异构
四大方案对比：qiankun / micro-app / wujie(无界) / Module Federation
核心原理源码解析：JS 沙箱（快照 vs Proxy）、样式隔离（scoped vs Shadow DOM）
应用通信机制、路由分发、生命周期
优缺点全景 + 选型决策树 + 落地案例解析

前置：阶段 05 / 09｜学习时长：约 14 小时｜产出：基座 + 2 个子应用可运行工程

05 低代码平台从 0 到 1 🔥 重点

低代码 / 无代码 / ProCode 概念与市场产品拆解
平台架构：物料区 + 画布区 + 属性区 + 逻辑编排 + 渲染引擎
物料区：物料注册 Schema 设计、拖拽实现（HTML5 DnD）
画布区：Schema → 组件树 → 渲染、选中 / 拖拽 / 缩放 / 对齐吸附
属性区：Schema 驱动属性面板、事件绑定与数据绑定
完整案例：拖拽搭建「用户登录页」全流程（物料→画布→属性→保存→渲染）
实战：实现一个 mini 低代码编辑器

前置：阶段 01 / 02 / 05 / 06｜学习时长：约 18 小时｜产出：可拖拽的 mini 低代码平台

06 微服务架构认知架构广度

微服务核心概念：服务拆分 / 网关 / 注册发现 / 配置中心
微服务对前端的影响：接口治理、契约先行、Mock 驱动
前端与微服务协作：API 网关聚合、BFF 适配层
容器化部署与 CI/CD：Docker + K8s 入门级全景
案例：微服务改造中前端如何不掉队

前置：阶段 04｜学习时长：约 8 小时｜产出：服务拆分与前端协作方案文档

07 AI 公司级应用落地 🔥 前沿

LLM 基础：Token / 上下文 / 提示词工程 / 幻觉
企业 AI 应用形态：智能客服、Copilot、知识库问答、代码助手、AI 生成 UI
RAG 详解：Embedding / 向量库 / Chunking / 检索评估全流程
Agent 与 Function Calling、MCP 工具协议
前端接入 AI：SSE 流式输出、对话式 UI、MCP 集成
落地方案：试点 → 评估 → 规模化，成本 / 安全 / 合规
完整案例：企业知识库 AI 助手从 0 到 1 落地

前置：阶段 02 / 03｜学习时长：约 16 小时｜产出：AI 助手 MVP + 落地方案书

08 前端负责人实战手册 🔥 软实力

角色认知：技术负责人 vs 架构师 vs 资深工程师
入职 30 / 60 / 90 天行动计划模板
团队现状诊断：代码 / 流程 / 人员 / 业务四维体检
技术规划与路线图制定、技术方案写作模板
技术价值展示：量化指标、OKR、向上汇报话术
完整案例：一家公司请你做负责人，90 天从诊断到落地

前置：全部专题｜学习时长：约 12 小时｜产出：个人 90 天负责人作战方案

推荐学习路径

01 全景导论→ 02 SSR→ 03 BFF→ 04 微前端 🔥→ 05 低代码 🔥→ 06 微服务→ 07 AI 落地 🔥→ 08 负责人实战 🔥

速成路线： 面试/实战时间紧，可先跳「04 → 05 → 07 → 08」四个重点专题，再回头补 01~03、06。

每个专题的统一结构

模块	内容说明
📖 原理详解	概念 + 图解（HTML/CSS 绘制）+ 大量可运行代码，从是什么到为什么
🏆 优质案例 + 解析	真实业务场景，含「背景 → 方案 → 代码 → 结果 → 复盘」完整链条
⚠️ 坑清单	一线踩坑浓缩，每条约 3 分钟可读完
🛠 实战项目	带通关标准，做完才算学会
✅ 通关自检题	能口头讲清才算过，答案要点附后