序：为什么要写这个系列
多年观察前端工程师从初级走向架构师——从 jQuery 时代的 PC 端 OA，到 Electron 桌面应用，到微前端拆分，到 800 页中后台——这条路上，没有一份从入门到架构师、由浅入深、实战派的系统梳理。
市面上的前端知识有几种：
- 入门教程：多如牛毛，但写到第 5 章就教你
npm install，读完之后除了会用 React 写个 Todo，不知道为什么这么设计 - 源码解析：极深，但对工作 3 年以下的人像天书。看到一半就放弃
- 架构博客：零散、单点，但讲”为什么这么选”——这是最有价值的部分，可惜不成体系
- 面试题合集：背答案好用，但不能真正建立理解
本系列想做的事情：
- 由浅入深：从浏览器渲染一个网页开始，到化神期架构师境界，5 大阶梯 29 篇，每一篇都能独立读但又能串成一条成长曲线
- 实战锚点：每一篇都映射到真实的生产场景——Module Federation 微前端、首屏性能优化、SSO 统一权限、企业级组件库、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 | 带 USB 硬件通信的桌面应用项目 |
| 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 it lands）—— 把生产数据和架构原理结合讲透
- 方案对比与选型速查表（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（答案）：浏览器从输入 URL 到页面呈现经历了哪些阶段？哪些阶段可以被前端优化？
A：网络层（DNS → TCP → TLS → HTTP 响应 → TTFB）+ 渲染层（HTML 解析 → DOM Tree → CSS 解析 → CSSOM → Render Tree → Layout → Paint → Composite → 屏幕像素）。前端能优化的：① 网络层走 CDN + HTTP/3 + 边缘缓存把 TTFB 从几百 ms 压到几十 ms；② HTML 体积 + 流式 SSR 让首字节更快到达；③ CSS / 字体关键路径 inline +
font-display: swap减少阻塞；④ JS 用代码分割 + tree-shaking 让主线程尽快空闲；⑤ 图片用preload+ AVIF + LQIP 占位。面试要点：把每阶段说出一个可量化的指标（毫秒或百分比），比泛泛而谈”网络优化”专业得多。详细答案见 **第 1 篇 · 浏览器如何渲染出一个网页**的 5 道重点面试题。Q2（思考）：HTTP/1.1 / HTTP/2 / HTTP/3 的核心区别是什么？HTTP/3 为什么用 QUIC 而不是 TCP？
Q3（思考）：V8 引擎的 Hidden Class 和 Inline Cache 是什么？怎样写代码才能充分利用 V8 的优化？
Q4（思考）：React Fiber 协调器解决了什么问题？Stack Reconciler 的痛点是什么？
Q5（思考）：你在生产环境里是怎么把首屏时间从 4.2s 优化到 1.8s 的？网络层具体做了什么改动？
💡 每道题后面都有 AI 助手按钮，可以一键拿到详细答案。30 篇全部已发布，每篇都自带 5 道面试真题。
七、下一步
下一篇 → 练气期 #1 · 浏览器如何渲染出一个网页—— 从最底层开始，正式踏入炼气期。
本系列作者：林健（紫牙），11 年前端架构师，主导过 ERP 全栈重构、微前端落地、SOO 统一权限、电子表格 FinSpread 等多个企业级项目。 公众号 / GitHub：搜「紫牙」或 lovanya/lovanya.github.io