Blazor - 异步渲染大数据

Question

在我的 Razor 页面上，我有一个 svg 容器。

在 svg 内部我画了圆圈。
SVG 中可能有数千个圆圈。

<svg>
  @foreach (var pixel in GetPixels())
  {
     <circle class="pixel" cx="@pixel.CoordinateX" cy="@pixel.CoordinateY" />                  
    }
</svg>

和 GetPixels 是

 IEnumerable<Pixel> GetPixels()
        {
            var progress = 0;
            float oldPercent = 0;
            foreach (var p in Result.Pixels)
            {
                yield return p;

                var progressPercent = (float)Math.Ceiling(progress * 1F / (Result.TotalItems) * 100F);
                if (progressPercent % 1 == 0 && oldPercent != progressPercent)
                {
                    Js.InvokeVoidAsync("updateProgress", progressPercent);
                    oldPercent = progressPercent;
                }

                progress++;

            }
        }

后端迭代工作非常快，当 foreach 语句完成并且浏览器试图渲染数千个这样的圆圈时，就会出现问题，因此它实际上会挂起一段时间。

我想实现一些圆圈的批量加载，当在特定数量的圆圈之后我重新渲染 svg（比如说 1000 个圆圈 - output 到 ZCD15A75C26008696637B31A3F0DE4）并显示部分图片。

你能建议什么是更好的方法吗？

Answer 1

我无法回答您当前的发布版本，但如果您查看 .net 5，他们已经解决了这个问题（在即将发布的预览版中）。 观看.net Community Standup和 go 到 50m50s 的这段视频，您将看到使用表格实现您的问题。

因此，如果您可以使用 .net5 预览版，或者您可以等到年底发布，我建议您使用这种方法。