Blazor-异步呈现大数据

问题描述

在“剃刀”页面上，我有一个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圆-输出到SVG并部分显示图片）。

您能否提出更好的方法？

解决方法

我无法回答您重新发行当前发行版的问题，但是，如果您查看.net 5，他们已经解决了此问题（在即将发布的预览中）。 观看这段.net Community Standup的视频，然后转到50分50秒，您将看到使用表格实现的问题。

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