大前端知识图谱

用户5048751361383
8 阅读9分钟

大前端知识图谱

一、基础层

1. Web 三件套

HTML
  • 语义化标签（header、main、article、section、nav、aside 等）
  • 表单与表单验证
  • 无障碍（a11y）：ARIA 属性、键盘导航、屏幕阅读器
  • SEO 基础：meta 标签、结构化数据、Open Graph
CSS
  • 盒模型（标准盒模型 vs IE 盒模型、box-sizing）
  • 布局方案：Flex、Grid、定位（position）、浮动（float）
  • 选择器优先级与权重计算
  • BFC（块级格式化上下文）
  • 层叠上下文（Stacking Context）与 z-index
  • 动画：transition、animation、@keyframes
  • 响应式设计：媒体查询、rem/vw/vh、移动端优先
  • 预处理器：SCSS/Less、CSS Modules、CSS 变量
JavaScript
  • 核心概念
    • 作用域与作用域链
    • 闭包
    • 原型与原型链
    • this 指向与绑定规则
    • 事件循环（Event Loop）：宏任务与微任务
  • ES6+ 特性
    • let/const、解构赋值、模板字符串
    • 箭头函数
    • Promise、async/await
    • Proxy/Reflect
    • Symbol
    • Iterator/Generator
    • ES Module（import/export）
    • Map/Set/WeakMap/WeakSet
    • 可选链（?.）、空值合并（??）
  • DOM / BOM API
    • DOM 操作与事件委托
    • MutationObserver、IntersectionObserver、ResizeObserver
    • requestAnimationFrame / requestIdleCallback
    • History API、Location API

2. 网络与浏览器

网络协议
  • HTTP/1.1：Keep-Alive、管线化
  • HTTP/2：多路复用、头部压缩、Server Push
  • HTTP/3：QUIC 协议、0-RTT
  • HTTPS：TLS 握手、证书链
  • WebSocket：全双工通信
  • gRPC-Web
浏览器原理
  • 渲染流水线：Parse → Style → Layout → Paint → Composite
  • V8 引擎：解析 → AST → 字节码 → JIT 编译
  • 垃圾回收（GC）：标记清除、分代回收
  • 进程/线程模型：Browser Process、Renderer Process、GPU Process
浏览器存储
  • Cookie：属性（HttpOnly、Secure、SameSite）
  • LocalStorage / SessionStorage
  • IndexedDB
  • Cache API
  • Service Worker 缓存
安全
  • XSS（跨站脚本攻击）：反射型、存储型、DOM 型
  • CSRF（跨站请求伪造）
  • CSP（内容安全策略）
  • CORS（跨源资源共享）
  • 同源策略
  • 点击劫持与防护

3. 数据结构与算法

常用数据结构
  • 数组与链表
  • 栈与队列
  • 哈希表（HashMap）
  • 树：二叉树、二叉搜索树、AVL 树、红黑树、Trie 树
  • 图：邻接表、邻接矩阵
  • 堆（优先队列）
常用算法
  • 排序：快排、归并、堆排序、桶排序
  • 搜索：二分查找、DFS、BFS
  • 动态规划
  • 贪心算法
  • 回溯算法
  • 滑动窗口、双指针
复杂度分析
  • 时间复杂度：O(1)、O(log n)、O(n)、O(n log n)、O(n²)
  • 空间复杂度

二、框架与生态

4. 主流框架

React
  • JSX 原理
  • 组件模型：函数组件 vs 类组件
  • Hooks：useState、useEffect、useRef、useMemo、useCallback、useReducer、useContext
  • 自定义 Hooks
  • Fiber 架构与时间切片
  • Reconciliation（协调算法）/ Diff 算法
  • Concurrent Mode / Concurrent Features
  • Suspense / Error Boundary
  • Server Components（RSC）
  • React 19 新特性
Vue
  • 响应式原理
    • Vue 2：Object.defineProperty
    • Vue 3：Proxy
  • Composition API vs Options API
  • 虚拟 DOM 与 Diff
  • 编译优化：静态提升、Patch Flags
  • Teleport、Suspense
  • Vue 3.5+ 新特性
