【万字总结】2025 前端+大前端+全栈 知识体系（上）

关注更多AI编程资讯请去AI Coding专区：https://juejin.cn/aicoding

大家好，我是双越，也是 wangEditor 作者。

2025 应该思考两个问题：

• 我今年比去年有哪些进步？每年都要成长一点点，技术上、工作上、认知上，不能只在体重上
• 我今年有什么计划？工作上有哪些 KPI，个人需要学习哪些知识，目前还有什么不足

因此，本文我就试图总结一下当前 2025 前端开发比较常用的一些知识和技术，包括基础、语言、协议、工具、框架、服务等。尽量覆盖完整的内容，整理出一个合理的体系。

如发现有未提到的重要技术和知识点，请在评论区补充，

体系化思维的重要性

当我们去思考一个比较系统的、大篇幅的事情时，一定要有体系化思维，要做成一棵树，而不是一盆散沙。所以，「相比于本文的内容来说，体系化的思维更加重要，会让你终身受益」。

例如一个学校有 2w 学生，如何组织这么多学生？就要分学院、分专业、分班级，班级下面还要再分宿舍。这样才能把这些学生管理起来，哪怕再扩展 5k 学生，也能通过这套管理体系来管理。

这同样适用于我们的前端知识，前端领域知识非常杂乱，需要学习的东西很多，你如何管理它呢？如果让你写一本《前端大全》的书，你如何制定目录呢？—— 你别掰着手指头，想到一个写一个，那就乱了。

红宝书？红宝书是 JS 相关的，而前端可不仅仅是 JS 。而且，从 JS 视角来看红宝书目录是合理的，一旦上升一个视角，从整个前端视角来看，红宝书目录就不一定合理了。

例如从 JS 视角来看网络请求，可能更接近的是 Ajax ，而从前端视角来看网络请求，可能更多是 HTTP 协议 。角度不一样，内容和侧重点就不一样。

新入门的前端同学需要有体系化思维，只有一个系统的体系才能帮助你全面、无死角的掌握所有技能。哪怕你没法近期掌握所有技能，你也知道哪些你会，哪些你不会（重要！！！），因为有一个体系目录给你参考。

前端老司机们更需要掌握体系化思维，系统和体系才能让你的学习和工作更有条理性，才能让你把多年累积的杂乱的技能和工作经验，总结转换为自己的体系知识。否则，没有体系，积累的越多，你就越乱。

计算机基础

本科或考研计算机专业的专业课。其中数据结构和算法下文单独写。

计算机组成原理

主要内容

• 「冯诺依曼结构 Von Neumann Architecture」 一种计算机体系结构，它将存储程序、数据和指令都存放在同一内存中，通过中央处理器依次读取指令并执行，从而实现计算机的基本操作。
• 「二进制 Binary」 一种数值表示方式，使用 0 和 1 两个数字，通过不同的组合表示各种数值和信息，是计算机内部数据存储和处理的基本方式。
• 「中央处理器 CPU」 计算机的核心部件，负责执行指令和控制数据流。包含算术逻辑单元（ALU）、控制单元（CU）、寄存器等部分。
• 「指令集架构 ISA」 指令集架构定义了计算机能够理解和执行的指令集合，包括指令格式、操作码、寻址模式等。
• 「内存 Memory」 存储程序和数据，主要包括主存储器（RAM）和外部存储（硬盘、SSD）等，存储层次结构影响计算机的性能
• 「缓存 Cache」 高速存储器，用于存储常用数据，以减少 CPU 对主存的访问延迟，提高处理效率
• 「总线 Bus」 计算机内部用于数据传输的通道，分为数据总线、地址总线和控制总线，用于连接 CPU、内存和外部设备。
• 「输入输出 I/O」 系统负责计算机与外部设备之间的数据交换，通常涉及 I/O 控制器、驱动程序和数据传输机制。

计算机组成原理帮助我们掌握计算机硬件的基本工作原理，为后续的操作系统、计算机网络等高级课程奠定基础。

操作系统

操作系统管理计算机的所有资源，进程控制，内存分配等。重要内容如下：

