Huge blazorpack bytes buffer when using Blazor Virtualize component #44727
Description
Is there an existing issue for this?
- I have searched the existing issues
Describe the bug
Here is a blazor page (blazor server):
Test.razor:
@page "/test"
<div style="height:500px;overflow-y:scroll">
<table>
<Virtualize Items="@Items" Context="item">
<tr>
<td>@item</td>
</tr>
</Virtualize>
</table>
</div>
@code
{
private List<string> Items { get; set; } = new List<string>();
protected override async Task OnInitializedAsync()
{
for (int i = 0; i < 1000; i++)
{
Items.Add("Hello " + i.ToString());
}
}
}
This is a very basic page which displays string in a Virtualize component.
Expected Behavior
The behavior is correct but I have a big amount of data in the websocket channel when scrolling.
I have see this frame in google chrome websocket messages.
In the bottom, I can see my datas.
But I can see a lot of useless bytes (0xFFFF, 0x0700, 0x0000, ...)
My sample page is very basic.
I have to write an application with a lot of columns and rows and I have performance issues.
I can see messages of more than 1Mb !
I think there is a problem in Blazorr internals: bytes from 00000003 to 000000c2 in my example are useless.
00000000: 811c 9601 80c0 ae4a 532e 5265 6e64 6572 .......JS.Render
00000001: 4261 7463 6892 0cc5 0de8 0d00 0000 9800 Batch...........
00000002: 0000 0300 0000 0000 0000 0000 0000 ffff ................
00000003: ffff 0600 0000 0100 0000 0000 0000 ffff ................
00000004: ffff 0600 0000 0000 0000 0000 0000 ffff ................
00000005: ffff 0500 0000 0000 0000 0100 0000 ffff ................
00000006: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000007: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000008: ffff 0600 0000 0200 0000 0000 0000 ffff ................
00000009: ffff 0600 0000 0000 0000 0000 0000 ffff ................
0000000a: ffff 0500 0000 0000 0000 0200 0000 ffff ................
0000000b: ffff 0700 0000 0000 0000 0000 0000 ffff ................
0000000c: ffff 0700 0000 0000 0000 0000 0000 ffff ................
0000000d: ffff 0600 0000 0300 0000 0000 0000 ffff ................
0000000e: ffff 0600 0000 0000 0000 0000 0000 ffff ................
0000000f: ffff 0500 0000 0000 0000 0300 0000 ffff ................
00000010: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000011: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000012: ffff 0600 0000 0400 0000 0000 0000 ffff ................
00000013: ffff 0600 0000 0000 0000 0000 0000 ffff ................
00000014: ffff 0500 0000 0000 0000 0400 0000 ffff ................
00000015: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000016: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000017: ffff 0600 0000 0500 0000 0000 0000 ffff ................
00000018: ffff 0600 0000 0000 0000 0000 0000 ffff ................
00000019: ffff 0500 0000 0000 0000 0500 0000 ffff ................
0000001a: ffff 0700 0000 0000 0000 0000 0000 ffff ................
0000001b: ffff 0700 0000 0000 0000 0000 0000 ffff ................
0000001c: ffff 0600 0000 0600 0000 0000 0000 ffff ................
0000001d: ffff 0600 0000 0000 0000 0000 0000 ffff ................
0000001e: ffff 0500 0000 0000 0000 0600 0000 ffff ................
0000001f: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000020: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000021: ffff 0600 0000 0700 0000 0000 0000 ffff ................
00000022: ffff 0600 0000 0000 0000 0000 0000 ffff ................
00000023: ffff 0500 0000 0000 0000 0700 0000 ffff ................
00000024: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000025: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000026: ffff 0600 0000 0800 0000 0000 0000 ffff ................
00000027: ffff 0600 0000 0000 0000 0000 0000 ffff ................
00000028: ffff 0500 0000 0000 0000 0800 0000 ffff ................
00000029: ffff 0700 0000 0000 0000 0000 0000 ffff ................
0000002a: ffff 0700 0000 0000 0000 0000 0000 ffff ................
0000002b: ffff 0600 0000 0900 0000 0000 0000 ffff ................
0000002c: ffff 0600 0000 0000 0000 0000 0000 ffff ................
0000002d: ffff 0500 0000 0000 0000 0900 0000 ffff ................
0000002e: ffff 0700 0000 0000 0000 0000 0000 ffff ................
0000002f: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000030: ffff 0600 0000 0a00 0000 0000 0000 ffff ................
00000031: ffff 0600 0000 0000 0000 0000 0000 ffff ................
00000032: ffff 0500 0000 0000 0000 0a00 0000 ffff ................
00000033: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000034: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000035: ffff 0600 0000 0b00 0000 0000 0000 ffff ................
00000036: ffff 0600 0000 0000 0000 0000 0000 ffff ................
00000037: ffff 0500 0000 0000 0000 0b00 0000 ffff ................
00000038: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000039: ffff 0700 0000 0000 0000 0000 0000 ffff ................
0000003a: ffff 0600 0000 0c00 0000 0000 0000 ffff ................
0000003b: ffff 0600 0000 0000 0000 0000 0000 ffff ................
0000003c: ffff 0500 0000 0000 0000 0c00 0000 ffff ................
0000003d: ffff 0700 0000 0000 0000 0000 0000 ffff ................
0000003e: ffff 0700 0000 0000 0000 0000 0000 ffff ................
0000003f: ffff 0600 0000 0d00 0000 0000 0000 ffff ................
00000040: ffff 0600 0000 0000 0000 0000 0000 ffff ................
00000041: ffff 0500 0000 0000 0000 0d00 0000 ffff ................
00000042: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000043: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000044: ffff 0600 0000 0e00 0000 0000 0000 ffff ................
00000045: ffff 0600 0000 0000 0000 0000 0000 ffff ................
00000046: ffff 0500 0000 0000 0000 0e00 0000 ffff ................
00000047: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000048: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000049: ffff 0600 0000 0f00 0000 0000 0000 ffff ................
0000004a: ffff 0600 0000 0000 0000 0000 0000 ffff ................
0000004b: ffff 0500 0000 0000 0000 0f00 0000 ffff ................
0000004c: ffff 0700 0000 0000 0000 0000 0000 ffff ................
0000004d: ffff 0700 0000 0000 0000 0000 0000 ffff ................
0000004e: ffff 0600 0000 1000 0000 0000 0000 ffff ................
0000004f: ffff 0600 0000 0000 0000 0000 0000 ffff ................
00000050: ffff 0500 0000 0000 0000 1000 0000 ffff ................
00000051: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000052: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000053: ffff 0600 0000 1100 0000 0000 0000 ffff ................
00000054: ffff 0600 0000 0000 0000 0000 0000 ffff ................
00000055: ffff 0500 0000 0000 0000 1100 0000 ffff ................
00000056: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000057: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000058: ffff 0600 0000 1200 0000 0000 0000 ffff ................
00000059: ffff 0600 0000 0000 0000 0000 0000 ffff ................
0000005a: ffff 0500 0000 0000 0000 1200 0000 ffff ................
0000005b: ffff 0700 0000 0000 0000 0000 0000 ffff ................
0000005c: ffff 0700 0000 0000 0000 0000 0000 ffff ................
0000005d: ffff 0600 0000 1300 0000 0000 0000 ffff ................
0000005e: ffff 0600 0000 0000 0000 0000 0000 ffff ................
0000005f: ffff 0500 0000 0000 0000 1300 0000 ffff ................
00000060: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000061: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000062: ffff 0600 0000 1400 0000 0000 0000 ffff ................
00000063: ffff 0600 0000 0000 0000 0000 0000 ffff ................
00000064: ffff 0500 0000 0000 0000 1400 0000 ffff ................
00000065: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000066: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000067: ffff 0600 0000 1500 0000 0000 0000 ffff ................
00000068: ffff 0600 0000 0000 0000 0000 0000 ffff ................
00000069: ffff 0500 0000 0000 0000 1500 0000 ffff ................
0000006a: ffff 0700 0000 0000 0000 0000 0000 ffff ................
0000006b: ffff 0700 0000 0000 0000 0000 0000 ffff ................
0000006c: ffff 0600 0000 1600 0000 0000 0000 ffff ................
0000006d: ffff 0600 0000 0000 0000 0000 0000 ffff ................
0000006e: ffff 0500 0000 0000 0000 1600 0000 ffff ................
0000006f: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000070: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000071: ffff 0600 0000 1700 0000 0000 0000 ffff ................
00000072: ffff 0600 0000 0000 0000 0000 0000 ffff ................
00000073: ffff 0500 0000 0000 0000 1700 0000 ffff ................
00000074: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000075: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000076: ffff 0600 0000 1800 0000 0000 0000 ffff ................
00000077: ffff 0600 0000 0000 0000 0000 0000 ffff ................
00000078: ffff 0500 0000 0000 0000 1800 0000 ffff ................
00000079: ffff 0700 0000 0000 0000 0000 0000 ffff ................
0000007a: ffff 0700 0000 0000 0000 0000 0000 ffff ................
0000007b: ffff 0600 0000 1900 0000 0000 0000 ffff ................
0000007c: ffff 0600 0000 0000 0000 0000 0000 ffff ................
0000007d: ffff 0500 0000 0000 0000 1900 0000 ffff ................
0000007e: ffff 0700 0000 0000 0000 0000 0000 ffff ................
0000007f: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000080: ffff 0600 0000 1a00 0000 0000 0000 ffff ................
00000081: ffff 0600 0000 0000 0000 0000 0000 ffff ................
00000082: ffff 0500 0000 0000 0000 1a00 0000 ffff ................
00000083: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000084: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000085: ffff 0600 0000 1b00 0000 0000 0000 ffff ................
00000086: ffff 0600 0000 0000 0000 0000 0000 ffff ................
00000087: ffff 0500 0000 0000 0000 1b00 0000 ffff ................
00000088: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000089: ffff 0700 0000 0000 0000 0000 0000 ffff ................
0000008a: ffff 0600 0000 1c00 0000 0000 0000 ffff ................
0000008b: ffff 0600 0000 0000 0000 0000 0000 ffff ................
0000008c: ffff 0500 0000 0000 0000 1c00 0000 ffff ................
0000008d: ffff 0700 0000 0000 0000 0000 0000 ffff ................
0000008e: ffff 0700 0000 0000 0000 0000 0000 ffff ................
0000008f: ffff 0600 0000 1d00 0000 0000 0000 ffff ................
00000090: ffff 0600 0000 0000 0000 0000 0000 ffff ................
00000091: ffff 0500 0000 0000 0000 1d00 0000 ffff ................
00000092: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000093: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000094: ffff 0600 0000 1e00 0000 0000 0000 ffff ................
00000095: ffff 0600 0000 0000 0000 0000 0000 ffff ................
00000096: ffff 0500 0000 0000 0000 1e00 0000 ffff ................
00000097: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000098: ffff 0700 0000 0000 0000 0000 0000 ffff ................
00000099: ffff 0300 0000 1f00 0000 1f00 0000 ffff ................
0000009a: ffff 0100 0000 0000 0000 2000 0000 0300 .......... .....
0000009b: 0000 0000 0000 0100 0000 0000 0000 0000 ................
0000009c: 0000 0200 0000 0200 0000 0000 0000 0000 ................
0000009d: 0000 0000 0000 0200 0000 0300 0000 0000 ................
0000009e: 0000 0000 0000 0000 0000 0200 0000 0400 ................
0000009f: 0000 0000 0000 0000 0000 0000 0000 0200 ................
000000a0: 0000 0500 0000 0000 0000 0000 0000 0000 ................
000000a1: 0000 0200 0000 0600 0000 0000 0000 0000 ................
000000a2: 0000 0000 0000 0200 0000 0700 0000 0000 ................
000000a3: 0000 0000 0000 0000 0000 0200 0000 0800 ................
000000a4: 0000 0000 0000 0000 0000 0000 0000 0200 ................
000000a5: 0000 0900 0000 0000 0000 0000 0000 0000 ................
000000a6: 0000 0200 0000 0a00 0000 0000 0000 0000 ................
000000a7: 0000 0000 0000 0200 0000 0b00 0000 0000 ................
000000a8: 0000 0000 0000 0000 0000 0200 0000 0c00 ................
000000a9: 0000 0000 0000 0000 0000 0000 0000 0200 ................
000000aa: 0000 0d00 0000 0000 0000 0000 0000 0000 ................
000000ab: 0000 0200 0000 0e00 0000 0000 0000 0000 ................
000000ac: 0000 0000 0000 0200 0000 0f00 0000 0000 ................
000000ad: 0000 0000 0000 0000 0000 0200 0000 1000 ................
000000ae: 0000 0000 0000 0000 0000 0000 0000 0200 ................
000000af: 0000 1100 0000 0000 0000 0000 0000 0000 ................
000000b0: 0000 0200 0000 1200 0000 0000 0000 0000 ................
000000b1: 0000 0000 0000 0200 0000 1300 0000 0000 ................
000000b2: 0000 0000 0000 0000 0000 0200 0000 1400 ................
000000b3: 0000 0000 0000 0000 0000 0000 0000 0200 ................
000000b4: 0000 1500 0000 0000 0000 0000 0000 0000 ................
000000b5: 0000 0200 0000 1600 0000 0000 0000 0000 ................
000000b6: 0000 0000 0000 0200 0000 1700 0000 0000 ................
000000b7: 0000 0000 0000 0000 0000 0200 0000 1800 ................
000000b8: 0000 0000 0000 0000 0000 0000 0000 0200 ................
000000b9: 0000 1900 0000 0000 0000 0000 0000 0000 ................
000000ba: 0000 0200 0000 1a00 0000 0000 0000 0000 ................
000000bb: 0000 0000 0000 0200 0000 1b00 0000 0000 ................
000000bc: 0000 0000 0000 0000 0000 0200 0000 1c00 ................
000000bd: 0000 0000 0000 0000 0000 0000 0000 0200 ................
000000be: 0000 1d00 0000 0000 0000 0000 0000 0000 ................
000000bf: 0000 0200 0000 1e00 0000 0000 0000 0000 ................
000000c0: 0000 0000 0000 0200 0000 1f00 0000 0000 ................
000000c1: 0000 0000 0000 0000 0000 0300 0000 0000 ................
000000c2: 0000 2000 0000 0000 0000 0000 0000 0000 .. .............
000000c3: 0000 0000 0000 0573 7479 6c65 0e68 6569 .......style.hei
000000c4: 6768 743a 2034 3136 7078 3b08 4865 6c6c ght: 416px;.Hell
000000c5: 6f20 3136 0848 656c 6c6f 2031 3708 4865 o 16.Hello 17.He
000000c6: 6c6c 6f20 3138 0848 656c 6c6f 2031 3908 llo 18.Hello 19.
000000c7: 4865 6c6c 6f20 3230 0848 656c 6c6f 2032 Hello 20.Hello 2
000000c8: 3108 4865 6c6c 6f20 3232 0848 656c 6c6f 1.Hello 22.Hello
000000c9: 2032 3308 4865 6c6c 6f20 3234 0848 656c 23.Hello 24.Hel
000000ca: 6c6f 2032 3508 4865 6c6c 6f20 3236 0848 lo 25.Hello 26.H
000000cb: 656c 6c6f 2032 3708 4865 6c6c 6f20 3238 ello 27.Hello 28
000000cc: 0848 656c 6c6f 2032 3908 4865 6c6c 6f20 .Hello 29.Hello
000000cd: 3330 0848 656c 6c6f 2033 3108 4865 6c6c 30.Hello 31.Hell
000000ce: 6f20 3332 0848 656c 6c6f 2033 3308 4865 o 32.Hello 33.He
000000cf: 6c6c 6f20 3334 0848 656c 6c6f 2033 3508 llo 34.Hello 35.
000000d0: 4865 6c6c 6f20 3336 0848 656c 6c6f 2033 Hello 36.Hello 3
000000d1: 3708 4865 6c6c 6f20 3338 0848 656c 6c6f 7.Hello 38.Hello
000000d2: 2033 3908 4865 6c6c 6f20 3430 0848 656c 39.Hello 40.Hel
000000d3: 6c6f 2034 3108 4865 6c6c 6f20 3432 0848 lo 41.Hello 42.H
000000d4: 656c 6c6f 2034 3308 4865 6c6c 6f20 3434 ello 43.Hello 44
000000d5: 0848 656c 6c6f 2034 3510 6865 6967 6874 .Hello 45.height
000000d6: 3a20 3234 3830 3470 783b 1c0c 0000 220c : 24804px;....".
000000d7: 0000 310c 0000 3a0c 0000 430c 0000 4c0c ..1...:...C...L.
000000d8: 0000 550c 0000 5e0c 0000 670c 0000 700c ..U...^...g...p.
000000d9: 0000 790c 0000 820c 0000 8b0c 0000 940c ..y.............
000000da: 0000 9d0c 0000 a60c 0000 af0c 0000 b80c ................
000000db: 0000 c10c 0000 ca0c 0000 d30c 0000 dc0c ................
000000dc: 0000 e50c 0000 ee0c 0000 f70c 0000 000d ................
000000dd: 0000 090d 0000 120d 0000 1b0d 0000 240d ..............$.
000000de: 0000 2d0d 0000 360d 0000 3f0d 0000 8809 ..-...6...?.....
000000df: 0000 9009 0000 140c 0000 180c 0000 500d ..............P.
000000e0: 0000 9021 9601 80c0 b24a 532e 456e 6449 ...!.....JS.EndI
000000e1: 6e76 6f6b 6544 6f74 4e65 7493 a139 c3a4 nvokeDotNet..9..
000000e2: 6e75 6c6c 90 null.```
### Steps To Reproduce
- Create a blazor server project 6.0.402 (`dotnet new blazorserver`)
- Insert my Test.razor page in the project
- Build and run the project (`dotnet run`)
- Open "/test" url in Google Chrome
- Open Google Chrome's developper tools, network tab
- Select the _blazor?id=xxxx websocket
- Refresh the page
- Inspect websocket messages packets
### Exceptions (if any)
_No response_
### .NET Version
6.0.402
### Anything else?
_No response_