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）中的缓慢反序列化，还是这里发生了其他事情？ 我怎样才能提高获取这么多数据集的效率（虽然我认为它并没有那么大！）

为了简化，我已经注释掉了绑定到 Results 的任何内容，而我只是有一个绑定到 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

还是这里有其他事情发生？

看起来是这样的。您没有说明您使用什么硬件，但在我的桌面（i7）上，我可以在

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

一个 MCVE：

• 从 Wasm 托管模板开始
• 让控制器返回 ~17000 个项目（原为 5 个）以获得 ~1.5 MB
• 将代码放入 FetchData OnInit() 中，将 Foo 替换为 WeatherForecast
• 不要尝试全部渲染。

看看你得到了什么结果。