前端知识体系

不应该按"Vue、React、Webpack 各学一点"来组织，而应该按 浏览器如何运行代码 → JS 如何驱动页面 → 框架如何抽象 UI → 工程系统如何交付 → 大型应用如何治理 这条链路搭。

建议把整个前端体系架成 8 层。

一、前端知识总图

text 复制代码

                           ┌──────────────────────┐
                           │  8. 前端架构 / AI前端 │
                           │ 微前端 / BFF / Agent │
                           └──────────▲───────────┘
                                      │
                           ┌──────────┴───────────┐
                           │ 7. 工程化 / 质量体系   │
                           │ Vite CI/CD 测试 监控   │
                           └──────────▲───────────┘
                                      │
                     ┌────────────────┴────────────────┐
                     │ 6. 性能 / 安全 / 网络 / 稳定性    │
                     │ Web Vitals XSS 缓存 SSE WS      │
                     └────────────────▲────────────────┘
                                      │
                      ┌───────────────┴───────────────┐
                      │ 5. Vue / React 框架机制       │
                      │ 响应式 Fiber Diff 状态管理    │
                      └───────────────▲───────────────┘
                                      │
                    ┌─────────────────┴──────────────────┐
                    │ 4. 浏览器运行原理                    │
                    │ DOM CSSOM 渲染 EventLoop 网络       │
                    └─────────────────▲──────────────────┘
                                      │
                    ┌─────────────────┴──────────────────┐
                    │ 3. JavaScript / TypeScript         │
                    │ 作用域 原型 异步 类型系统            │
                    └─────────────────▲──────────────────┘
                                      │
                  ┌───────────────────┴───────────────────┐
                  │ 2. HTML / CSS / Web API              │
                  │ DOM CSS 布局 响应式 Canvas Storage    │
                  └───────────────────▲───────────────────┘
                                      │
                  ┌───────────────────┴───────────────────┐
                  │ 1. CS 基础                            │
                  │ 数据结构 网络 OS 数据库 Git           │
                  └───────────────────────────────────────┘

$推导$ 真正高级的前端，本质不是"会写页面"，而是：

理解浏览器运行时，并利用 JS + 框架 + 工程系统构建可靠、高性能、可维护的软件。

二、第一层：计算机基础

这一层决定你后面的东西能不能真正理解。

1. 数据结构与算法

前端不用达到算法竞赛级别，但这些必须熟：

text 复制代码

Array
Linked List
Stack
Queue
HashMap / Set
Tree
Graph
Heap

排序
二分
DFS / BFS
LRU
拓扑排序

尤其要会把算法映射到工程：

text 复制代码

虚拟列表
前缀和 + 二分查找

Vue Scheduler
优先队列

React Fiber
树遍历

工作流 DAG
拓扑排序

缓存
LRU

你之前讨论的：

text 复制代码

虚拟列表 O(n) → O(log n)
DAG Kahn

其实已经属于这一层。

2. 网络

必须建立完整链路：

text 复制代码

URL
 ↓
DNS
 ↓
TCP / QUIC
 ↓
TLS
 ↓
HTTP
 ↓
CDN / Nginx
 ↓
Server
 ↓
Browser

重点：

text 复制代码

HTTP/1.1
HTTP/2
HTTP/3

TCP
TLS

Cookie
Session
JWT

Cache-Control
ETag

CORS

SSE
WebSocket
Fetch
XHR

你最近学的：

text 复制代码

HTTP
  ├── 普通 Request/Response
  ├── SSE
  └── Streaming Fetch

WebSocket
  └── 独立的全双工协议

属于这里。

三、第二层：HTML / CSS / Web Platform

很多人直接学 Vue，导致这一层特别薄。

HTML

至少掌握：

text 复制代码

语义化
DOM
表单
事件
无障碍
SEO

CSS

建议按机制学，而不是背属性。

text 复制代码

CSS
│
├─ Cascade
│   ├─ specificity
│   └─ inheritance
│
├─ Layout
│   ├─ normal flow
│   ├─ position
│   ├─ flex
│   └─ grid
│
├─ Rendering
│   ├─ transform
│   ├─ animation
│   └─ compositing
│
└─ Architecture
    ├─ CSS Modules
    ├─ Scoped CSS
    ├─ CSS-in-JS
    └─ Tailwind

