最近在研究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主要用在图像处理、视频处理这些场景。加密解密也会用到，因为更安全。计算量越大，WASM的优势越明显。

推荐使用WASM的场景

• 图像或视频处理（OCR、滤镜、编解码）

• 复杂数学计算（矩阵运算、加密算法）

• 物理引擎、3D渲染

• 实时数据分析、AI推理

四、WASM更大的意义

在研究WASM的过程中，差点就放弃了。

生成WASM文件时遇到各种问题，不想在本地装环境了。测试时发现性能没提升多少，因为计算量不够大。

说实话，一般前端开发可能永远用不到WASM。但它更大的意义在于：已有的成熟C、C++、Rust代码，可以编译成WASM二进制文件，直接在现代浏览器里高效运行。特别是在浏览器处理图像、视频这些方面，WASM能派上大用场。

另外在Agent AI领域，WASM和WebGPU可能会有更多应用场景。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/13678