Quartz 4

前端知识图谱

5 min read

以下是一份结构清晰、层次分明的前端知识图谱，涵盖从底层原理到上层应用的全方位技术体系，采用模块化分类呈现，帮助开发者系统化构建知识网络：

一、核心基础

1. 浏览器核心

  • 渲染引擎
    • 关键渲染路径（Critical Rendering Path）
    • 重排（Reflow）与重绘（Repaint）优化
  • JavaScript 引擎
    • V8 执行流程（解析、编译、执行）
    • 内存管理与垃圾回收机制
  • 网络层
    • HTTP/1.1、HTTP/2、HTTP/3 特性对比
    • 缓存策略（强缓存/协商缓存）
    • WebSocket 与 WebTransport

2. Web 标准三件套

  • HTML
    • 语义化标签（<article>、<section>）
    • Shadow DOM 与 Web Components
  • CSS
    • 层叠上下文与 BFC 原理
    • CSS 变量（CSS Custom Properties）
    • 现代布局方案（Subgrid、Container Queries）
  • JavaScript
    • 事件循环（Event Loop）与微任务/宏任务
    • ES6+ 核心语法（Proxy、Generator、Optional Chaining）
    • 设计模式（观察者、工厂、单例）

二、编程语言扩展

1. TypeScript

  • 类型系统（联合类型、类型守卫）
  • 装饰器与泛型编程
  • 工程化集成（声明文件、tsconfig.json）

2. WebAssembly

  • 编译原理（Emscripten 工具链）
  • 与 JavaScript 互操作（内存管理）

三、框架与库

1. 核心框架

  • React
    • Fiber 架构与并发模式
    • 服务端组件（RSC）与 React Server Actions
    • 状态管理（Zustand、Jotai）
  • Vue
    • 响应式原理（Proxy vs DefineProperty）
    • 组合式函数（Composables）与插件开发
  • Svelte
    • 编译时优化与无虚拟 DOM 设计

2. 跨端方案

  • 移动端：React Native、Flutter（Dart 语言）
  • 桌面端：Electron、Tauri（Rust 集成）
  • 小程序：Uni-App、Taro

3. 微前端架构

  • 方案对比（Module Federation、Single-SPA）
  • 沙箱隔离与样式冲突解决

四、工程化体系

1. 开发工具链

  • 构建工具：Webpack（Loader/Plugin）、Vite（ESBuild/Rollup）
  • 包管理：npm 依赖解析、pnpm 硬链接与符号链接
  • 代码质量：ESLint 规则定制、Prettier 格式化配置

2. 性能优化

  • 加载阶段：资源预加载（Preload/Prefetch）、代码分割（Dynamic Import）
  • 运行时：虚拟列表（Virtual List）、Web Worker 多线程
  • 分析工具：Chrome Performance 面板、WebPageTest

3. 部署与运维

  • CI/CD 流程（GitHub Actions、Jenkins）
  • 容器化部署（Docker + Nginx 配置）
  • 监控体系（Sentry、Performance API）

五、进阶领域

1. 可视化与图形

  • 2D 图表：D3.js 数据驱动、ECharts 配置化
  • 3D 引擎：Three.js 基础模型、WebGPU 新标准
  • 动画库：GSAP、Framer Motion

2. 全栈能力

  • BFF 层：Node.js（Express/Koa）、GraphQL（Apollo Server）
  • 数据库：SQL（PostgreSQL）、NoSQL（MongoDB）
  • 身份认证：JWT、OAuth 2.0 协议

3. 测试体系

  • 单元测试：Jest 快照测试、React Testing Library
  • 集成测试：Cypress 组件测试
  • 可视化测试：Storybook 交互用例

六、扩展生态

1. 新兴技术

  • 渐进式 Web 应用（PWA）：Service Worker 离线缓存
  • 低代码平台：组件拖拽与 DSL 设计
  • AI 工程化：TensorFlow.js 模型推理

2. 浏览器扩展

  • Chrome 插件开发（Manifest V3）
  • 浏览器 API（File System Access、WebUSB）

七、软技能

  • 协作开发：Git 分支策略（Git Flow）、Code Review 规范
  • 效率工具：VSCode 插件生态、Chrome 开发者工具高级用法
  • 技术影响力：开源项目贡献、技术文章写作

知识图谱可视化建议

  1. 中心节点：浏览器核心（作为所有技术的运行环境）
  2. 第一层分支：HTML/CSS/JavaScript → 框架/工程化 → 性能/安全 → 全栈/扩展
  3. 关联关系：
    • TypeScript → 框架开发
    • 网络协议 → 性能优化
    • 设计模式 → 状态管理

学习策略

  • 深度优先：从核心基础（浏览器原理）向外扩展
  • 横向对比：如对比 React/Vue 的响应式实现差异
  • 场景驱动：通过实际项目（如开发一个在线 IDE）串联多项技术

推荐资源

  • 官方文档：MDN Web Docs、React Beta 文档
  • 源码阅读：Vue 3 Reactivity 模块、Next.js 路由系统
  • 社区动态：GitHub Trending、Hacker News 前端板块

此图谱可作为技术查漏补缺的指南，建议结合实践项目逐步攻克每个模块。前端领域技术迭代迅速，需定期关注 Chrome 更新日志、TC39 提案阶段等动态，保持知识体系的持续更新。

Graph View

Backlinks