• 「进程 Process」 正在执行的程序的实例，包含程序代码、数据、堆栈等执行状态。
• 「线程 Thread」 线程是进程中的基本执行单元，同一个进程的多个线程共享进程的资源，但每个线程有自己的执行栈。
• 「调度 Scheduling」 是操作系统管理多个进程或线程执行顺序的过程，常见的调度算法有先来先服务、时间片轮转、优先级调度等。
• 「内存管理 Memory Management」 负责分配和回收内存资源，常用技术包括分页、分段和虚拟内存。
• 「虚拟内存 Virtual Memory」 一种扩展内存容量的技术，通过将部分内存数据交换到磁盘，使程序能使用比物理内存更大的地址空间。
• 「文件系统 File System」 用于管理存储设备上的文件，包括文件的创建、读取、删除及存储结构，如 FAT、NTFS、EXT 等
• 「输入输出管理 I/O」 负责计算机与外部设备之间的数据传输，涉及设备驱动、缓存管理、中断处理等技术。

操作系统的核心概念（内存、进程、线程、文件等）对于前端开发都非常重要，例如 JS 是单线程的。深入理解基础概念才能让你成为优秀程序员，否则只能浮于表面开发 CRUD 。

编译原理

编译原理，主要讲解一个编译器如何设计和开发。

• 「词法分析 lexical Analysis」 将源代码分解为基本的语法单元（词法单元，Token），如关键字、标识符、运算符等。
• 「语法分析 Syntax Analysis」 将词法分析的输出（Token 流）根据语言的语法规则构建成语法树或抽象语法树（AST）。
• 「抽象语法树 AST」 是对程序结构的抽象表示，去除了具体的语法细节，保留了程序的逻辑结构。
• 「语义分析 Semantic Analysis」 检查程序的语义是否符合语言的规则，如类型检查、变量是否声明等。
• 「中间代码 Intermediate Code」 是编译过程中的一种中间表示，它介于源代码和目标代码之间，便于优化和代码生成。
• 「优化 Optimization」 是对中间代码或目标代码进行改进，以提高程序的运行效率或减少资源消耗，常见的有死代码消除、循环优化等。
• 「代码生成 Code Generation」 将中间代码转换为目标代码（机器代码或汇编代码），是编译过程的最后阶段。

前端常见的编译器有 babel SWC vue-compiler 等，无论用什么语言，用 JS 还是 Rust，都是按照编译原理的过程开发的。

汇编语言

汇编语言是接近机器语言的低级编程语言，使用助记符表示机器指令，直接控制计算机硬件。

• 「指令集 Intruction Set」 每种处理器都拥有一组特定的指令集，定义了处理器能执行的基本操作，如数据传输、算术运算等。
• 「助记符 Mnemonic」 助记符是用来代表机器指令的符号，如 MOV（数据传输）、ADD（加法）等，简化了编程工作。
• 「寄存器 Register」 寄存器是 CPU 内部的高速存储器，用于存储程序执行过程中临时数据或计算结果。
• 「机器码 Machine Code」 机器码是计算机能够直接执行的二进制指令，每条汇编指令都对应一条机器码。
• 「内存寻址 Memory Addressing」 内存寻址是指访问计算机内存中数据的位置，汇编语言中常用的寻址模式有直接寻址、间接寻址、基址寻址等。
• 「堆栈模型 Stack and Heap」 一种数据结构模型，采用后进先出（LIFO）原则，数据项按顺序压入堆栈并从堆栈中弹出，用于存储临时数据、函数调用信息等。

前端开发不会用到，但学习它的指令集和堆栈模型，有助于我们深入理解编程语言的执行过程。

计算机网络

计算机网络讲解计算机之间的通讯原理和技术，有很多前端开发常见的概念。主要内容

