aspnetcore: Performance issue: Why Blazor Web assembly loop is far slower than Javascript?

I have created two simple loops in Javascript and Blazor WebAssembly. I was going to love Blazor and had expected web assembly to be faster because it was compiled and optimized, but it was far slower than Javascript. I used .NET 6 Blazor web assembly. Did I do something wrong or Blazor is not designed for this scenario at all?

Javascript: 3 seconds

Blazor: 95 seconds

Javascript:

function Foo() 
{
  let fruit = [];
  for (var i = 0; i < 5000000; i++) {
    fruit[i] = "zzzz" + i.toString() + "yyy" + i.toString() +
      i.toString() + i.toString() + i.toString();
  }

  let counter = 0;
  for (var j = 0; j < fruit.length; j++)
    if (fruit[j].indexOf("111") > 0)
      counter++;
  console.log(counter);
}

Blazor Web assembly:

void Foo()
{
    DateTime dateTime = DateTime.Now;
    var items = new string[5000000];
    for (var i=0; i<items.Length; i++)
        items[i] = "some string some string 111" + i.ToString();

    var counter = 0;
    for (var i = 0; i < items.Length; i++)
        if (items[i].IndexOf("111") > 0)
            counter++;
}

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 20 (5 by maintainers)

Most upvoted comments

As a pro C# developer, we have started to build a project because we like C# and believed web assembly would be faster as it doesn’t require to interpretation like javascript code.

Modern browsers typically run JS in a JIT, so it isn’t interpreted. In that sense, JS actually has an advantage over C#: WebAssembly doesn’t allow for a JIT, so all .NET can do is either run interpreted (still the default for Blazor WASM), or in a hybrid AOT+interpreted mode (as explored in this thread; for some scenarios such as Reflection, pure AOT isn’t feasible). Plus, there’s the inevitable overhead of JS interop, at least as long as direct DOM manipulation from WASM isn’t an option.

Thus, for many scenarios, Blazor WASM always be slower than JS.

String manipulation is a significant operation for many frontends.

I’m interested in why you think so.

chucker on Nov 22, 2021

@MariovanZeist Don’t get me wrong. I love C# and really hope Blazor can be game changer. At the moment, I just rewrite some Angular app to evaluate Blazor. The only benefit I can see in Blazor is just full stack C#, but it just cannot win the trade-off. In my opinion, Blazor (Web assembly) now have some main disadvantages:

1. Big bundle size, slow start-up.
1. Poor runtime performance
1. Painful debug experience, so slow, so buggy. To be honest, I don’t think so many people will select Blazor for serious project at the moment…

hoangdovan on Nov 29, 2021