大家好,我是双越,也是 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 工程化等等。这部分如有遗漏的请大家留言评论补充。
近期有计划面试的同学,可到 面试派 刷题,学习面试流程和技巧。