• 「OSI 模型 OSI Model」 开放系统互联模型，将计算机网络通信分为七层，分别是物理层、数据链路层、网络层、传输层、会话层、表示层和应用层。
• 「TCP/IP 协议 TCP/IP Protocol」 TCP/IP协议是互联网的基础协议，主要包括传输控制协议（TCP）和网际协议（IP），定义了数据传输和路由机制。
• 「IP 地址 IP Address」 IP地址是计算机网络中用于标识设备的唯一地址，分为IPv4和IPv6两种格式。
• 「路由 Routing」 路由是数据包在网络中从源设备传输到目的设备的过程，涉及路由协议和路由算法。
• 「域名 Domain」 互联网中用于标识和定位网站的文字地址，通常由字母、数字和符号组成，并与IP地址一一对应，便于用户访问网站。
• 「DNS Domain Name System」 域名系统将域名，如 www.example.com 转换为IP地址，使用户可以通过易记的域名访问网站。
• 「UDP User Datagram Protocol」 用户数据报协议是一种无连接的传输层协议，适用于对速度要求高而对可靠性要求低的应用。
• 「TCP Transmission Control Protocol」 传输控制协议是一种面向连接的协议，提供可靠的数据传输，保证数据包按顺序到达并且无误。TCP 连接的“三次握手 四次挥手”是面试常考内容。
• 「端口号 Port Number」 端口号是用于区分同一IP地址上不同服务或应用程序的标识符，通常由操作系统分配。
• 「HTTP Hypertext Transfer Protocol」 超文本传输协议是用于客户端与服务器之间传输网页数据的协议，基于请求-响应模式。下文会再展开讲解。
• 「FTP File Transfer Protocol」 文件传输协议用于在网络上进行文件传输，支持上传和下载文件。
• 「CDN（内容分发网络）」 是通过在全球多个地点部署缓存服务器，将网站或应用的静态资源（如图片、视频、JS文件等）分发到离用户更近的服务器，以提高访问速度和减少延迟。
• 「边缘计算 Edge Compute」 在离数据源或用户更近的网络边缘设备上进行数据处理和分析，减少数据传输延迟，提高实时响应能力。现在很多云服务商 Vercel 和 Deno 都在推行 Edge 计算。

编码

编码主要讲解信息的表示、转换和传输，即我们所见的任何信息在计算机内部是如何表示的。例如

• 「ASCII 编码」 是一种字符编码标准，用于表示英文字符、数字、标点符号以及一些控制字符。它使用7位二进制数（即0到127之间的整数）来表示各种字符，其中每个字符对应一个唯一的数字编码。例如
• 字符 A 对应的ASCII编码是 65（二进制表示为 01000001）
• 字符 a 是 97（二进制 01100001）
• 「Unicode 编码」 是一个字符编码标准，用于统一表示世界上几乎所有的文字和符号。它为每个字符分配一个唯一的数字标识（称为「码点」），并支持多种语言、符号以及其他字符集，包括汉字、拉丁字母、数学符号、表情符号等。Unicode 包含了超过137,000个字符，覆盖了几乎所有的书写系统。Unicode 的设计目的是让全球的字符集标准统一，从而解决多种字符编码的兼容性问题。
• 「UTF-8」 Unicode 的一种编码方式，使用1到4个字节来表示一个字符，是目前最流行的Unicode实现，兼容ASCII。
• 「UTF-16」 Unicode 的一种编码方式，使用2或4个字节来表示一个字符，适用于东亚语言。
• 「GBK 编码」 是中国国家标准对简体和繁体中文字符集的一种扩展编码，继承了GB2312编码，并加入了更多的字符，广泛用于中文环境中的计算机系统、文本文件以及网络传输。随着 Unicode 的普及，GBK逐渐被Unicode编码（如UTF-8、UTF-16）所替代，但在一些旧系统和遗留应用中，GBK编码仍然被使用。

HTML 和 HTTP 请求时都有一个 charset 就表示使用哪种编码类型。如 划水AI 项目默认的编码是 utf-8

数据结构和算法

常见数据结构

• 「数组 Array」 数组是一种数据结构，用于存储具有相同数据类型的元素，元素在内存中是连续存储的。
• 「链表 Linked List」 链表是一种线性数据结构，其中每个元素（节点）包含数据和指向下一个节点的指针。
• 「栈 Stack」 栈是一种后进先出（LIFO）的数据结构，元素只能在一端进行插入和删除操作。
• 「队列 Queue」 队列是一种先进先出（FIFO）的数据结构，元素从队列的一端插入，从另一端删除。
• 「哈希表 Hash Table」 哈希表是一种通过哈希函数将键映射到对应值的查找结构，具有快速的插入、删除和查找操作。
• 「树 Tree」 树是一种分层的数据结构，由节点组成，其中每个节点有一个父节点和多个子节点。
• 「二叉树 Binary Tree」 二叉树是一种树形结构，每个节点最多有两个子节点，分别是左子节点和右子节点。
• 「平衡二叉树 AVL Tree」 平衡二叉树是一种自平衡的二叉搜索树，保证左右子树的高度差不超过 1，从而保持操作的时间复杂度为O(logn)。
• 「堆 Heap」 堆是一种特殊的完全二叉树，满足堆的性质（如最大堆或最小堆），广泛用于优先队列实现。
• 「图 Grahp」 图是由节点和边组成的数据结构，可以表示一对多的关系，分为有向图和无向图。

