c# - 即使使用任务，Blazor UI 也会卡住

Question

考虑 Blazor WebAssembly App(ASP.NET Core 托管)“空”项目。我调整了 Counter 页面如下:

<button class="btn btn-primary" @onclick="IncrementCountAsync">Click me</button>

及其 Counter.razor.cs 文件:

public partial class Counter
{
    private static int currentCount = 0;

    private async Task IncrementCountAsync()
    {
        Console.WriteLine("Increment called");

        _ = HeavyComputeAsync();

        currentCount++;

        Console.WriteLine($"Counter = {currentCount}");
    }

    private static Task<int> HeavyComputeAsync()
    {
        return Task.Run(() =>
        {
            Console.WriteLine("Task start");

            for (long ndx = 0; ndx < 1000000; ++ndx)
                ndx.ToString();

            Console.WriteLine("Task end");
            return 0;
        });
    }
}

我将 HeavyComputeAsync 方法调用为 _ = ... 这不应等到 IncrementCountAsync 方法完成，而是立即更新 currentCount。

当我运行应用程序时，我可以在控制台中看到预期的行为:

Increment called
Counter = 1
Task start
Task end (after a while)

但是 UI 卡住，它不会更新计数器。确切地说，有时它会立即更新:-O，但是大多数情况下，计数器仅在任务完成后更新。

我希望任务并行运行(在另一个线程中)并且不应该阻塞 UI。

我知道 IncrementCountAsync 在这种情况下同步运行，因为我正在调用 _ = HeavyComputeAsync。我试图用 await = ... 调用它，但即使在这种情况下 UI 被卡住，我也无法单击其他页面。

如何实现UI即时更新？

谢谢，Csaba :-)

Answer 1

在 Blazor WebAssembly 中，您只有 1 个线程。这是(当前)浏览器/JavaScript 限制，也适用于所有 Wasm 应用程序。

所以 Task.Run() 不像在服务器上那样工作。代码必须在主线程上执行。

任何“繁重的操作”都会阻塞 UI，这是预期的行为。

您在这里唯一可以做的就是将其分解为多个较小的步骤，并在有或没有 Task.Run() 的情况下运行这些步骤，UI 可以在它们之间的间隙中进行更新。

我已经发布了一个带有示例代码的相关答案 here