真正重要的是理解：

text 复制代码

DOM
 ↓
Style
 ↓
Layout
 ↓
Paint
 ↓
Composite

因为它直接连接到性能优化。

四、第三层：JavaScript / TypeScript

这是整个前端体系的核心。

我建议 JS 分成六块。

1. JS 语言基础

text 复制代码

数据类型
类型转换
this
作用域
闭包
原型
原型链
继承

这里一定要形成：

text 复制代码

Lexical Environment
        ↓
Scope Chain
        ↓
Closure

而不是背：

"闭包是函数套函数。"

2. 对象系统

text 复制代码

prototype
__proto__
new
class
Object.create

核心关系：

text 复制代码

实例
 ↓ __proto__
prototype
 ↓
Object.prototype
 ↓
null

3. 异步系统

这是面试极高频。

text 复制代码

Call Stack

Event Loop
│
├─ Task
│
├─ Microtask
│
└─ Rendering

具体：

text 复制代码

Promise
async / await
setTimeout
queueMicrotask
requestAnimationFrame

你最近学的：

text 复制代码

Event Loop
requestAnimationFrame
SSE

其实应该连接起来理解：

text 复制代码

网络事件
   ↓
Event Loop
   ↓
JS
   ↓
rAF
   ↓
Render

4. 内存

很多前端到高级阶段会卡在这里。

text 复制代码

Stack
Heap
GC
Reachability
Memory Leak
WeakMap
WeakSet

例如：

text 复制代码

DOM 引用未释放
Event Listener 未清理
Timer 未清除
Closure 捕获大对象

5. TypeScript

不要只学：

ts 复制代码

string
number
interface

应该形成完整体系：

text 复制代码

TypeScript
│
├─ 基础类型
├─ interface / type
├─ 泛型
├─ union / intersection
├─ keyof
├─ typeof
├─ indexed access
├─ conditional type
├─ mapped type
├─ infer
└─ type narrowing

最终目标：

理解 TypeScript 本质是一套 静态类型推导系统。

五、第四层：浏览器原理

这是普通前端和高级前端之间非常明显的分水岭。

完整知识图：

text 复制代码

Browser
│
├─ 网络
│
│  ├─ DNS
│  ├─ HTTP
│  └─ Cache
│
├─ Parser
│  ├─ HTML Parser
│  └─ CSS Parser
│
├─ DOM
├─ CSSOM
│
├─ Render Tree
│
├─ Layout
├─ Paint
├─ Composite
│
├─ JS Engine
│
│  ├─ Call Stack
│  ├─ Heap
│  └─ GC
│
└─ Event Loop

必须真正理解这条：

text 复制代码

HTML
 ↓
DOM

CSS
 ↓
CSSOM

DOM + CSSOM
 ↓
Render Tree
 ↓
Layout
 ↓
Paint
 ↓
Composite

因为你以后所有性能题：

text 复制代码

为什么卡？
为什么掉帧？
为什么 DOM 多了慢？
为什么 transform 快？
为什么虚拟列表有效？

全部回到这里。

六、第五层：框架

框架建议不要按 API 学，而按 框架解决什么问题 学。

前端框架本质处理：

text 复制代码

State
 ↓
UI

也就是：

text 复制代码

state → render → DOM

Vue 体系

建议按这条线：

text 复制代码

Vue
│
├─ 响应式
│   ├─ reactive
│   ├─ ref
│   ├─ effect
│   ├─ computed
│   └─ watch
│
├─ Renderer
│   ├─ VNode
│   ├─ Diff
│   └─ Patch
│
├─ Compiler
│   ├─ parse
│   ├─ transform
│   └─ generate
│
├─ Scheduler
│   ├─ queueJob
│   └─ nextTick
│
├─ Component
│   ├─ lifecycle
│   ├─ props
│   └─ slots
│
└─ Ecosystem
    ├─ Router
    ├─ Pinia
    ├─ KeepAlive
    ├─ Teleport
    └─ Suspense

你之前那套 Vue 第一、二、三梯队，其实应该挂在这棵树下面。