常见算法

• 「查找算法 Searching Algorithms」 查找算法用于在数据结构中查找特定元素，常见的查找算法包括线性查找、二分查找等。
• 「排序算法 Sorting Algorithms」 排序算法用于将数据元素按某种顺序排列，常见的排序算法包括冒泡排序、快速排序、归并排序等。
• 「深度优先搜索 DFS」 深度优先搜索是一种遍历图或树的算法，优先访问每个节点的子节点，直到访问到最深层才回溯。
• 「广度优先搜索 BFS」 广度优先搜索是一种遍历图或树的算法，优先访问每一层的节点，再逐层向下扩展。
• 「分治法 Divide and Conquer」 是一种将问题分解为多个子问题并递归解决的算法设计方法，常见于归并排序、快速排序等算法。
• 「贪心算法 Greedy Algorithm」 是一种通过局部最优解推导全局最优解的算法策略，常见于最短路径、背包问题等。
• 「回溯法 Backtracking」 是一种系统地寻找所有可能解的算法，通过递归逐步构造解并回退，以找到正确的解。
• 「动态规划 Dynamic Programming」 是一种优化算法，用于解决具有重叠子问题的最优子结构问题，常见于求解最短路径、背包问题等。
• 「最短路径算法 Shortest Path Algorithm」 最短路径算法用于在图中找到从一个节点到另一个节点的最短路径，常见的算法有Dijkstra算法、Bellman-Ford算法等。
• 「KMP 算法」 是一种用于字符串匹配的高效算法，通过预处理模式串来提高匹配效率，避免重复匹配。将时间复杂度由 O(m*n) 缩短为 O(m+n)。
• 「双指针 Two Pointer」 是一种通过使用两个指针在数据结构（如数组或链表）上进行遍历来解决问题的算法技巧，通常用于查找、排序或优化操作，能够有效减少时间复杂度。

算法复杂度

• 「时间复杂度 Time Complexity」 是衡量算法执行时间随输入规模变化的增长速度的指标，通常用大O符号表示，用来评估算法在最坏情况下的性能表现。
• 「空间复杂度 Space Complexity」 是衡量算法在执行过程中所需内存空间随输入规模变化的增长速度，通常用大O符号表示，反映了算法对内存资源的需求。
• O(1) 无循环
• O(n) 一层循环
• O(logn) 分治
• O(n*logn) 一层循环 + 分治
• O(n^2) 两层嵌套循环

编程模式

OOP 面向对象编程

面向对象编程是现代编程开发最重要的编程模式，常见的现代编程语言都支持。

• 「类 Class」 用于定义对象的蓝图或模板，包含对象的属性和方法。
• 「对象 Object」 类的实例，通过类创建，具有类定义的属性和方法。
• 「继承 Inheritance」 通过继承，一个类可以继承另一个类的属性和方法，从而实现代码重用和扩展。
• 「封装 Encapsulation」 将数据和操作数据的方法封装在一个类中，对外提供接口而隐藏实现细节，提高代码的安全性和可维护性。
• 「多态 Polymorphism」 允许不同类的对象以相同的接口调用，从而实现不同的行为表现。
• 「抽象 Abstraction」 是将复杂的现实世界问题简化为重要的特征，隐藏不必要的细节，提供简洁的接口。
• 「方法 Mothod」 类中的函数，定义了对象能够执行的操作或行为。
• 「属性 Attribute」 类的成员变量，用于存储对象的状态信息。
• 「构造函数 Constructor」 用于在创建对象时初始化对象的特殊方法。
• 「接口 Interface」 定义了类必须实现的方法的集合，用于提供不同类之间的协议或约定。

设计模式

SOLID 5 大设计原则（至少要能深刻理解前两个原则）

