序：为什么要写这个系列
11 年做前端，从写 jQuery 到主导 ERP 重构，从单兵作战到带 5 人外包团队，从 PC 端 OA 到 Electron 桌面 + 微前端 + 800 页中后台——这条路，我没看到一份从入门到架构师的、由浅入深的、实战派系统梳理。
市面上的前端知识有几种：
- 入门教程：多如牛毛，但写到第 5 章就教你
npm install，读完之后我除了会用 React 写个 Todo，不知道为什么这么设计 - 源码解析：极深，但对工作 3 年以下的人像天书。看到一半就放弃
- 架构博客：零散、单点，但讲”为什么这么选”——这是最有价值的部分，可惜不成体系
- 面试题合集：背答案好用，但不能帮你真正理解
本系列想做的事情：
- 由浅入深：从浏览器渲染一个网页开始，到化神期架构师境界，5 大阶梯 29 篇，每一篇都能独立读但又能串成一条成长曲线
- 实战派：用我自己主导的项目作为锚点——Module Federation 微前端、4.2s → 1.8s 首屏优化、SSO 统一权限、FinUI 组件库、Electron 双画布同步等，每个理论都配一段真实生产数据
- 不做题库：每篇末附 5 道重点面试问题方向，只用第 1 题给简洁答案，剩下 4 道留给你思考。每道题后都有 AI 助手按钮
- 选型清晰：涉及对比的篇都带一张「技术选型速查表」——一句话点出每个候选方案的最大优点和最大缺点，决策时直接抄
一、为什么用”修仙境界”做隐喻
不是噱头。是有 3 个真实原因：
- 阶段门槛 —— 修真体系里”筑基 → 金丹”是一次质变，必须练满前 1-2 年的基础。前端也一样：从写组件到能独立选型，从写功能到能设计监控体系，每次跃迁都需要长期的累积
- 风险与劫难 —— “渡劫”不是花架子。架构师最大的风险是技术决策：选错框架、选错构建工具、选错监控方案，6 个月后整套推倒重来。修真体系把这种”决策试错”的概念正视化，叫它”劫”
- 共鸣 —— 中文工程师 80% 读过修真小说，把”我今天又学了 V8 字节码”类比成”又悟了一层”，可读性比”路径依赖反转”高 10 倍
二、全系列 29 篇导览
| 阶段 | 修真副标题 | 篇数 | 主题 |
|---|---|---|---|
| 序章 | 总纲 | 1 | 系列导论 + 阅读路径 + 简历对照 |
| 练气期 | 基础功法 | 6 | 浏览器 / CSS·HTML5 / JS / 网络 / 安全 / TS |
| 筑基期 | 框架与适配 | 5 | 框架演变 / React / Vue / Angular / 响应式 |
| 金丹期 | 工程化大成 | 5 | 构建 / 包管理 / 工程化 / 首屏性能 / 运行时性能 |
| 元婴期 | 跨界大成 | 8 | Electron / 混合 / iframe / WC / 监控 / 测试 / UI 库 / 中后台 |
| 化神期 | 架构师境界 | 5 | 微前端 / 低代码 / RBAC / AI 未来 / 角色转变 |
总计 30 篇，按每周 1 篇节奏约 8 个月写完。
练气期 · 基础功法（6 篇）
入门修士的根基。看不懂底下的功法，框架学再多也是空中楼阁。
| # | 标题 | 锚点 |
|---|---|---|
| 1 | 浏览器如何渲染出一个网页 | 4.2s → 1.8s 首屏优化的理论基础 |
| 2 | CSS / HTML5 进阶：盒模型 / Flex / Grid / 容器查询 | 视觉层基础 — 中后台与移动端场景 |
| 3 | JavaScript 底层：V8 / GC / 事件循环 | 性能调优、异步机制的根基 |
| 4 | HTTP / HTTPS / HTTP2 / HTTP3 与缓存策略 | 性能优化的网络层基础 |
| 5 | 前端安全：XSS / CSRF / CSP / SRI | SSO 项目的安全设计源头 |
| 6 | TypeScript 进阶：类型体操与项目实践 | ERP / FinUI / Electron 的 TS 实践 |
筑基期 · 框架与适配（5 篇）
基础扎实的标志：精通至少一套主流框架 + 能为不同端做适配。
| # | 标题 | 锚点 |
|---|---|---|
| 7 | 前端框架演变与 MVVM 思想史 | 跨年代技术栈的合并解读 |
| 8 | React 深度：Fiber / Hooks / Concurrent | FinUI 跨 Vue/React 组件思路 |
| 9 | Vue 深度：响应式 / Diff / Composition | ERP 财务系统主力栈 |
| 10 | Angular 与企业级框架对比 | 信锐时期 Ionic + Angular 实战 |
| 11 | 响应式与移动端适配 | 中后台移动端场景 |
金丹期 · 工程化大成（5 篇）
简历里 12min → 3min 构建优化、4.2s → 1.8s 首屏优化的真实案例来源。
| # | 标题 | 锚点 |
|---|---|---|
| 12 | 构建工具演进：Webpack → Vite → Rspack | 构建时间 12min → 3min |
| 13 | 包管理与版本控制：pnpm / Changesets | ERP Monorepo |
| 14 | 前端工程化体系：CI/CD / 规范 / 评审 | 团队 ESLint + Husky 沉淀 |
| 15 | 首屏性能 4.2s → 1.8s 实战拆解 | 顺丰 ERP 重构第一硬数据 |
| 16 | 运行时性能：虚拟滚动 / Web Vitals | FinUI 大表格性能优化 |
元婴期 · 跨界大成（8 篇）
跨端、跨边界、跨框架、跨系统——所有”跨 X” 的大成者。
| # | 标题 | 锚点 |
|---|---|---|
| 17 | Electron 实战：主进程 / 渲染 / USB Bridge | 柔记 PC 端项目 |
| 18 | 混合开发框架对比：Taro / Uni-app / Ionic | 信锐 / 联友混合项目实战 |
| 19 | iframe 隔离 + postMessage 通信 | FinSpread 30% 授权成本降低 |
| 20 | Web Components 与跨框架组件复用 | 8 个跨 Vue/React 通用组件 |
| 21 | 前端监控体系：错误 / 性能 / 行为 | 顺丰 + 柔宇两段监控沉淀 |
| 22 | 前端测试体系：单测 / E2E / 视觉回归 | 架构师必会但易忽视 |
| 23 | 企业级 UI 组件库设计 | 柔宇 iView + 顺丰 FinUI |
| 24 | 中后台开发模式：表单 / 表格 / ECharts | 800+ 页面 ERP 沉淀 |
化神期 · 架构师境界（5 篇）
技术决策者、跨团队领导者、AI 时代的掌舵人。
| # | 标题 | 锚点 |
|---|---|---|
| 25 | 微前端架构：Module Federation 实战 | ERP 重构，12min → 3min |
| 26 | 低代码平台设计 | ERP 半低代码项目，需求交付周期 -60% |
| 27 | RBAC 权限系统：动态路由 / OAuth 2.0 / JWT | SSO 统一权限项目 |
| 28 | 端侧 AI 与前端架构的未来 | AI 技术下前端的新打法 |
| 29 | 从高级到架构师：角色转变 | 3-5 人团队管理与评审 |
三、阅读路径：3 种姿势
姿势 A：按经验阶段读（最推荐）
从你当前的境界开始，往上读。例如：
- 你是 1-2 年的初级工程师 → 从练气期第 1 篇开始
- 你是 3-4 年的中级工程师 → 跳过浏览器基础，从 TypeScript 或 HTTP 开始
- 你是 5-7 年的资深工程师 → 从筑基期框架对比开始，重点攻金丹期
- 你是 8+ 年的架构师 → 直接进元婴 + 化神，把练气和筑基当查手册
姿势 B：按主题急用先学（项目导向）
最近在做哪块，直接跳到对应的篇：
- 要做微前端 → 第 25 篇
- 要做性能优化 → 第 15 + 第 16 篇
- 要做权限系统 → 第 27 篇
- 要做 Electron 桌面应用 → 第 17 篇
- 要做混合 App → 第 18 篇
- 要做监控体系 → 第 21 篇
- 要做 UI 组件库 → 第 23 篇
- 要做中后台 → 第 24 篇
- 要看 iframe / WC 跨边界 → 第 19 + 第 20 篇
姿势 C：按面试（求职导向）
按面试高频度排序，先读这些篇：
- 框架对比 → 第 7 / 8 / 9 / 10
- 性能优化 → 第 15 / 16
- 微前端 → 第 25
- 浏览器原理 → 第 1
- JS 底层 → 第 3
- 网络与安全 → 第 4 / 5
四、每篇的固定结构
每篇都按统一骨架写，方便扫读：
- 核心概念（what）—— 用最少的概念讲清楚是什么
- 简历实战锚点（how I did it）—— 这是我和别人的最大区别：用生产数据讲透
- 方案对比与选型速查表（when & why）—— 一句话点出每个候选方案的优缺点
- 踩坑经验（what not to do）—— 我趟过的坑
- 5 道重点面试问题方向（interview prep）—— 只第 1 题给简洁答案，剩下 4 道留给你思考。每道题后面都有 AI 助手按钮，可以一键拿到详细答案。
五、简历技术栈 vs 全系列对照
| 简历标签 | 对应篇 |
|---|---|
| Vue 3 / Vue 2 / Pinia | 第 9（Vue 深度） + 第 24（中后台开发模式） |
| React 18 / Lit | 第 8（React 深度） + 第 20（Web Components） |
| Angular + TypeScript | 第 10（Angular） + 第 6（TypeScript 进阶） |
| Vite 4 / Webpack / Rspack | 第 12（构建工具演进） + 第 13（包管理） |
| Module Federation | 第 25（微前端） |
| Web Components | 第 20（WC 跨框架复用） |
| Electron | 第 17（Electron 实战） |
| Taro / Cordova / Ionic | 第 18（混合开发框架对比） |
| Sentry + 自研 SDK | 第 21（前端监控） |
| RBAC + 动态路由 | 第 27（RBAC 权限系统） |
| iView / FinUI / 组件库 | 第 23（UI 组件库设计） |
| Monorepo + Husky + Changesets | 第 14（前端工程化） |
| postMessage / iframe | 第 19（iframe 隔离 + postMessage） |
| SpreadJS / ECharts / 富文本 | 第 24（中后台开发模式） |
| Node.js / RESTful API | 第 10（Angular 协作） + 第 27（OAuth + JWT） |
表格左列都是简历里出现过的；右列是对应的深入阅读。不止于简历——本系列还覆盖了简历里没写、但同样重要的底层原理（V8 / 浏览器 / 安全 / TS）以及架构师视角的软技能（第 29 篇）。
六、5 道重点面试问题方向
Q1（答案）：React / Vue / Angular 三大框架的核心心智模型分别是什么？
A：React 的核心是「View = fn(state)」——单向数据流，函数式思维，性能可控需要手动
memo / useMemo；Vue 的核心是「响应式数据代理」——基于Proxy自动追踪依赖，写起来最自然；Angular 的核心是「依赖注入 + Zone.js 自动脏检查」——大企业级约定优于配置，长期可维护。面试要点：把这三者讲成 3 种处理 UI 与状态关系的不同哲学，而不是”谁更好用”。真正的回答深度是：你能讲清 Angular DI 的树形结构 / React Fiber 的双缓冲协调 / Vue 3 的effect调度器。Q2（思考）：浏览器从输入 URL 到页面呈现经历了哪些阶段？哪些阶段可以被前端优化？
Q3（思考）：在生产环境里，RAG 检索出来的文档 80% 是无关的——你怎么做 query rewrite + rerank？
Q4（思考）：Module Federation 如何处理主子应用之间的依赖共享？版本冲突怎么办？
Q5（思考）：设计一个支持 5000 人同时在线的前端监控 SDK，最关键的 3 个架构决策是什么？
💡 每道题后面都有 AI 助手按钮，可以一键拿到详细答案。
七、下一步
下一篇 → 练气期 #1 · 浏览器如何渲染出一个网页 —— 从最底层开始，正式踏入炼气期。
本系列作者：林健（紫牙），11 年前端架构师，主导过 ERP 全栈重构、微前端落地、SOO 统一权限、电子表格 FinSpread 等多个企业级项目。 公众号 / GitHub：搜「紫牙」或 lovanya/lovanya.github.io