Angular
  • 依赖注入（DI）
  • RxJS 响应式编程
  • Zone.js 与变更检测
  • 模块化与 Standalone Components
  • Signal（新响应式原语）
新兴编译时框架
  • Svelte：编译时响应式、无虚拟 DOM
  • Solid.js：细粒度响应式、JSX 编译

5. 状态管理

React 生态
  • Redux / Redux Toolkit（RTK）
  • Zustand
  • Jotai（原子化）
  • Recoil
  • MobX（可观察状态）
Vue 生态
  • Vuex
  • Pinia
通用模式
  • Flux 架构
  • 发布订阅模式
  • 有限状态机（XState）
  • 信号（Signals）模式

6. 路由

  • 前端路由原理
    • Hash 模式（hashchange）
    • History 模式（pushState/popstate）
  • React Router（v6+）
  • Vue Router（v4+）
  • 嵌套路由与布局路由
  • 动态路由与路由参数
  • 路由守卫与权限控制
  • 基于路由的代码分割（lazy loading）
  • 路由过渡动画

7. UI 组件库与设计系统

组件库
  • TDesign（腾讯）
  • Ant Design（蚂蚁）
  • Material UI（Google）
  • Headless UI / Radix UI（无样式组件）
设计系统
  • Design Token
  • 主题系统与暗色模式
  • 原子设计（Atomic Design）
  • 组件文档与 Storybook

三、工程化

8. 构建工具

Webpack
  • 核心概念：Entry、Output、Loader、Plugin
  • Tree Shaking
  • Code Splitting（动态导入）
  • Module Federation（模块联邦）
  • 持久化缓存
Vite
  • 基于原生 ESM 的开发服务器
  • esbuild 预构建
  • Rollup 生产构建
  • HMR 原理
  • 插件系统
新一代工具
  • Turbopack（Vercel）
  • Rspack（字节）
  • esbuild
  • SWC（Rust 编译器）
构建优化
  • 缓存策略
  • 并行编译
  • 按需编译
  • 产物分析（Bundle Analyzer）

9. 包管理与 Monorepo

包管理器
  • npm：依赖解析、lock 文件
  • yarn：PnP（Plug'n'Play）
  • pnpm：硬链接、内容寻址存储、幽灵依赖解决
Monorepo 方案
  • Lerna
  • Nx
  • Turborepo
  • pnpm workspace
依赖管理
  • 语义化版本（SemVer）
  • peer dependencies
  • 幽灵依赖问题
  • 版本锁定与升级策略

10. 代码质量

规范工具
  • ESLint：规则配置、自定义插件
  • Prettier：代码格式化
  • Stylelint：样式规范
  • Commitlint + Conventional Commits
  • Husky + lint-staged
TypeScript
  • 基础类型与高级类型
  • 泛型
  • 类型体操（Utility Types）
  • 声明文件（.d.ts）
  • 类型推导与类型收窄
  • 协变与逆变
  • 项目配置（tsconfig.json）
测试
  • 单元测试：Jest、Vitest
  • 组件测试：React Testing Library、Vue Test Utils
  • E2E 测试：Playwright、Cypress
  • 可视化测试：Storybook + Chromatic
  • 测试策略：测试金字塔、测试覆盖率

11. CI/CD 与 DevOps

CI 流水线
  • GitHub Actions
  • GitLab CI
  • Jenkins
部署策略
  • 蓝绿部署
  • 灰度发布（金丝雀发布）
  • A/B Testing
  • Feature Flag
容器化
  • Docker 基础
  • Kubernetes（K8s）基础
  • 容器编排
监控告警
  • 错误监控：Sentry
  • 性能监控：Prometheus + Grafana
  • 日志系统：ELK Stack
  • 用户行为分析：埋点系统

四、跨端与多端

12. 移动端开发

