Huge blazorpack bytes buffer when using Blazor Virtualize component #44727

JulienSyn · 2022-10-25T12:35:47Z

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_

The text was updated successfully, but these errors were encountered:

mkArtakMSFT · 2022-10-25T16:39:07Z

Thanks for contacting us.
We believe the data is not useless and we plan to try to compress it further as part of this issue: #35897

JulienSyn · 2022-10-25T16:41:08Z

Sorry but I think this is not a compression issue.
I agree you should compress blazorpack messages.

But first, you may remove this useless data.

Or can you tell me more about this datas ? What do they represent ?

Thanks

javiercn added area-blazor Includes: Blazor, Razor Components feature-blazor-virtualization This issue is related to the Blazor Virtualize component labels Oct 25, 2022

mkArtakMSFT closed this as not planned Won't fix, can't repro, duplicate, stale Oct 25, 2022

mkArtakMSFT added the ✔️ Resolution: Duplicate Resolved as a duplicate of another issue label Oct 25, 2022

ghost added the Status: Resolved label Oct 25, 2022

ghost locked as resolved and limited conversation to collaborators Nov 24, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Huge blazorpack bytes buffer when using Blazor Virtualize component #44727

Huge blazorpack bytes buffer when using Blazor Virtualize component #44727

JulienSyn commented Oct 25, 2022 •

edited

Loading

mkArtakMSFT commented Oct 25, 2022

JulienSyn commented Oct 25, 2022

Huge blazorpack bytes buffer when using Blazor Virtualize component #44727

Huge blazorpack bytes buffer when using Blazor Virtualize component #44727

Comments

JulienSyn commented Oct 25, 2022 • edited Loading

Is there an existing issue for this?

Describe the bug

Expected Behavior

mkArtakMSFT commented Oct 25, 2022

JulienSyn commented Oct 25, 2022

JulienSyn commented Oct 25, 2022 •

edited

Loading