Appearance
WebGL / WebAssembly 详解 + 同类技术分类整理 & 对比区分
一、核心两大技术
1. WebGL
- 全称：Web Graphics Library
- 作用：浏览器端 2D/3D 高性能图形渲染，基于 GPU 硬件加速
- 底层：依托 OpenGL ES，使用 GLSL 着色器语言
- 核心特点：GPU 并行渲染，脱离 CPU 绘图，图形性能强
- 适用场景：3D 游戏、三维可视化、GIS 地图、模型预览、粒子特效、数据大屏
2. WebAssembly（Wasm）
- 作用：浏览器 / Node 环境运行高性能二进制代码
- 本质：编译目标文件，C/C++、Rust、Go 等语言可编译为 wasm
- 核心优势：近原生性能、内存可控、突破 JS 性能瓶颈、可与 JS 双向调用
- 适用场景：密集型运算、音视频编解码、CAD 建模、加密运算、大数据处理、前端 AI 推理
二、浏览器底层能力・分类汇总
（一）图形渲染类（对标 WebGL）
- WebGPU：WebGL 升级版，对标 Vulkan/DirectX12，低开销、支持多线程渲染、GPGPU 通用计算
- Canvas 2D：CPU 级 2D 画布，轻量绘图，适合图表、画板、2D 小游戏
- SVG：矢量图形，无损缩放，用于图标、简单图形、轻量化可视化
（二）高性能计算类（对标 WebAssembly）
- Web Workers：JS 子线程，解决主线程阻塞，纯计算任务，不可操作 DOM
- Service Worker：离线后台线程，负责缓存、请求拦截、离线访问、消息推送
- GPGPU：利用 WebGL/WebGPU 做 GPU 并行计算，矩阵运算、图像处理、AI 运算
（三）媒体处理 & 文件能力
- WebRTC：浏览器 P2P 音视频通话、屏幕共享、实时流媒体
- Web Audio API：专业音频解析、混音、音效处理、音频合成
- Web Codecs API：浏览器原生音视频编解码，轻量化、无需第三方解码库
- File System Access API：浏览器直接读写本地文件 / 文件夹
（四）硬件交互 & 多线程增强
- Web NFC / Web Bluetooth / Web USB：浏览器直连外部硬件外设
- SharedArrayBuffer：多线程共享内存，搭配 WebWorker / Wasm 提升数据通信效率
三、核心技术区分对比
| 技术 | 核心定位 | 依赖环境 | 核心优势 | 短板 |
|---|---|---|---|---|
| WebGL | 图形渲染 | GPU | 3D / 高性能绘图、并行渲染 | 只适合图形场景，不擅长逻辑密集计算 |
| WebAssembly | 高性能计算 | 虚拟机解析 | 跨语言、近原生性能、复杂运算 | 开发成本高，不适合简单页面、DOM 操作弱 |
| WebGPU | 新一代图形 + 通用计算 | 现代 GPU | 性能更强、开销更低、兼顾渲染 + 算力 | 兼容性弱于 WebGL |
| Web Workers | JS 多线程 | 浏览器 | 简单易用、解决 JS 单线程卡顿 | 无法操作 DOM、纯 JS 计算、性能上限有限 |