performance - Blazor WebAssembly 反序列化甚至比下载慢得多？怎么了？

Question

在我的 Blazor 应用程序中，我有一个具有类似方法的组件。 (我用其中的代码替换了 GetFromJsonAsync 调用，以缩小缓慢的部分。)

  private async Task GetData()
  {
      IsLoading = true;
      string url = $".../api/v1/Foo";  // will return a 1.5 MB JSON array
      var client = clientFactory.CreateClient("MyNamedClient");

      Console.WriteLine($"starting");

      List<Foo> results;

      Task<HttpResponseMessage> taskResponse = client.GetAsync(url, HttpCompletionOption.ResponseContentRead, default);

      var sw = Stopwatch.StartNew();
      using (HttpResponseMessage response = await taskResponse)
      {
        
        response.EnsureSuccessStatusCode();
        var content = response.Content!;

        if (content == null)
        {
          throw new ArgumentNullException(nameof(content));
        }
        
        string contentString = await content.ReadAsStringAsync();

        sw.Stop();
        Console.WriteLine($"Read string: {sw.Elapsed}");
        sw.Restart();

        results = System.Text.Json.JsonSerializer.Deserialize<List<Foo>>(contentString);

      }

      sw.Stop();
      Console.WriteLine($"Deserialize: {sw.Elapsed}");
      
      StateHasChanged();
      IsLoading = false;

我下载 1.5 MB 需要 1-6 秒，但其余操作(在此期间 UI 被阻止)需要 10-30 秒。 ReadFromJsonAsync(在内部调用 System.Text.Json.JsonSerializer.Deserialize)中的反序列化是否很慢，或者有什么这里还有其他事情吗？ 我怎样才能提高获取这一大数据集的效率(尽管我认为它并没有那么大!)

为了简化，我已经注释掉了绑定(bind)到 Results 的所有内容，而我只使用了一个绑定(bind)到 IsLoading 的指示器。这告诉我更新 DOM 或渲染没有问题。

当我在自动化集成测试中尝试同一组代码时，只需要 3 秒左右。 WebAssembly 的反序列化真的那么慢吗？如果是这样，那么唯一的解决方案是在我的网站上到处检索非常小的数据集吗？这对我来说似乎不对。

这是运行上述代码的结果浏览器控制台日志:

VM1131:1 Fetch finished loading: GET "https://localhost:5001/api/v1/Foo".
read string 00:00:05.5464300
Deserialize: 00:00:15.4109950
L: GC_MAJOR_SWEEP: major size: 3232K in use: 28547K
L: GC_MAJOR: (LOS overflow) time 18.49ms, stw 18.50ms los size: 2048K in use: 187K
L: GC_MINOR: (LOS overflow) time 0.33ms, stw 0.37ms promoted 0K major size: 3232K in use: 2014K los size: 2048K in use: 187K

不管怎样，下面是 Chrome 性能图表。绿色是下载，橙色是“执行微任务”，我认为这意味着 WebAssembly 工作。

Answer 1

or is there something else going on here?

看起来是这样的。您没有说明您使用的是什么硬件，但在我的桌面 (i7) 上，我可以在 < 100 毫秒 (Localhost) 内下载并且反序列化需要 < 4 秒。 Debug 和 Release 模式或浏览器之间没有太大区别。

所以，仅仅从 localhost 下载 5 秒就已经很奇怪了。您的设置有问题。

MCVE:

• 从 Wasm 托管模板开始
• 让 Controller 返回约 17000 个项目(原为 5 个)以获得约 1.5 MB
• 将您的代码放在 FetchData OnInit() 中，将 Foo 替换为 WeatherForecast
• 不要试图全部渲染它们。

看看您为此获得了什么结果。