本仓库按"前端架构师能力金字塔"四层模型，系统整理了从基础到架构、从技术到管理的完整学习资料。 每个知识领域均包含：学习文档、练习册、面试题三部分，覆盖理论与实战。 配套网站提供能力自评、客观题测评、在线编程题、面试题抽测、AI 学习助手、学习数据中心等智能化学习体验，并支持 PWA 离线访问。 本知识库追求尽善尽美：即使是初级学员，也能按阶段循序渐进，最终成长为前端架构师。
前端架构师进阶规划.md # 总体进阶规划
README.md # 本索引文件
docs/
├── STYLE-GUIDE.md # 文档写作规范
├── CONTRIBUTING.md # 贡献指南
├── glossary.md # 术语表
├── tech-radar.md # 技术雷达
├── resources.md # 精选学习资源总览
├── project-handbook.md # 通关项目实战手册
├── architect-workflow.md # 架构师工作流与面试模拟
├── case-studies/ # 跨领域综合案例
│ ├── 01-from-url-to-interactive.md
│ ├── 02-large-admin-system.md
│ └── 03-technology-selection.md
└── learning-path/ # 学习路径
├── 01-knowledge-dependency-map.md
├── 02-capability-self-assessment.md
└── 03-learning-routes.md
quizzes/ # 客观题题库（43 领域，585 题）
website/ # VitePress 增强型静态网站
└── .vitepress/
├── theme/ # 自定义 Vue 组件
└── scripts/ # 内容同步与索引构建脚本
templates/ # 工具箱模板
scripts/ # 自动化脚本
└── lint-docs.sh # 文档规范检查脚本
.github/ # GitHub 贡献模板
├── ISSUE_TEMPLATE/
│ ├── new-domain.yml # 新增领域建议
│ ├── content-error.yml # 内容错误反馈
│ └── feature.yml # 功能建议
└── pull_request_template.md
├── ADR-TEMPLATE.md
├── TECH-SELECTION-SCORECARD.md
├── CODE-REVIEW-CHECKLIST.md
├── PERFORMANCE-OPTIMIZATION-SOP.md
└── TECH-DEBT-REGISTER.md
CHANGELOG.md # 变更日志
level-01-foundation/ # 第一层：语言基础 / 浏览器 / 网络 / 安全 / HTML/CSS / 可访问性 / 算法 / 设计模式
├── F01-javascript/ # JavaScript 语言基础
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
├── F02-typescript/ # TypeScript 类型系统
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
├── F03-browser/ # 浏览器原理
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
├── F04-network/ # 计算机网络
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
├── F05-security/ # Web 安全
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
├── F06-html-css/ # HTML/CSS 工程化
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
└── F07-a11y/ # Web 可访问性
├── 01-学习文档.md
├── 02-练习册.md
└── 03-面试题.md
├── F08-data-structures-algorithms/ # 数据结构与算法
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
└── F09-design-patterns/ # 设计模式与软件工程基础
├── 01-学习文档.md
├── 02-练习册.md
└── 03-面试题.md
level-02-engineering/ # 第二层：工程化 / 框架原理 / 跨端技术 / AI 工程化 / Git / DX / SRE / 供应链安全
├── E01-build-tools/ # 构建工具
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
├── E02-monorepo/ # Monorepo 工程管理
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
├── E03-ci-cd/ # CI/CD 与 DevOps
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
├── E04-code-quality/ # 代码质量与测试体系
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
├── E05-design-system/ # 设计体系与组件库
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
├── E06-react/ # React 原理与生态
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
├── E07-vue/ # Vue 原理与生态
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
├── E08-cross-platform/ # 跨端技术
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
├── E09-ai-engineering/ # AI 工程化 / AI Native 前端
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
├── E10-node-bff/ # Node.js / BFF 服务端
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
├── E11-git-workflow/ # Git 工作流与变更管理
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
└── E12-developer-experience/ # 开发者体验与工程效能
├── 01-学习文档.md
├── 02-练习册.md
└── 03-面试题.md
├── E13-deployment-sre/ # 前端部署与运维（SRE）
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
└── E14-package-supply-chain/ # 前端包管理与供应链安全
├── 01-学习文档.md
├── 02-练习册.md
└── 03-面试题.md
level-03-architecture/ # 第三层：系统架构 / 性能工程 / 质量保障 / 数据与可观测性 / 可视化 / Serverless / 数据工程
├── A01-system-architecture/ # 系统架构设计
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
├── A02-micro-frontend/ # 微前端
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
├── A03-performance/ # 性能工程
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
├── A04-quality/ # 质量保障
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
├── A05-data-state/ # 数据与状态管理
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
├── A06-observability/ # 可观测性与稳定性工程
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
├── A07-security-architecture/ # 安全架构与 SDL
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
├── A08-real-time/ # 实时与协同架构
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
└── A09-internationalization/ # 国际化与本地化架构
├── 01-学习文档.md
├── 02-练习册.md
└── 03-面试题.md
├── A10-visualization-graphics/ # 前端可视化与图形架构
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
├── A11-serverless-edge/ # Serverless / Edge 架构
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
└── A12-data-engineering/ # 前端数据工程
├── 01-学习文档.md
├── 02-练习册.md
└── 03-面试题.md
level-04-leadership/ # 第四层：业务洞察 / 团队领导力 / 技术战略 / 沟通 / 项目管理 / 招聘 / 品牌 / 治理
├── L01-business/ # 业务洞察
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
├── L02-team/ # 团队领导力
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
├── L03-strategy/ # 技术战略
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
├── L04-communication/ # 沟通表达与影响力
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
├── L05-project-management/ # 项目管理与交付
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
└── L06-hiring/ # 招聘与组织发展
├── 01-学习文档.md
├── 02-练习册.md
└── 03-面试题.md
├── L07-tech-branding/ # 技术品牌与社区影响力
│ ├── 01-学习文档.md
│ ├── 02-练习册.md
│ └── 03-面试题.md
└── L08-tech-governance/ # 技术治理与变革管理
├── 01-学习文档.md
├── 02-练习册.md
└── 03-面试题.md
目录名说明：目录名采用领域编号前缀（如
F01-、E06-）以便快速识别层级和顺序，便于检索和引用。
| 阶段 | 目标 | 重点阅读 |
|---|---|---|
| 阶段一：高级前端工程师 | 夯实基础、掌握工程化 | 第一层 + 第二层 |
| 阶段二：前端专家 | 能主导复杂项目架构 | 第二层 + 第三层 |
| 阶段三：前端架构师 | 技术与战略结合 | 第三层 + 第四层 |
- 先看学习文档：建立系统认知，理解原理而非死记硬背。
- 再做练习册：通过题目检验理解程度，重点关注错题。
- 最后刷面试题：模拟真实面试场景，训练表达与深度思考。
- 定期复盘：每学完一个领域，用 TL;DR 和自评表检验掌握程度。
- 每周精读一个知识领域的学习文档。
- 每月完成对应练习册与面试题。
- 每季度做一次跨领域综合复盘。
- 每年参与或主导一个中大型项目，将知识转化为架构经验。
┌─────────────────────────────────────────┐
│ 第四层：业务洞察 / 团队领导力 / 技术战略 │
├─────────────────────────────────────────┤
│ 第三层：系统架构 / 性能工程 / 质量保障 │
│ / 数据与状态 / 可观测性 │
├─────────────────────────────────────────┤
│ 第二层：工程化 / 框架原理 / 跨端技术 │
│ / AI 工程化 / Node.js 服务端 │
├─────────────────────────────────────────┤
│ 第一层：语言基础 / 浏览器 / 网络 / 安全 │
└─────────────────────────────────────────┘
- 知识领域数：24 个
- 学习文档：24 份
- 练习册：24 份
- 面试题：24 份
- 总文件数：72 份学习资料 + 2 份规划索引 + 9 份规范/资源/手册文档 + 5 份工具模板 + 5 个综合案例 + 3 份学习路径文档 + 1 个检查脚本 + 4 个 GitHub 模板
增强型静态网站已部署至 GitHub Pages：
🔗 https://rendongping.github.io/jgs/
网站特性：
- 按四层金字塔组织的 24 个知识领域
- 可视化知识依赖图
- 在线能力自评表
- 面试题折叠答案与掌握标记
- 学习进度追踪
- 本地全文搜索
网站源码位于 website/ 目录，基于 VitePress 构建。
cd website
npm install
npm run dev # 启动本地开发服务器
npm run build # 构建生产站点
npm run preview # 预览构建产物构建流程会先执行 npm run sync，将仓库根目录的学习资料自动同步到 website/ 下，并生成侧边栏与站点地图。
- 写作规范：
docs/STYLE-GUIDE.md - 贡献指南：
docs/CONTRIBUTING.md - 变更记录：
CHANGELOG.md
本资料库应随技术发展和个人成长持续更新。建议：
- 定期补充新的技术方向（如 AI 应用、WebAssembly、边缘计算等）。
- 根据个人项目经验，补充实战案例。
- 将面试题与自己的真实面试经历对照，不断完善答案。
前端架构师的核心竞争力，不是会多少框架，而是在业务、技术、团队之间找到最优解的能力。