2025 前端+大前端+全栈知识体系，（非常详细）从零基础到精通，收藏这篇就够了！-优快云博客

本文链接：https://blog.youkuaiyun.com/Libra1313/article/details/148455791

.markdown-body pre,.markdown-body pre>code.hljs{color:#333;background:#f8f8f8}.hljs-comment,.hljs-quote{color:#998;font-style:italic}.hljs-keyword,.hljs-selector-tag,.hljs-subst{color:#333;font-weight:700}.hljs-literal,.hljs-number,.hljs-tag .hljs-attr,.hljs-template-variable,.hljs-variable{color:teal}.hljs-doctag,.hljs-string{color:#d14}.hljs-section,.hljs-selector-id,.hljs-title{color:#900;font-weight:700}.hljs-subst{font-weight:400}.hljs-class .hljs-title,.hljs-type{color:#458;font-weight:700}.hljs-attribute,.hljs-name,.hljs-tag{color:navy;font-weight:400}.hljs-link,.hljs-regexp{color:#009926}.hljs-bullet,.hljs-symbol{color:#990073}.hljs-built_in,.hljs-builtin-name{color:#0086b3}.hljs-meta{color:#999;font-weight:700}.hljs-deletion{background:#fdd}.hljs-addition{background:#dfd}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}

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

我联合几位博主搞了一个前端面试网站面试派 —— 常见面试题 + 大厂面试流程 + 面试技巧。做一个真正专业的前端面试网站，旨在解决前端面试资料碎片化、老旧化、非专业化等一系列问题。网站开源免费！！！

书接上回 2025 前端+大前端+全栈知识体系（上），本文继续写完这个知识体系。

服务端基础

服务端是一个很宽泛的概念，本文只讨论 JS 开发的服务端。

JS 运行时

Nodejs 生态成熟，应用广泛
Deno 支持 TS，默认安全性，兼容 WebAPI
Bun 极致性能，All-in-one

Nodejs API

模块 CommonJS, ES-Module
命令行
网络 HTTP HTTPS 服务
文件 fs 读取写入创建删除文件…
流 stream readline
进程 process
集群 cluster PM2
调试 debugger
测试

数据库

MySQL 关系型数据库
PostgreSQL 关系型数据库
MongoDB No-SQL 数据库
Redis 内存数据库，速度快
云数据库 Suspabase Cloudflare 等

存储

阿里云 OSS
腾讯云 COS
亚马逊 S3

云服务器

各个云平台都有免费试用，或低价活动，如果是学习用，可以轮流“薅羊毛”。

Linux 登录 创建账户
Linux 基础命令
Vim 命令
Nginx 配置
安全组和防火墙

Docker

镜像 Image
容器 Container
DockerFile
Docker Compose
DockerHub

Serverless

阿里云 FC 函数计算
亚马逊 Lambda
其他中小型服务商 Vercel Netlify Railway Fly.io 等

微服务

框架/库

React 使用

JSX 语法 上文有介绍
函数组件 Functional Component，纯函数，副作用，生命周期，组件通讯
属性 Props
状态 State 不可变数据，immer.js，“合并”更新，异步更新，表单受控组件
Hooks useState, useEffect, useRef, useContext … 自定义 Hook, react-use
Context Provider, Consumer
性能优化 useMemo, useCallback, React.memo, React compiler …
Suspense 和异步组件
报错 ErrorBoundary
服务端组件 RSC 服务端渲染 SSR

React 原理

Virtual DOM React 使用的虚拟文档对象模型，通过对比更新来优化性能
Diff 算法 对比新旧 vdom 并更新真实 DOM
Reconciliation React 的更新算法，用于高效地比较虚拟 DOM 与旧虚拟 DOM 之间的差异，并决定最小化的更新操作
React Fiber React 16 引入的重写的渲染引擎，提供更高效的渲染机制
React 合成事件 React 使用事件代理机制，将事件监听器挂载到根 DOM 节点上，而不是每个组件的 DOM 节点，减少了事件监听器的数量，提高了性能
React Concurrency 是 React 18 引入的一项重要特性，使用时间分片和任务调度，用于提升应用的响应性和性能
React Batching Update React 会对多次 state 更新进行批量处理，合并成一次更新，以减少不必要的重渲染和性能开销

React 生态

框架 umijs, Next.js, Remix(react-router), Gatsby, React-Native
UI 组件库 AntD, MUI, ShadcnUI
状态管理 Redux, Zustand, MobX, Recoil
CSS 样式解决方案 TailwindCSS, Styled-components
表单和校验 Formik, React hook form
数据获取 React Query, SWR, Apollo Client
i18n react-i18next
测试 Jest, Reat testing library, Storybook

Vue 使用

脚手架
模板语法 类和样式，条件渲染，列表渲染，事件绑定，指令
响应式 ref，reactive，reactive 局限性
Computed
watch watchEffect
表单和 v-model
组件生命周期，组件通讯，属性 props
插槽 slot
异步组件
动态组件
KeepAlive
组合式函数 Composable 自定义 Composable，vue-use
Setup Script

Vue 原理

Virtual DOM Vue 使用虚拟 DOM 来优化 DOM 操作，避免直接操作真实 DOM，从而提高性能
Diff 算法 对比新旧 vdom 并更新真实 DOM
响应式原理 Vue 的核心特性之一，通过数据劫持（Object.defineProperty 或 Proxy）实现视图与数据的双向绑定
模板编译 Vue 将模板（HTML）编译成渲染函数，并通过虚拟 DOM 渲染 UI。编译过程将模板转换为可执行的 JavaScript 代码
异步渲染 NextTick

Vue 生态

框架 Nuxt.js, VuePress
路由 Vue-router
UI 组件库 ElementPlus, AntDesignVue, VantUI, Vuetify …
状态管理 Vuex, Pina
i18n vue-i18n
测试 Vitest, Vue-test-utils, StoryBook

其他前端框架/库

Angular 老牌全能框架
Selvte 无 vdom，编译时框架，轻量高效
Solid 无 vdom，响应式编程，高效渲染

Node 服务端

Express 老牌 Nodejs 服务端框架，简洁易用
Koa 由 Express 的原班人马开发，Koa 提供了更精简和灵活的 API，利用现代 JavaScript 特性如 async/await，目标是创建更小、更优雅的框架
Egg 由阿里巴巴开发，基于 Koa 构建的企业级框架，提供了完善的插件机制和企业级功能，适用于构建复杂和大规模的应用
Nest.js Nodejs 开发的 Spring 框架

Node 服务端生态

数据库 ORM Prisma Drizzle
Auth 校验 NextAuth
tRPC 通讯
i18n 多语言
队列服务 RabbitMQ, Kafka
缓存
日志
AI 服务 ChatGPT （对中国地区停止 API 服务），DeepSeek 等
邮件服务 各大邮箱网站都提供免费 SMTP 服务（会有限制）， resend 等付费服务商
短信服务 腾讯云，阿里云
支付微信支付，支付宝，Stripe

想学习 Node 全栈生态，推荐我带队开发的 Node 全栈 AIGC 知识库项目划水AI www.huashuiAI.com 包括文档管理、富文本编辑、AI 智能写作、多人协同编辑等功能。复杂业务，真实上线，持续运维。可免费加群围观，也可加入学习和参与开发。

小程序

框架如 uni-app、Taro、WePY，提供跨平台开发的工具和规范。
组件化 小程序开发采用组件化方式，开发者可以创建自定义组件，提高代码的重用性和可维护性。
WXML 小程序的标记语言，类似 HTML，用于定义页面的结构。
WXCC 小程序的样式表语言，类似于 CSS，用于为 WXML 页面设置样式。
API 小程序提供了大量的官方 API，如 微信支付、位置服务、分享功能等，供开发者在小程序中调用。
小程序路由 使用 wx.navigateTo、wx.redirectTo、wx.switchTab 等 API 进行页面导航，支持页面栈管理。
小程序生命周期 小程序的生命周期包括 onLaunch、onShow、onHide 等，开发者可以在不同的生命周期阶段执行相关操作。
小程序云开发 提供云函数、云数据库、云存储等后端服务，简化开发者后端处理，提升开发效率。
发布和调试 使用 微信开发者工具 进行本地调试和真机调试，确保小程序在各平台上正常运行，最终通过开发者工具上传并发布到微信平台。

移动端

React Native 基于 React 的移动端框架。
Weex 阿里巴巴开发，基于 Vue 的移动端框架。不维护了。
Flutter Google 开发，使用 Dart 语言

PC 客户端

Electron 使用 HTML、CSS、JavaScript 开发跨平台桌面应用（支持 Windows、macOS 和 Linux）

微前端

Single-SPA 是一个非常流行的微前端框架，允许多个前端框架（如 React、Vue、Angular 等）在同一个页面中并行运行。
Qiankun 是阿里巴巴开源的微前端框架，基于 Single-SPA 开发，提供了更多的功能封装和优化。
Module Federation (webpack5) 允许在运行时动态加载和共享模块。它可以帮助解决微前端中的共享库和组件的问题。

PWA

工程化

代码库管理

Git Github，Gitlab，git 命令，commits，pre-commit hook， Pull request
Monorepo 单个仓库中管理多个项目

脚手架

react vue 等各个框架的 cli 工具
AI 生成代码工具 v0, bolt.new

打包工具

Webpack 老牌打包工具，使用广泛
Vite 使用 ES Module 开发环境启动快
Parcel 无需配置，开箱即用
esbuild 使用 Go 语言开发，速度快，综合性编译和打包工具
Rspack 同样使用 Go 语言开发，速度快，综合性编译和打包工具
Turbopack Vercel 公司使用 Rust 开发 JS 打包工具，用于 Next.js 项目，也可以独立使用
Rollup 老牌打包工具，使用 Tree-shaking 优化代码，Vite 内部使用
Rolldown 新工具，Rust 开发，Vite 内部使用

JS 编译器

babel SWC 等

Babel 老牌 JS 编译工具，使用广泛
SWC 使用 Rust 语言开发的 JS 编译器，速度是 Babel 的 20-70 倍（不同 CPU），而且原生支持 TS 和 JSX 语法，旨在替代 Babel 。Vite 内部使用的就是 SWC 。
Respack 使用 Go 语言开发，速度快，综合性编译和打包工具
esbuild 同样使用 Go 语言开发，速度快，综合性编译和打包工具

代码压缩

UglifyJS 老牌 JS 压缩工具
Terser 基于 UglifyJS 源码开发的，支持 ES6 新语法，对 tree-shaking 也做了优化。
很多 JS 编译和打包工具都集成了代码压缩功能，如 SWC esbuild

CSS 处理

Sass/SCSS 是 CSS 的一种扩展，提供了变量、嵌套规则、混合宏（mixins）、继承等功能。SCSS 是 Sass 的语法扩展，兼容普通的 CSS 语法。
Less 是一个 CSS 预处理器，与 Sass 类似，提供了变量、函数、嵌套等功能，用来增强 CSS 的功能性。
PostCSS 是一个 JavaScript 工具，允许开发者使用插件对 CSS 进行处理和转换。PostCSS 本身是一个工具平台，通过插件实现不同的功能。
Autoprefixer 是 PostCSS 的一个插件，自动为 CSS 属性添加浏览器前缀。它基于 can-i-use 数据库，自动判断哪些属性需要添加前缀，并且在构建时进行处理。

编码规范和格式

eslint 规范 Recommended Airbnb Google StandardJS
prettier

CD/CD

Github Action 是 GitHub 提供的持续集成和持续交付（CI/CD）平台，允许用户在代码仓库中定义自动化工作流，自动化构建、测试和部署过程
Gitlab CI 是 GitLab 提供的集成式 CI/CD 系统，允许开发者通过 .gitlab-ci.yml 配置文件自动化构建、测试和部署，并与 GitLab 仓库紧密集成。
Jenkins 持续集成/持续交付工具，用于自动化构建和测试。

开发环境

IED 编辑器

vscode 可集成 github copilot 智能编码
webstorm
Cursor 集成 AI 智能编码，付费
codepen 在线 IDE
stackblitz 在线 IDE

调试

debugger 和断点
chrome 控制台 Element, Console, Network, Performance, Memory …

抓包

chrome 控制台 Network
charles
fiddler

mock

Mock.js
Mock 在线服务

测试

结合 CI/CD 自动化测试

单元测试

Jest 是一个广泛使用的 JavaScript 测试框架，提供了丰富的功能，如断言、模拟、快照测试和覆盖率报告，广泛应用于 React 项目的单元测试。
Vitest 是一个快速、轻量级的测试框架，兼容 Jest API，利用 Vite 构建工具进行高效的测试运行，适合现代前端开发和快速反馈的需求。
React Testing Library 与 Jest 配合使用，专注于通过用户交互测试组件行为，而不是内部实现，鼓励测试组件的可访问性和用户体验。
Vue Test Utils Vue 官方提供的测试工具，专门用于编写和运行 Vue 组件的单元测试，提供了诸如挂载组件、触发事件、访问组件实例等功能。

E2E 测试

Cypress 是一个端到端测试框架，专注于前端应用的自动化测试，提供快速、可靠的测试执行和调试功能。
Playwright 是一个跨浏览器自动化工具，支持 Chromium、WebKit 和 Firefox，适用于多浏览器端到端测试。
Puppeteer 是一个基于 Node.js 的库，用于控制 Chromium 浏览器进行自动化测试和网页抓取，适合进行浏览器操作和内容提取。

统计、监控、安全和优化

统计和监控

百度统计 PV UV 等
Sentry 综合性的 APM 监控平台
- 报错监控
- 性能统计和监控

安全

跨站脚本攻击 XSS 攻击者通过注入恶意脚本代码到网页中，从而窃取用户信息或执行未授权操作
跨站请求伪造 CSRF 攻击者诱使用户在已经认证的站点上执行恶意操作，利用用户的认证信息发送不必要的请求
SQL 注入 通过将恶意的 SQL 查询代码注入到应用程序的数据库查询中，攻击者能够篡改数据库。

性能优化

性能指标 Web vitals TTFB, FCP, LCP, FID, CLS, INP
代码分割 常用模块可以缓存
懒加载 JS 懒加载，图片懒加载
资源压缩 代码，图片
渲染优化 减少页面渲染次数，避免不必要的 reflow 和 repaint
CDN
Edge 边缘计算

项目管理

项目角色

Product Owner 产品负责人
Product Manager 项目经理 负责整体项目的规划、进度管理、资源协调和风险控制
FrontEnd Developer 前端开发
BackEnd Developer 后端开发
FullStack Developer 全栈开发
UI/UX Designer UI/UX 设计师
QA 测试工程师

Scrum 敏捷开发

Sprint Scrum 中的迭代周期，通常持续 1 到 4 周。在每个 Sprint 中，团队会完成一定数量的任务，并交付一个可用的产品增量。
Backlog 产品待办事项列表，包含所有待开发的功能、修复、改进等项，由产品负责人（Product Owner）管理和优先级排序。
Daily Standup 团队每天举行的短会议，通常 15 分钟，成员讨论各自的工作进展、遇到的障碍和接下来的工作计划。
Sprint Review Sprint 结束时，团队展示已完成的工作成果，和产品负责人、相关利益相关者一起评审进展并进行反馈。
Sprint Retrospective Sprint 结束后，团队反思整个过程，讨论哪些方面做得好、哪些需要改进，以便在下一个 Sprint 中提升团队效率和协作。