Blazor - 异步渲染大数据

Question

on my Razor page I have an svg container.

Inside of the svg I draw the circles.
It could be thousands of circles in the SVG.

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

and GetPixels is

 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++;

            }
        }

The backend iteration works very fast, the problem occurs when there foreach statement is complete and the browser is trying to render thousands of these circles, so it literally hanging for a while.

I would like to implement some batch load of the circles, when after specific amount of circles I rerender the svg (let say 1000 circles - output to SVG and show partially a picture).

Could you please suggest what would be the better way of doing it?

Answer 1

I have no answer for you regerding the current release version but if you look at .net 5 they have solved this (in the upcoming preview). Look at this video of the .net Community Standup and go to 50m50s and you will see an implementation of your question using tables.

So IF you can use .net5 preview or you can wait till the end of the year when it is released I suggest you use that approach.