最近在研究WASM，做了一次技术预研。
一开始以为WASM会在性能上碾压JS。但实际测下来发现，V8引擎的JIT编译器对简单循环的优化已经非常强了。我的测试场景没触碰到WASM的真正优势区。
一、WebAssembly是什么
用一句话说：WASM是浏览器里的二进制加速器。
它把C、C++、Rust写的代码编译成WASM，让这些代码能在浏览器上运行。但它不能操作DOM，也不能发网络请求。另外WASM调用本身有开销。从JS调用WASM函数，需要经过参数传递、类型转换这些步骤。当计算量不够大时，这个过路费可能比省下的时间还多。
二、Vue中使用WASM：素数计算
测试任务：计算2到N之间有多少个素数，用最简单的试除法。同一个任务，分别用C和JS写，对比执行性能。
C语言源码
不想在本地装环境编译，就让AI把C代码转成了WAT源码，然后通过网站下载WASM文件。
// C源码
__attribute__((visibility("default")))
int count_primes(int limit) {
int count = 0;
for (int i = 2; i <= limit; i++) {
int is_prime = 1;
for (int j = 2; j * j <= i; j++) {
if (i % j == 0) {
is_prime = 0;
break;
}
}
if (is_prime) count++;
}
return count;
}JS源码
const countPrimesJS = (max) => {
let count = 0;
for (let i = 2; i <= max; i++) {
let isPrime = true;
for (let j = 2; j * j <= i; j++) {
if (i % j === 0) {
isPrime = false;
break;
}
}
if (isPrime) count++;
}
return count;
};Vue中使用WASM
把WASM文件放在public目录下。
// 访问 public/wasm/math.wasm
const response = await fetch(`/wasm/math.wasm`);
const buffer = await response.arrayBuffer();
const module = await WebAssembly.instantiate(buffer);
wasmExports = module.instance.exports;
// 查看导出的内容
console.log("WASM导出对象：", wasmExports);
console.log("所有导出的键：", Object.keys(wasmExports));如果要用CDN加载：
import init, { add } from 'https://cdn.jsdelivr.net/npm/@example/wasm-package@1.0.0/+esm';也可以直接用npm安装WASM依赖，比如markdown-wasm这种包。
测试结果
数据量500万时，WASM反而更慢。到5000万数据时，WASM才开始有优势。原因大概有三个：
V8的JIT优化太强了
WASM调用本身有开销
朴素算法不是WASM的主场
三、WASM的适用场景
先看看哪些网站在用WASM：
| 网站 | 用途 | WASM做了什么 | 效果 |
|---|---|---|---|
| Figma | 在线UI设计 | 核心矢量渲染引擎、布尔运算、图层合成 | 加载速度提升3倍，流畅处理数千图层 |
| Adobe Photoshop Web | 在线图片编辑 | 完整的Photoshop引擎移植 | 浏览器端实现99%桌面版功能 |
| Canva | 在线设计 | 图像处理、滤镜、文字渲染 | 实时预览，无需等待服务器 |
| 剪映网页版 | 在线视频剪辑 | 视频解码、滤镜、转场特效 | 本地处理4K视频，无需上传 |
| AutoCAD Web | 在线CAD绘图 | 3D建模引擎、几何计算 | 渲染速度比纯JS快5-8倍 |
从这些例子能看出来，WASM主要用在图像处理、视频处理这些场景。加密解密也会用到，因为更安全。计算量越大，WASM的优势越明显。
推荐使用WASM的场景
图像或视频处理（OCR、滤镜、编解码）
复杂数学计算（矩阵运算、加密算法）
物理引擎、3D渲染
实时数据分析、AI推理
四、WASM更大的意义
在研究WASM的过程中，差点就放弃了。
生成WASM文件时遇到各种问题，不想在本地装环境了。测试时发现性能没提升多少，因为计算量不够大。
说实话，一般前端开发可能永远用不到WASM。但它更大的意义在于：已有的成熟C、C++、Rust代码，可以编译成WASM二进制文件，直接在现代浏览器里高效运行。特别是在浏览器处理图像、视频这些方面，WASM能派上大用场。
另外在Agent AI领域，WASM和WebGPU可能会有更多应用场景。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！