• 「单一职责原则」 每个类应该只有一个职责，意味着一个类应该只有一个原因去改变。类应专注于一个功能，避免承担过多责任。
• 「开放封闭原则」 软件实体（类、模块、函数等）应该对扩展开放，对修改封闭。即，允许在不修改现有代码的情况下，通过增加新代码来扩展功能。
• 「里氏替换原则」 子类对象应该能够替换父类对象，并且程序的行为应该保持一致。换句话说，继承关系应该保证子类能够正确地替代父类。
• 「接口隔离原则」 不应该强迫客户依赖于他们不需要的接口。一个类不应该实现它不使用的接口方法，而是将接口划分为更小、更专注的接口。
• 「依赖倒置原则」 高层模块不应该依赖低层模块，二者应该依赖抽象；抽象不应该依赖于细节，细节应该依赖于抽象。这样可以减少模块之间的耦合度，提高系统的灵活性和可维护性。

传统设计模式有 23 个，前端最常见的有如下几个：

• 「工厂模式」 封装实例的创建过程，解放 new Class() Vue React 内部都在用。
• 「单例模式」 全局只允许有一个实例，多则出错。用 TS 语法实现更优雅。
• 「观察者模式」 前端（及其他 UI 编程）最常用的设计模式，工作必用，面试必考。
• 「迭代器模式」 遍历数据不仅仅是 for 和 forEach ，还有更高级的 Iterator ，JS 早已支持了。
• 「装饰器模式」 Decorator 现已是 JS 的标准语法，装饰器正在前端普及开来。
• 「原型模式」 原型和原型链是 JS 必备的基础知识，还扩展了 JS 对象属性描述符。
• 「代理模式」 编程处处有代理，无论开发环境还是线上环境。Vue3 也用 Proxy 实现数据响应式。

FP 函数式编程

随着 React 的发展，函数式编程在前端开发被广泛使用，主要内容是：

• 「纯函数 Pure Function」 指的是不依赖于外部状态且不修改外部状态的函数，对于相同的输入总是返回相同的输出。
• 「不可变性 Immutability」 数据一旦创建后不可修改，任何变更都会生成新的数据。
• 「副作用 Side Effect」 函数外部的状态改变，如修改全局变量、I/O 操作等，函数式编程尽量避免副作用，以保持函数的纯粹性。
• 「高阶函数 Higher-Order Function」 可以接受一个或多个函数作为输入参数，或者返回一个函数的函数。
• 「函数组合 Function Composition」 将多个小函数组合成一个新的函数，使得每个函数的输出作为下一个函数的输入
• 「函数柯里化 Function Currying」 将一个多参数函数转化为一系列单参数函数的技术。将一个接收多个参数的函数，转化为每次只接收一个参数的函数，并返回接收下一个参数的函数，直到所有参数都被提供完毕。
• 「惰性求值 Lazy Evaluation」 在需要结果时才计算，避免不必要的计算，提升效率。
• 「递归 Recursion」 函数直接或间接调用自身，常用于替代迭代过程。PS. 递归太多可能会发生 stack overflow 栈溢出，或“爆栈”，常见的解决方式是尾递归，即递归放在函数最后，编译器则会优化这一操作。
• 「声明式编程 Declarative Programming」 即描述“做什么”而不是“怎么做”，如 React 只需要描述组件的 UI 应该是什么样的，而不需要直接操作 DOM。

AOP 面向切片编程

AOP 最广泛的应用是 Java Spring 框架。在前端最常见的是 Nestjs 框架，因为它就是参考 Spring 设计的。

软件层级设计

• 「MVC」 它将应用程序分为三个主要部分：模型（Model）处理数据和逻辑，视图（View）显示用户界面，控制器（Controller）处理用户输入并更新模型和视图。
• 「MVP」 一种变种的设计模式，其中模型（Model）处理数据，视图（View）负责显示界面，演示者（Presenter）作为中介，接收用户输入并更新视图和模型。
• 「MVVM」 是一种设计模式，它将模型（Model）用于数据和业务逻辑，视图（View）用于显示用户界面，视图模型（ViewModel）通过数据绑定将模型数据转化为视图显示，通常在现代前端框架中使用。Vue 就是典型的 MVVM 设计方式。

前端基础

HTML

• 「Head 和 Meta」 title charset link script style keyword description author 等
• 「基础标签」 div h1 h2 h3 p img ul ol li table 等
• 「表单」 form input button select 等
• 「媒体」 video audio 等
• 「2D 3D」 SVG Canvas 等