H5 适配
  • rem / vw 适配方案
  • 1px 边框问题
  • 安全区域（Safe Area）适配
  • 软键盘适配
  • 移动端手势交互
原生跨端框架
  • React Native
  • Flutter（Dart）
小程序
  • 微信小程序原生开发
  • 跨端框架：Taro、uni-app
  • 小程序架构：双线程模型
Hybrid
  • JSBridge 原理与实现
  • WebView 通信机制
  • 离线包方案

13. 桌面端

Electron
  • 主进程 / 渲染进程
  • IPC 通信
  • 原生菜单与系统托盘
  • 自动更新
  • 安全最佳实践
Tauri
  • Rust 后端 + WebView 前端
  • 体积优势
  • 系统 API 调用

14. 跨端方案对比

方案技术栈平台覆盖性能生态
React NativeReactiOS/Android接近原生成熟
FlutterDartiOS/Android/Web/Desktop高快速发展
TaroReact/Vue小程序/H5/RN中等国内活跃
uni-appVue小程序/H5/App中等国内活跃
TauriRustWebView高发展中

五、性能优化

15. 指标与度量

Core Web Vitals
  • LCP（Largest Contentful Paint）：最大内容绘制 < 2.5s
  • FID / INP（首次输入延迟/交互延迟）：< 100ms
  • CLS（Cumulative Layout Shift）：累计布局偏移 < 0.1
其他指标
  • FCP（First Contentful Paint）
  • TTFB（Time To First Byte）
  • TTI（Time To Interactive）
监控工具
  • Lighthouse
  • WebPageTest
  • Performance API
  • Chrome DevTools

16. 加载优化

  • 资源压缩：Gzip、Brotli
  • CDN 加速
  • 代码分割：动态 import、路由懒加载
  • 预加载：preload、prefetch、preconnect
  • 图片优化：
    • 格式：WebP、AVIF
    • 响应式图片：srcset、picture 标签
    • 懒加载：loading="lazy"
    • 渐进式加载
  • Service Worker / PWA 缓存
  • HTTP 缓存：强缓存、协商缓存、Cache-Control

17. 运行时优化

  • 虚拟滚动：react-window、react-virtualized
  • 时间切片：requestIdleCallback、Scheduler
  • 防抖节流
  • Web Worker：JS 多线程、OffscreenCanvas
  • React 优化：
    • React.memo / useMemo / useCallback
    • Suspense 与流式渲染
    • 状态批量更新
    • 避免不必要的重渲染
  • 内存管理：避免内存泄漏、清理定时器和监听

18. 渲染优化

SSR / SSG / ISR
  • Next.js：App Router、Server Actions、RSC
  • Nuxt.js
  • Remix
  • Astro（岛屿架构）
渲染管线优化
  • 关键渲染路径优化
  • 减少重排（Reflow）和重绘（Repaint）
  • 使用 transform/opacity（仅触发合成）
  • will-change 合理使用
  • 合成层管理

六、服务端与全栈

19. Node.js

  • 事件驱动与非阻塞 I/O
  • Stream（流）
  • 常用框架：
    • Express
    • Koa
    • Nest.js
    • Fastify
  • ORM：
    • Prisma
    • TypeORM
    • Sequelize

20. 服务端渲染（SSR）与元框架

Next.js（React）
  • App Router vs Pages Router
  • Server Components（RSC）
  • Server Actions
  • Streaming SSR
  • ISR（增量静态再生成）
Nuxt.js（Vue）
  • Nuxt 3 与 Composition API
  • 服务端渲染与静态生成
  • auto-imports
其他框架
  • Remix：Web 标准、渐进增强
  • Astro：岛屿架构、零 JS 默认
  • SvelteKit

21. BFF 与 API 设计

API 设计
  • RESTful API 设计与最佳实践
  • GraphQL：查询语言、Schema、Resolver
  • tRPC：端到端类型安全
  • gRPC
BFF 模式
  • 聚合多个后端服务
  • 字段裁剪与格式化
  • 统一异常处理
