Angular 和 Blazor 客户端之间令人困惑的性能差距答案

【问题标题】：Confounding performance gap between Angular & Blazor client sidAngular 和 Blazor 客户端之间令人困惑的性能差距
【发布时间】：2019-08-08 14:31:06
【问题描述】：

我在 Angular 和 Blazor（客户端）中执行相同的一小段代码，但我不了解这两个系统之间的性能差距。 Angular 看起来要快得多。

我使用的是最新版本的 Windows 10 (1903)。我正在使用 Chrome 版本 76.0.3809.100（官方构建）（64 位）。

代码非常简单：对于 Blazor

@code {
    int currentCount = 0;

    void process()
    {
        DateTime from = DateTime.Now;
        Console.WriteLine (from);

        long nombreOccurences = 100000000;
        Console.WriteLine ("Nombre de factoriels " + nombreOccurences );

        for (int currentCount = 0; currentCount < nombreOccurences; currentCount++) {
            long result = factorial(currentCount%21);
        }

        Console.WriteLine(currentCount);

        DateTime to = DateTime.Now;
        Console.WriteLine (to);

        TimeSpan diff = to - from;
        Console.WriteLine("diff " + diff);
    }

    long factorial (long n) {
        return n>1 ? n*factorial(n-1) : 1;
    }
}

对于 Angular

process() {
    let currentCount = 0;
    let result = 0;

    console.log('Process');

    const from = new Date();
    console.log('from', from);

    const nombreOccurences = 100000000;
    console.log('Nombre de factoriels ', nombreOccurences);

    for (currentCount = 0; currentCount < nombreOccurences; currentCount++) {
      result = this.factoriel(currentCount % 21);
    }

    console.log ('currentCount', currentCount);

    const to = new Date();
    console.log(to);

    var diff = to.getTime() - from.getTime();
    console.log('diff ', diff);
}

public factoriel(n: number) {
    return n > 1 ? n * this.factoriel(n - 1) : 1;
}

Angular 控制台：

from Thu Aug 08 2019 16:21:35 GMT+0200 (heure d’été d’Europe centrale)
app.component.ts:22 Nombre de factoriels  10000000
app.component.ts:28 currentCount 10000000
app.component.ts:31 Thu Aug 08 2019 16:21:36 GMT+0200 (heure d’été d’Europe centrale)
app.component.ts:34 diff  795

Blazor 控制台：

ASM: 08/08/2019 14:23:54
blazor.webassembly.js:1 WASM: Nombre de factoriels 100000000
blazor.webassembly.js:1 WASM: 0
blazor.webassembly.js:1 WASM: 08/08/2019 14:24:52
blazor.webassembly.js:1 WASM: diff 00:00:58.2570000

【问题讨论】：

有趣的测试，尝试不输出到控制台，看看它是否更接近。如果是这种情况，则问题是 Web Assembly 和 JavaScript 之间的上下文切换。让我们知道
我可以在没有输出的情况下重新运行，但我不明白你的言论。耗时的步骤就是循环，这个循环里面没有控制台输出，也没有切换JS/WebAssembly。
现在我检查了代码，你是对的，控制台日志没有放在循环中，所以不应该有所作为。

标签： angular performance blazor-client-side

【解决方案1】：

Blazor Webassembly 比 JavaScript 慢很多。见https://github.com/mono/mono/issues/9825。

但是，现在，你可以使用 Blazor WebAssembly 提前 (AOT) 编译，和 JavaScript 没有太大差距，见https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-6-preview-4/

【讨论】：