CSS

• 「选择器」 标签 class id 属性等
• 「图文样式」 字号 行高 颜色等
• 「布局」
• inline block inline-block
• 盒子模型
• margin 相关：纵向合并，负 margin
• flex 布局
• grid 布局
• float 布局
• BFC
• 「定位」
• relative
• absolute
• fixed
• 定位上下文
• 「响应式」 viewport rem vw vh
• 「渐变和动画」 transition animation
• 「模块化」
• css module
• css-in-js
• BEM
• 「第三方库」
• NormalizeCSS ResetCSS
• PostCSS
• AnimateCSS HoverCSS
• TailwindCSS BootStrap
• Sass Less Stylus
• caniuse.com 检测浏览器兼容性

JS 和 ES

• 「变量和类型」
• let const
• undefined string number boolean object functioin symbol bigint
• 「字符串」
• 「数组」
• 「对象」
• 「函数」
• 「class」 原型，原型链，继承
• 「作用域」 作用链，自由变量，闭包
• 「异步」 Promise Async/await 微任务/宏任务 EventLoop
• 「Map 和 Set」
• 「Proxy 和 Reflect」
• 「Generator」* yield
• 「正则表达式」
• 「日期和时间」
• 「模块化」 AMD CMD UMD CommonJS ES-Module
• 「异常处理」
• 「第三方库」 lodash jQuery Axios day.js ECharts D3 Anime.js jsPDF UUID i18next ...

JSX

• 「语法糖」 本质是 JS 函数
• 「插值和表达式」 写法 {xxx}
• 「事件」 写法 onClick={fn}
• 「自定义组件」 首字母大写
• 「注视」{/* This is a comment */}

TS

• 「新增加的类型」 any void never
• 「类型定义和检查」 变量，函数参数，函数返回值，class 等
• 「数组和元祖」
• 「Enum 枚举」
• 「自定义类型 type」 交叉类型 联合类型
• 「接口 interface」 接口的扩展和继承
• 「抽象类 Abstract class」
• 「泛型 Generics」
• 「装饰器 Decorator」
• 「类型定义文件 .d.ts」 安装第三方的如 npm install @types/lodash
• tsconfig.json 配置

JS Web API

• 「DOM API」 查询 创建 修改 移动 DOM 节点，DOM 树，DocumentFragment
• 「DOM 事件」 事件绑定，事件冒泡，Event 参数，事件代理
• 「BOM API」 window navigator screen location history 等
• 「存储」 cookie localStorage sessionStorage indexedDB
• 「Ajax」 XMLHTTPRequest fetch
• 「通讯」 postMessage，BroadcastChannel
• 「WebWorker」 线程，sharedWorker，ServericeWorker，通讯
• 「jsbridge」 如微信 jssdk

网络 HTTP 协议

• 「URL」 组成
• 「Header」 Content-type, Accept, Authorization, User-Agent, Host, Referer, Cookie, Cache-control, Content-length, Connection ...
• 「Method」 GET, POST, PUT, DELETE, PATCH, RestfulAPI
• 「Request」 url params body
• 「Response」 status body set-cookie ...
• 「Status code」 10x 20x 30x 40x 50x
• 「cookie」 服务端 set-cookie，浏览器禁用第三方 cookie
• 「Session」 服务端存储数据
• 「JWT」 客户端存储数据，替换 token，OAuth 第三方登录，SSO 单点登录 ...
• 「跨域」 浏览器同源策略，JSONP，CORS，跨域传递 cookie
• 「浏览器缓存策略」
• 强制缓存 Cache-Control
• 协商缓存 Etag，If-None-Match，Last-Modified， If-Modified-Since
• 缓存位置 Memory Cache, Dist Cache, Service worker Cache
• 「HTTPS」 SSL 协议，SSL 证书，加密过程（非对称和对称加密），通讯过程，options 请求
• 「WebSocket」
• 「GraphQL」
• 「大文件上传」 切片上传，断点续传，秒传

最后

下半部分 2025 前端+大前端+全栈 知识体系（下），包括 vue react node 工程化等等。这部分如有遗漏的请大家留言评论补充。

（创作者训练营强势上线，速戳上图了解）