API Gateway
  • 流量控制
  • 认证授权
  • 协议转换

22. 数据库基础

关系型数据库
  • MySQL：索引、事务、锁机制、MVCC
  • PostgreSQL：JSON 支持、GIS、全文搜索
非关系型数据库
  • MongoDB：文档存储、副本集、分片
  • Redis：内存数据库、缓存、Pub/Sub
前端相关
  • Supabase（PostgreSQL + 即时 API）
  • PlanetScale（Serverless MySQL）
  • Edge DB
  • Turso（Edge SQLite）

七、新兴领域

23. AI + 前端

LLM 集成
  • ChatGPT API / OpenAI API
  • Claude API
  • Streaming UI（流式响应）
  • 向量数据库与 RAG
AI 辅助开发
  • GitHub Copilot
  • Cursor
  • CodeBuddy
  • AI 代码审查
AIGC 在前端的应用
  • AI 生图（Stable Diffusion、Midjourney API）
  • 营销文案生成
  • 智能客服

24. WebAssembly (Wasm)

  • 核心概念与工作原理
  • 使用场景：
    • 图像处理（libvips、Sharp）
    • 音视频编解码
    • 游戏引擎（Unity WebGL、Unreal）
    • CAD 类应用
  • Rust / C++ → Wasm 编译
  • wasm-bindgen、wasm-pack
  • WASI（WebAssembly System Interface）

25. Web3 / 去中心化

  • 区块链基础原理
  • 智能合约
  • 以太坊生态：Ethers.js、Web3.js
  • DApp 前端开发
  • wagmi + viem
  • 钱包连接：MetaMask、WalletConnect

26. 低代码 / 无代码

  • 可视化搭建平台架构
  • Schema 驱动渲染
  • 物料体系设计
  • 插件机制
  • 表达式引擎
  • 产物输出：H5、小程序、React/Vue 组件

27. 微前端

主流方案
  • qiankun（蚂蚁）：沙箱隔离、样式隔离
  • Module Federation（Webpack 5）
  • single-spa
  • 无界（wujie）：Web Component 容器
  • Garfish（字节）
核心技术
  • 沙箱隔离：JS 沙箱、CSS 隔离
  • 应用间通信：Props 传递、CustomEvent、共享状态
  • 预加载与缓存
  • 统一依赖管理

八、软技能与方法论

28. 架构设计

前端架构模式
  • MVC / MVP / MVVM
  • Flux 架构
  • Clean Architecture（分层架构）
  • DDD（领域驱动设计）在前端的实践
设计模式
  • 创建型：单例、工厂、建造者
  • 结构型：装饰器、代理、适配器、门面
  • 行为型：观察者、策略、命令、迭代器
架构图绘制
  • C4 Model
  • UML 图
  • 时序图
  • 架构决策记录（ADR）

29. 团队协作

Git 工作流
  • Git Flow
  • Trunk-Based Development
  • GitHub Flow
Code Review
  • PR 规范与模板
  • 审查清单
  • 自动化检查
文档
  • README 编写规范
  • API 文档（Swagger/OpenAPI）
  • 技术方案文档（RFC、ADR）
  • 变更日志（CHANGELOG）

30. 职业发展

技术路线
  • 初级：夯实基础、熟练使用框架
  • 中级：深入原理、性能优化、工程化
  • 高级：架构设计、技术选型、团队引领
  • 专家：行业影响力、技术战略
核心能力
  • 技术深度 vs 广度
  • 技术方案设计与评审
  • 技术风险评估
  • 技术影响力建设：
    • 开源贡献
    • 技术分享
    • 博客输出
    • 社区建设

使用建议

  1. 按需深入：不必一次性掌握所有内容，选择当前需要的模块深入学习
  2. 关联学习：知识点之间是网状结构，注意关联和对比
  3. 实践巩固：理论结合实践，通过项目加深理解
  4. 定期回顾：技术更新快，保持学习的同时定期回顾基础

最后更新：2026年3月

avatar
文章
阅读
粉丝