前端全栈技术栈全景图

一、语言与基础设施

  • 语言：JavaScript (ESNext)、TypeScript、WebAssembly（Rust/C/C++→WASM）、DSL（GraphQL SDL、JSON Schema）
  • 运行时：Browser、Node.js、Deno、Bun、Edge Runtime（V8 Isolates）
  • 包管理：npm、pnpm、Yarn；语义化版本与发布（changesets、semantic-release）
  • 代码质量：ESLint、Prettier、TypeScript Strict、Commitlint、Husky

二、浏览器平台能力（Web Capabilities）

  • 渲染与线程：主线程、Web Workers、Service Worker、Worklets（Paint/Audio/Layout）
  • 存储与离线：Local/SessionStorage、IndexedDB、Cache API、Background Sync、File System Access、Storage Foundation
  • 网络：Fetch/XHR、HTTP/2/3、SSE、WebSocket、WebTransport、WebRTC DataChannel、gRPC-web
  • 设备与系统 API：Web Share、Clipboard、Notifications、Badging、Device/Orientation、Battery、USB/HID/MIDI、Serial、Bluetooth、NFC
  • 安全与隐私：CSP、SRI、Trusted Types、COOP/COEP、CORP、SameSite/HttpOnly、Permissions Policy、沙箱 iframe、Origin Trial
  • PWA：Web App Manifest、Service Worker、离线缓存、安装与更新策略

三、UI 视图层与交互

  • 框架：React（含 RSC/Server Actions）、Vue、Angular、Svelte、Solid
  • 路由/数据获取：Next.js / Nuxt / SvelteKit / Remix / Angular Router；React Query/SWR、Loader/Action 模型
  • 状态管理：Redux Toolkit、Zustand、MobX、RxJS、XState、Vuex/Pinia；跨页缓存（Query Cache、RTK Query）
  • 样式体系：CSS Modules、Tailwind、Sass、CSS-in-JS（Emotion/Styled-Components）、Design Tokens（Style Dictionary）、CSS 变量/主题化
  • 表单与校验：React Hook Form/Formik、Zod/Yup、AJV(JSON Schema)
  • 组件与设计系统：Headless UI、Radix、shadcn/ui、MUI/AntD；Storybook（组件可视化与文档）

四、图形 / 可视化 / 多媒体

  • 2D/矢量：Canvas 2D、SVG、OffscreenCanvas
  • 3D/渲染：WebGL 1/2、WebGPU；Three.js、Babylon.js、PlayCanvas、Cesium（GIS）
  • 可视化库：D3、ECharts、Recharts、Chart.js、Vega/Vega-Lite、visx、deck.gl（地图/大数据）
  • 图形管线优化：实例化渲染、顶点/索引缓冲、纹理压缩（ASTC/BC/ETC）、帧内/帧间预算、LOD、GPU Profiler
  • 音视频：WebRTC（getUserMedia/MediaStream/Track）、MSE/EME（点播/DRM）、WebCodecs、WebAudio、CanvasCapture
  • 实时协作：CRDT/OT、DataChannel、时钟同步、回放/录制

五、性能与体验治理

  • 指标：LCP、CLS、INP、TTFB、FID、TTI、TBT；Long Task、内存/GC、FPS/丢帧
  • 优化策略：关键渲染路径、代码分割、优先级（preload/prefetch/preconnect/priority hints）、并行化（Workers）、Streaming/Partial Hydration、图片/字体优化（AVIF/WebP/WOFF2）
  • 工具：Lighthouse、Web Vitals、Performance Panel、WebPageTest、Bundle Analyzer、React/Vue Profiler

六、工程化与交付

  • 构建工具：Vite、Webpack、Rollup、esbuild、SWC、tsup
  • Monorepo：pnpm workspaces、Turborepo、Nx、Bazel；版本管理（changesets）
  • CI/CD：GitHub Actions、GitLab CI、Jenkins、CircleCI；缓存/并行、预检、制品仓库
  • 发布策略：灰度/金丝雀、特性开关（Unleash/LaunchDarkly）、Source Map 上传、回滚策略
  • 微前端：Module Federation、single-spa、import maps、自研容器；依赖隔离、公共基座

七、安全、隐私与可访问性

  • 安全防护：XSS、CSRF、Clickjacking、OAuth2/OIDC/PKCE、JWT/JWE、WebAuthn/Passkeys、沙箱、Trusted Types
  • 隐私与合规：GDPR/CCPA、CMP 同意管理、数据最小化/脱敏
  • 可访问性（a11y）：语义 HTML、焦点管理、键盘可达、ARIA、对比度、阅读器；工具：axe、Pa11y
  • 国际化（i18n）：i18next、FormatJS、Intl API、RTL、数字/时区/本地化打包