React 体系

React 建议形成另一套模型：

text 复制代码

React
│
├─ Component
├─ State
├─ Hooks
│
├─ Fiber
│
├─ Reconciliation
│
├─ Scheduler
│
├─ Concurrent Rendering
│
└─ Ecosystem
    ├─ Router
    ├─ Zustand
    └─ Next.js

Vue 和 React 最终要从：

text 复制代码

API 对比

提升到：

text 复制代码

Vue
Dependency Tracking

vs

React
Re-render + Reconciliation

这是框架理解的关键。

七、第六层：状态管理与前端架构

组件写多了之后，真正的问题就不再是"怎么写组件"，而是：

状态应该放在哪里？

形成：

text 复制代码

Local State
     ↓
Component State
     ↓
Shared State
     ↓
Global State
     ↓
Server State

对应：

text 复制代码

Vue
ref
reactive
Pinia

React
useState
useReducer
Context
Zustand

Server State
TanStack Query

必须能回答：

text 复制代码

为什么不能所有东西都放 Pinia/Zustand？

为什么 Server State 和 Client State 要分开？

为什么 derived state 尽量 computed 而不是保存一份？

八、第七层：工程化

这里决定你是不是只能写 Demo。

完整工程链路：

text 复制代码

Source Code
    ↓
Compiler
    ↓
Bundler
    ↓
Optimizer
    ↓
Build
    ↓
Deploy

对应知识：

text 复制代码

工程化
│
├─ Package Manager
│   ├─ npm
│   ├─ pnpm
│   └─ workspace
│
├─ Bundler
│   ├─ Webpack
│   ├─ Rollup
│   └─ esbuild
│
├─ Vite
│
├─ Babel
├─ SWC
│
├─ ESLint
├─ Prettier
│
├─ Git
│
├─ CI/CD
│
└─ Monorepo
    ├─ pnpm workspace
    ├─ Nx
    └─ Turborepo

Vite 学习应该顺着：

text 复制代码

为什么传统 Bundler 启动慢
       ↓
浏览器原生 ESM
       ↓
Dev Server
       ↓
Dependency Pre-Bundling
       ↓
HMR
       ↓
Production Rollup

而不是只背一句：

Vite 比 Webpack 快。

九、第八层：性能

高级前端必须形成性能分析方法论。

不是：

上懒加载、上缓存。

而是：

text 复制代码

发现问题
 ↓
测量
 ↓
定位
 ↓
优化
 ↓
再次测量

体系：

text 复制代码

Frontend Performance
│
├─ Network
│   ├─ CDN
│   ├─ Cache
│   ├─ Compression
│   └─ HTTP
│
├─ Loading
│   ├─ code splitting
│   ├─ lazy loading
│   └─ preload
│
├─ JS
│   ├─ Long Task
│   ├─ Event Loop
│   └─ Worker
│
├─ Rendering
│   ├─ Layout
│   ├─ Paint
│   └─ Composite
│
├─ DOM
│   └─ Virtual List
│
├─ Memory
│   └─ GC
│
└─ Metrics
    ├─ LCP
    ├─ CLS
    └─ INP

你最近问过的这个问题：

text 复制代码

rAF 已经优化了

但还掉帧怎么办？

JS
Layout
Paint
DOM
GC

其实就是完整的性能诊断框架，而不只是虚拟列表问题。

十、安全

至少需要掌握：

text 复制代码

XSS
CSRF
CORS
CSP
Cookie Security
JWT Security
HTTPS
Supply Chain Security

例如一定要能区分：

text 复制代码

CORS
浏览器跨域访问控制

CSRF
利用浏览器自动携带凭据攻击

XSS
注入恶意 JS

十一、测试与质量

完整测试金字塔：

text 复制代码

        E2E
       /   \
 Integration
   /         \
 Unit Test

前端工具：

text 复制代码

Vitest / Jest
Testing Library
Playwright
Cypress

核心不是会 API，而是：

text 复制代码

什么应该 Unit Test

什么应该 Integration

什么必须 E2E

十二、前端架构

这是高级 / 资深前端阶段。

需要处理的已经不是：

text 复制代码

