前端知识图谱 · 全领域四级能力库#

一套按「领域 × 能力等级」组织的前端知识体系：21 个领域，每个领域分为 L1 基础 → L2 进阶 → L3 高级 → L4 专家 四级。 目标不是罗列名词，而是回答三个问题：这一层要掌握什么、掌握到什么程度、怎么验证自己真的掌握了。

一、四级能力标尺（全局统一口径）#

升级的本质差异：

• L1 → L2：从「会调用」到「懂机制」。
• L2 → L3：从「解决问题」到「设计系统」。
• L3 → L4：从「技术最优」到「组织与业务最优」。

二、知识图谱总览#

graph TD
  A[前端知识图谱] --> B[基础层<br/>语言与平台]
  A --> C[框架层<br/>组件与数据]
  A --> D[工程层<br/>构建与质量]
  A --> E[专项层<br/>性能安全与端]
  A --> F[架构层<br/>体系与影响力]

  B --> B1[01 HTML 与 Web 标准]
  B --> B2[02 CSS 与视觉实现]
  B --> B3[03 JavaScript 语言]
  B --> B4[04 TypeScript 与类型工程]
  B --> B5[05 浏览器原理与 Web API]

  C --> C1[06 框架与组件化]
  C --> C2[07 状态管理与数据流]
  C --> C3[08 路由与渲染架构]
  C --> C4[21 React 16 → 19 版本演进]

  D --> D1[09 工程化与构建]
  D --> D2[13 测试与质量保障]
  D --> D3[10 网络协议与缓存]
  D --> D4[12 安全]

  E --> E1[11 性能优化]
  E --> E2[14 Node.js 与 BFF]
  E --> E3[15 跨端与多端复用]
  E --> E4[16 可视化与多媒体]
  E --> E5[18 可观测性与稳定性]
  E --> E6[19 AI 原生前端]

  F --> F1[17 架构与设计系统]
  F --> F2[20 工程效能与团队影响力]

三、领域索引#

可视化入口：知识图谱交互版 —— 支持领域检索、四级展开、掌握度勾选（进度存本地）。

怎么用#

进度存在浏览器 localStorage，换浏览器或清缓存会丢失；团队共用请以 Markdown 文档为准。

四、三条典型成长路径#

路径 A：业务开发主线（大多数人）#

01 HTML → 02 CSS → 03 JavaScript → 06 框架 → 07 状态 → 08 渲染
                                   ↘ 09 工程化 → 13 测试 → 10 网络 → 11 性能 → 12 安全

里程碑：L2 覆盖 01/02/03/06/07/09；L3 突破 11 性能 或 09 工程化 其中一项。

路径 B：工程平台 / 架构主线#

03 JavaScript → 04 TypeScript → 09 工程化 → 13 测试 → 17 架构 → 20 影响力
                                    ↘ 18 可观测 → 11 性能

里程碑：能独立交付一套构建/脚手架/组件库平台，并推动多团队采纳。

路径 C：跨端 / 可视化主线#

02 CSS → 05 浏览器 → 15 跨端 → 16 可视化
              ↘ 08 渲染架构 → 11 性能

里程碑：能完成一套多端交付方案或自研渲染/图形引擎。

五、自评方法（每月 1 次，10 分钟）#

1. 按领域逐级自评，只认「能独立产出」的级别，不认「听过」。
2. 降级规则：L3 要求「能讲清原理 + 有量化结果」，缺一项就回落到 L2。
3. 空窗规则：某领域 6 个月未实战，主动降一级（技术记忆会衰减）。
4. 记录证据：每个级别至少留一条证据（PR、文档、故障复盘、性能报告、分享链接）。
5. 画雷达图：用 knowledge-map.html 的掌握度汇总，找出「该有但为空」的格子——那通常就是瓶颈。

一个反直觉的判断： 大多数人卡在 L2，不是因为知识点不够，而是因为没有把一次优化做到「可量化、可复用、可传播」。L3 的门槛是产出物，不是知识量。

六、文档规范#

规模：21 篇全部为「详解版」，合计约 2.3 万行；单篇 680–1700 行，含可运行示例、对比表与自检题。

统一结构（每篇一致，可跳读）：

0 领域导论      真实故障场景 → 一个类比 → 学习地图 → 分级标尺
1 L1 基础      是什么 → 为什么 → 怎么用（代码）→ 常见坑 → 小结与自检
2 L2 进阶      同上，主题从「会用」转向「懂机制」
3 L3 高级      同上，主题转向「设计与归因」
4 L4 专家      同上，主题转向「治理与决策」
5 综合实战      需求 → 方案 → 关键代码 → 验收清单
6 常见误区      10 条左右的「误区 / 事实」对照
7 面试高频题    6–8 题，每题给答题框架而非标准答案
8 面试深挖      考察维度 → 三层追问链 → 白板题 → 场景设计 → 高频错误
9 延伸资源      真实存在的规范、文档、论文与工具

第 8 章怎么用：7 章是「这题怎么答」，8 章是「答完还会被追什么」。每篇 8.2 给 3 条能连续追问三层的链，第三层落到规范、源码、浏览器实现或量化数据；8.3 是白板题（20 工程效能这类偏管理的领域改为产出物题）；8.4 是场景设计题，附带分与减分项；8.5 是面试里最容易说错的 8 句话。01、02 两篇另外多了 8.6 代码级细节题与 8.7 的 45 分钟模拟面试评分表。

写作约定：

• 每个知识点按「是什么 → 为什么需要 → 怎么用 → 常见坑」展开，面向能写业务代码但没系统学过该领域的同学。
• 代码示例尽量可运行，注释用 JSDoc；伪代码会明确标注。
• 每级末尾配「小结表 + 自检题」，自检题以「能不能讲清 × 能不能落地」为标准。
• 标注：[必会] 高频必备、[加分] 差异化能力、[趋势] 近两年新增或快速演进。

怎么读（给初学者）：

1. 先读 03 JavaScript 与 01 HTML、02 CSS，把语言与页面基础打牢；
2. 再读 06 框架、07 状态、08 渲染，形成「数据 → 组件 → 页面」的完整心智；
3. 然后按工作痛点选读：卡顿看 11 性能，发布慢看 09 工程化，线上问题看 18 可观测；
4. 12 安全、10 网络 建议在第一次做登录/支付/跨域需求前读完；
5. L4 章节不必一次读完，等你要做技术决策或带人时再回来。

七、维护约定#

新增领域时：在 README 索引表登记 → 按统一模板建文件 → 在 public/knowledge-map.html 的 DOMAINS 数组加一条数据。