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

大家好，我是双越老师，也是 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 中提升团队效率和协作。

kanban 敏捷开发

类似于 Scrum 但更加灵活，没有固定的周期和角色，适合持续快速的交付。

软件研发过程

• 需求评审和 UI 设计
• 技术方案设计
• 开发过程：编码、调试、单元测试、自测、写注释和文档、代码走查等
• 联调
• 提测
• 上线
  • 全量
  • 小流量（灰度）
  • ABTest

非技术事项

• 持续学习，及时关注新技术
• 独立思考，凡事考虑本质和价值，多问为什么
• 低头做事，抬头看路，定期放空自己，闲下来
• 时间管理，有目标性和计划性，写出 todos 不要忘了
• 保持形象，可以个性但不能油腻，追求合适的衣服、鞋子和发型
• 定期体检，爱护头发、颈椎、腰椎，健康饮食和作息

最后

爆肝一周，每天搜索和整理 2h，终于写完了。希望给所有前端开发员的同学一份专业详细的参考目录。

近期有计划面试的同学，可到 面试派 刷题，学习面试流程和技巧。

如哪里有疏漏，请在评论区告诉我。