这个 Button 怎么写

而是：

text 复制代码

100 人如何维护一个系统？

体系：

text 复制代码

Frontend Architecture
│
├─ Component Architecture
├─ State Architecture
├─ Module Architecture
├─ Data Flow
│
├─ Micro Frontend
├─ Monorepo
├─ BFF
│
├─ Design System
├─ Component Library
│
├─ Observability
├─ Error Handling
└─ Feature Flag

十三、AI 前端

如果走 AI 应用 / Agent 前端，这一层现在应该单独拿出来。

text 复制代码

AI Frontend
│
├─ Streaming UI
│   ├─ SSE
│   ├─ Fetch Stream
│   └─ WebSocket
│
├─ Agent UI
│   ├─ Tool Call
│   ├─ Thinking State
│   ├─ Running State
│   └─ Error State
│
├─ HITL
│   ├─ Approve
│   ├─ Reject
│   └─ Modify
│
├─ Workflow UI
│   ├─ DAG
│   ├─ React Flow
│   └─ Vue Flow
│
├─ Chat
│   ├─ Context
│   ├─ Conversation
│   └─ Message State
│
└─ AI Engineering
    ├─ RAG
    ├─ Tool Calling
    ├─ MCP
    └─ Agent

这里你会发现前面所有知识开始汇合：

text 复制代码

SSE
      → 网络

Streaming
      → Event Loop

Vue Flow
      → 框架 + 图算法

1000 节点优化
      → DOM + Layout + Paint

Agent 状态
      → State Architecture

Tool Calling
      → Backend/API

MCP
      → AI Infrastructure

这也是为什么 AI 前端实际上对基础能力要求更高，而不是更低。

十四、如果是为了面试，我建议你按这个优先级

不要平均学习。

P0：必须非常熟

text 复制代码

JavaScript
├─ 作用域
├─ 闭包
├─ this
├─ 原型
├─ Promise
├─ Event Loop
└─ async/await

浏览器
├─ HTTP
├─ 缓存
├─ DOM
├─ 渲染流程
└─ Event Loop

Vue / React
├─ 响应式 / Hooks
├─ Diff
├─ 生命周期
├─ 状态管理
└─ Scheduler

工程
├─ Vite
├─ Webpack
└─ Git

P1：大厂前端必须掌握

text 复制代码

TypeScript
性能优化
网络
安全
测试
状态管理
SSR
Router
工程化

P2：高级能力

text 复制代码

前端架构
微前端
Monorepo
组件库
Design System
可观测性
CI/CD
Node/BFF

P3：你的差异化方向

text 复制代码

AI Frontend
Agent
MCP
RAG
Streaming
SSE / WebSocket
Workflow
React Flow / Vue Flow

十五、最终压缩成一条学习主线

如果让我把整个前端压缩成 15 个核心知识点：

text 复制代码

1 HTML / CSS
        ↓
2 JavaScript
        ↓
3 作用域 / 闭包 / 原型
        ↓
4 Promise / Event Loop
        ↓
5 浏览器渲染机制
        ↓
6 HTTP / 网络 / 缓存
        ↓
7 TypeScript
        ↓
8 Vue / React
        ↓
9 响应式 / Fiber / Diff
        ↓
10 状态管理
        ↓
11 Vite / Webpack
        ↓
12 性能优化
        ↓
13 测试 / CI/CD
        ↓
14 前端架构
        ↓
15 AI Frontend / Agent

把它记成一句：

语言 → 浏览器 → 框架 → 工程 → 性能 → 架构 → AI 应用。

$推导$ 以你目前的知识覆盖来看，最值得继续补的已经不再是零散 API，而是把 JS Runtime → Browser → Vue/React Runtime → Performance → Architecture 这条因果链真正串起来。这样 Event Loop、rAF、Vue Scheduler、React Fiber、虚拟列表、SSE、INP 就不再是几十个独立八股，而是同一个运行时模型下面的问题。

**会推翻这个学习顺序的条件：**如果你的目标从"大厂前端 / AI 前端"切换成纯视觉页面、低代码配置或纯 Node 后端岗位，那么框架机制、浏览器性能和 AI Frontend 的优先级就需要重新调整。