八、测试与质量

  • 单元/组件测试：Vitest、Jest、Testing Library
  • 契约测试：Pact、GraphQL 契约（SDL/Codegen）
  • 端到端测试：Playwright、Cypress；可视化回归：Chromatic、Applitools
  • Mock / Fixture：MSW、json-server
  • 质量门禁：覆盖率、变更影响分析、性能基线对比

九、可观测性与运维侧前端

  • 监控与日志：RUM（Web Vitals、错误/资源失败）、Sentry、Datadog、New Relic、OpenTelemetry
  • 追踪与回放：分布式 Trace、rrweb
  • 容量与稳定性：A/B 实验平台、错误预算/SLO、压测（k6、locust）

十、跨端与容器化

  • 桌面端：Electron、Tauri；主/渲染进程、IPC、安全沙箱、自动更新
  • 移动端：React Native、Flutter Web、Capacitor/Cordova
  • 小程序生态：微信/支付宝/字节/快应用；跨端框架（Taro/uni-app）
  • 混合形态：WebView 容器、Native Bridge、离线包与热更新

十一、Node.js 服务端能力（BFF / SSR / 微服务）

1. 运行时与部署

  • Node.js、Deno、Bun、Edge Runtime
  • Serverless（Lambda/Cloud Functions）、Docker/K8s、PM2

2. Web 框架与 API

  • Express、Koa、Fastify、Hono
  • NestJS、AdonisJS
  • REST、GraphQL（Apollo/Yoga）、tRPC、gRPC、WebSocket、SSE
  • SSR/同构：Next.js、Nuxt、Remix、SvelteKit

3. 认证与鉴权

  • OAuth2/OIDC、SAML、JWT/Session、RBAC/ABAC、WebAuthn

4. 数据与缓存

  • PostgreSQL、MySQL、MariaDB、SQLite、MongoDB、DynamoDB
  • ORM：Prisma、TypeORM、Drizzle、Knex
  • 缓存：Redis、Memcached；CDN KV：Cloudflare KV/D1/R2
  • 搜索：Elasticsearch、OpenSearch、Meilisearch

5. 消息与异步

  • RabbitMQ、Kafka、NATS、SQS/SNS
  • 任务调度：BullMQ、Agenda、Bree、node-cron
  • 事件驱动：EventBridge、Temporal

6. 实时与协作

  • WebSocket（ws/Socket.IO）、SSE、WebRTC 信令服务
  • CRDT/OT 后端（yjs server、Automerge）

7. 媒体 / RTC 服务

  • STUN/TURN：coturn
  • SFU/MCU：mediasoup、Janus、Jitsi、livekit、ion-sfu
  • 转码：FFmpeg、GStreamer；录制、混流
  • 信令：WebSocket/gRPC、自研协议

8. 安全与运维

  • Helmet、rate-limit、CORS、CSRF、防重放
  • Secrets 管理：Vault、Parameter Store、dotenv
  • 日志与追踪：Pino、Winston、OpenTelemetry、Jaeger
  • 健康检查：liveness/readiness、熔断（opossum）、重试与退避

9. 构建与交付

  • tsup、esbuild、SWC、Prisma generate
  • CI/CD：测试矩阵、数据库迁移、蓝绿/金丝雀、回滚
  • 基础设施：Terraform、Pulumi、CDK；监控/告警：Prometheus、Grafana、Datadog

十二、架构与模式

  • 渲染策略：CSR / SSR / SSG / ISR / Streaming / Edge SSR / Partial Hydration
  • BFF：聚合、缓存、鉴权、数据整形
  • 微前端 / 微服务：契约治理、版本管理、灰度/可观测性
  • 领域建模：DDD、事件风暴、异步边界
  • 数据一致性：幂等、去重、补偿、SAGA/Outbox

十三、专项能力

  • 数据可视化：时序/地理/网络图、增量渲染、联动分析
  • 富文本/协同：ProseMirror、TipTap、Slate、Quill
  • AI 推理：TensorFlow.js、ONNX Runtime Web、WebGPU/WebNN
  • 电商/支付：Stripe、Payment Request API、PCI 合规
  • 地图/GIS：Mapbox GL、Leaflet、OpenLayers、Cesium Ion
  • 表格/大数据：AG Grid、Handsontable、TanStack Table