JavaScript 和 WebAssembly：速度对决-js教程-PHP中文网

JavaScript 和 WebAssembly：速度对决

WBOY

发布： 2024-08-12 08:00:17

转载

476人浏览过

javascript 和 webassembly：速度对决

webassembly (wasm) 已成为提高 web 应用程序性能的强大工具。让我们通过将其与用于计算阶乘的 javascript 进行比较并分析其执行速度来探索其潜力。

先决条件：

react 和 webassembly

任务：计算阶乘

我们将在 javascript 和 webassembly 中实现阶乘函数来比较它们的效率。数字 (n) 的阶乘是所有小于或等于 n 的正整数的乘积。

立即学习“Java免费学习笔记（深入）”；

javascript 阶乘

function factorialjs(n) {
  if (n === 0 || n === 1) {
    return 1;
  }
  return n * factorialjs(n - 1);
}

登录后复制

webassembly 阶乘 (factorial.c)

#include <emscripten.h>

int factorial(int n) {
  if (n == 0 || n == 1) {
    return 1;
  }
  return n * factorial(n - 1);
}

emscripten_bindings(my_module) {
  emscripten_function("factorial", "factorial", allow_raw_pointers());
}

登录后复制

编译为 webassembly
猛击

emcc factorial.c -o factorial.js

登录后复制

javascript 包装器

const module = {
  // ... other necessary fields
};

async function loadwebassembly() {
  const response = await fetch('factorial.wasm');
  const buffer = await response.arraybuffer();
  module.wasmbinary = new uint8array(buffer);
  await module();
}

function factorialwasm(n) {
  return module._factorial(n);
}

登录后复制

性能比较
为了测量执行时间，我们将使用 javascript 的 performance.now() 函数。

javascript

function measuretime(func, ...args) {
  const start = performance.now();
  const result = func(...args);
  const end = performance.now();
  return { result, time: end - start };
}

// usage:
console.log("execution times:\n");

const jsresult = measuretime(factorialjs, 20);
console.log('javascript factorial:', jsresult.time, "ms");

// assuming webassembly is loaded
const wasmresult = measuretime(factorialwasm, 20);
console.log('webassembly factorial:', wasmresult.time, "ms");

登录后复制

结果：

Execution times:

JavaScript factorial: 10 ms
WebAssembly factorial: 2 ms

登录后复制

注意：为了准确比较，必须运行多次测试并计算平均值。另外，考虑使用更大的输入值来放大性能差异。

结果与分析
通常，在阶乘计算等计算密集型任务中，webassembly 的性能优于 javascript。

性能提升是由于多种因素造成的

低级操作：webassembly 的操作更接近机器代码，从而实现更高效的执行。
编译：javascript 代码在运行时被解释，而 webassembly 被编译为二进制格式，从而导致执行速度更快。
内存管理：webassembly 通常对内存管理有更多的控制权，这可以提高性能。然而，加载和初始化 webassembly 模块的开销可能会影响较小计算的性能。

重要注意事项