如何在javascript中使用异步函数来衡量性能

Question

我创建了一个小型应用程序，比较WebAssembly和Javascript的速度。令我惊讶的是，JavaScript在计算大量阶乘方面要快得多。或者至少看起来是这样。我确信这是不对的，是由我使用的等待语法引起的。(功能是一样的。(此外，我可以用哪些真正耗时的任务来比较这两者？这看起来并没有那么耗时，因为它只需要不到0.1毫秒。

AssemblyScript(将其编译为wasm(

// The entry file of your WebAssembly module.
export function fib(num: i32): i32 {
var a: i32 = 1,
b: i32 = 0,
temp: i32;
while (num > 0) {
temp = a;
a = a + b;
b = temp;
num--;
}
return b;
}

App.js

import waApi from "./api";
...
<button
onClick={async () => {
const t0 = performance.now();
(await waApi).fib(200);
const t1 = performance.now();
this.updateGraph(t1 - t0, "wa");
const t2 = performance.now();
this.fib(200);
const t3 = performance.now();
this.updateGraph(t3 - t2, "js");
}}>
Calculate with both 
</button>

api.js

import { instantiateStreaming } from "assemblyscript/lib/loader";
export default instantiateStreaming(fetch("./assembly.wasm"));

Answer 1

微基准测试(即分析小型、非常快速函数性能的基准测试(的问题是，您几乎总是测量错误的东西。您的测量结果将严重偏离：

• 从JavaScript调用WebAssembly函数所涉及的开销
• AssemblyScript编译器(这是非常新的(优化函数的能力
• 计时器的准确性
• JavaScript引擎达到优化峰值的时间

仅举几个例子！

一个更现实的基准将执行执行更大范围的WebAssembly操作的计算，本质上更"现实"(即测量您真正要卸载到WebAssembly的负载类型(，并且执行时间更长。

这里有一个基于GameBoy模拟器的更好的基准：

https://medium.com/@torch2244/webassembly-is-fast-a-rereal-world-benchmark-of-webassembly-vs-es6-d85a23f8e193

Answer 2

应该是

import waApi from "./api";
class Test extends React.Component { 
async componentDidMount() {
this.wasmModule = await waApi;
}
render() {
return (
<button
onClick={() => {
const module = this.wasmModule;
if (!module) {
console.warn("module not yet loaded. Try later");
return;
}
const t0 = performance.now();
module.fib(200);
const t1 = performance.now();
this.updateGraph(t1 - t0, "wa");
const t2 = performance.now();
this.fib(200);
const t3 = performance.now();
this.updateGraph(t3 - t2, "js");
}}>
);
}
}

因为在wasm部分的示例中，您还测量了模块的加载和实例化。