Blazor - 异步渲染大数据答案

【问题标题】：Blazor - asynchronously render big dataBlazor - 异步渲染大数据
【发布时间】：2020-08-13 07:28:36
【问题描述】：

在我的 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 个圆圈 - 输出到 SVG 并部分显示图片）。

您能否建议更好的方法？

【问题讨论】：

不，我没有任何警告。
codedread.com/browser-tests/particle/particle.xhtml
@RobertLongson 他们有 500 个粒子。我可以有 5-200k
在这种情况下，您应该使用画布而不是 SVG。
@RobertLongson 好吧，你可能是对的，但无论如何，如何解决 Blazor 中的大数据渲染问题会很有趣... 下面 Marijn Pessers 发布了一个非常有趣的方法，它是绝对是新的，我认为在这个问题中实施可能很酷。

标签： c# .net asp.net-core svg blazor

【解决方案1】：

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

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

【讨论】：