从 L1 基础 到 L4 专家，一套可验证的前端知识体系
按「领域 × 能力等级」组织的前端知识体系：21 个领域，每个领域分 L1 基础 → L2 进阶 → L3 高级 → L4 专家四级。
基础层
语言与平台5 篇HTML 与 Web 标准
HTML 是网页的「骨架 + 说明书」。它既告诉浏览器「这块内容是什么」，也告诉读屏软件、搜索引擎、浏览器自动化工具「该怎么理解它」。
CSS 与视觉实现
CSS 是「把抽象结构渲染成视觉」的语言。它同时管三件事：布局（元素放在哪）、绘制（长什么样）、状态过渡（怎么变）。
JavaScript 语言
JavaScript 是前端唯一的通用语言。框架、构建工具、性能问题、内存泄漏，最终都能还原成「一段 JS 在引擎里怎么执行」。
TypeScript 与类型工程
TypeScript 是在 JavaScript 上面加了一层「可被编译器检查的文档」。它不改变运行时，但能让你在改代码时提前知道哪里会坏。
浏览器原理与 Web API
浏览器是前端代码唯一的运行环境。所有「为什么会卡 / 为什么会白屏 / 为什么这个 API 只在 Safari 出问题」的答案，最终都落在这台机器的内部机制上。
框架层
组件、数据与渲染4 篇框架与组件化
框架替你做了三件事——把数据变化映射成 UI 更新、把 UI 拆成可复用的组件、把副作用管理起来。理解它怎么做到这三件事，比记 API 重要得多。
状态管理与数据流
状态是「应用此刻的全部事实」。数据流是「这些事实如何被读取、修改、同步」。中大型前端项目失控，八成不是组件写得多，而是状态没有归属。
路由与渲染架构
路由决定「用户在哪个页面」，渲染架构决定「这个页面的 HTML 在哪、什么时候、由谁生成」。两者共同决定了首屏速度、SEO、服务器成本与交互体验。
React 16 → 19 版本演进
React 16 到 19 不是「API 多了几个」，而是渲染模型（Fiber → 并发）、服务端边界（SSR → RSC）、交互模型（手写 loading → Actions）、优化方式（手写 memo → 编译器） 四次代际变化叠加…
工程层
构建、网络与质量4 篇专项层
性能、端与稳定性6 篇性能优化
性能不是「某个配置项」，而是「用户等多久、卡不卡、晃不晃」的可测量结果。优化的第一步永远是测量，最后一步永远是防止回退。
Node.js 与 BFF
Node.js 让 JavaScript 跑在服务端；BFF（Backend For Frontend）是「专门为一个前端服务的后端层」，负责聚合、裁剪、鉴权透传与渲染。
跨端与多端复用
跨端不是「一套代码跑所有地方」，而是在明确各端能力差异的前提下，最大化复用、最小化差异成本。
可视化与多媒体
可视化是把数据映射成视觉元素（位置、长度、颜色、面积），多媒体是把音视频正确地解码、播放与合成。两者都要求你绕过框架，直接控制渲染与时间。
可观测性与稳定性
可观测性是「不用问用户，就能知道系统发生了什么」；稳定性是「出了问题能快速发现、快速止血、不再复发」。
AI 原生前端
AI 原生前端不是「加一个聊天框」，而是围绕「不确定的、流式的、可能出错的大模型输出」重新设计交互、状态与容错。