Using bind causes massive traffic in server side blazor

[jsandv]

Im working on a small simple drawing tool in server side blazor using the latest template in VS2019 .net core 3-preview. When I was stress testing my app, adding 500 elements it became extremely unresponsive.
When inspecting the websocket connection i saw lots of packages over 35kb while moving the mouse. This does not make sense to me, because im not changing anything.
Anyways after some experiments I have located something suspecious causing this.
Using bind on an element like this:
1)<input type ="text" bind="@Text"/>
is completely diffrent then this:
2)<input type ="text" value="@Text" onchange="@(e=>e.Value)"/>

The first one is resending entire page over websocket each mouse move (which seems to be at least 10 times per second)
The second one is resending entire page over websocket only when I change the text.

1)This one using bind sends 35kb packages

@page "/"
<div onmousemove="@(e=>MouseMove(e))">
    @for(var i = 0; i < 1000; i++)
    {
        <input type ="text" bind="@Text"/>
    }
</div>

@functions{
    public string Text { get; set; }
    public void MouseMove(UIMouseEventArgs e)
    {

    }
}

This one works as expected with regards to data sent over websocket

@page "/"
<div onmousemove="@(e=>MouseMove(e))">
    @for(var i = 0; i < 1000; i++)
    {
        <input type ="text" value="@Text" onchange="@(e=>OnTextChange(e))"/>
    }
</div>

@functions{
    public string Text { get; set; }
    public void MouseMove(UIMouseEventArgs e)
    {

    }
    public void OnTextChange(UIChangeEventArgs e)
    {
        Text = e.Value.ToString();
    }
}

[SteveSandersonMS]

FYI what is changing on every mouse move is the event handlers. You’re disposing 1000 handlers and assigning 1000 new ones on each mouse move. This is because the framework can’t detect that the new handlers are functionally equivalent to the old ones.

[mkArtakMSFT]

To add to what @SteveSandersonMS has mentioned here, we're going to introduce a mechanism for reducing the impact of these type of aggressive events on the server as part of #10522

[mkArtakMSFT]

@SteveSandersonMS is there anything else we plan to do here?

[Andrzej-W]

I'm not the author of original question, but after reading the answer from @SteveSandersonMS I have to say that I don't know which event handlers are disposed and assigned again. Please note that according to the author second example with onchange handler works as expected. First one without explicit event handlers sends to much data. I agree that it is not expected.

@mkArtakMSFT I agree that we need event throttling but the problem described above is different.

[mkArtakMSFT]

/ping @SteveSandersonMS

[SteveSandersonMS]

Not certain what I'm being pinged for. This is scheduled to be investigated for 3.1, right?

[mkArtakMSFT]

We've moved this issue to the Backlog milestone. This means that it is not going to happen for the coming release. We will reassess the backlog following the current release and consider this item at that time. However, keep in mind that there are many other high priority features with which it will be competing for resources.

[ChristianWeyer]

@jsandv Are you still seeing this behavior with latest bits?

[jsandv]

@ChristianWeyer yes im seeing this in latest bits.

Current steps to reproduce is having either section 1 or section 2 commented in.
Run in any valid page.

`

@page "/counter"
Section 2: Not optimal, entire page is sent each mouse move
<div @onmousemove="e=>MouseMove(e)">
    @for (var i = 0; i < 1000; i++)
    {
        <input type="text" @bind="Text" />
    }
</div>

@*Section 2: Optimal, only few bytes transferred each mouse move
<div @onmousemove="e=>MouseMove(e)">
    @for (var i = 0; i < 1000; i++)
    {
        <input type="text" value="@Text" @onchange="e=>OnTextChange(e)" />
    }
</div>*@

@code {
    public string Text { get; set; } = "s";
    public void MouseMove(MouseEventArgs e)
    {

    }
    public void OnTextChange(ChangeEventArgs e)
    {
        Text = e.Value.ToString();
    }
}

`

[endeffects]

I have the same issue with a diagram component i'm working on.
How more shapes i'm adding to it how more traffic is generated
by dragging and dropping a single element.

The structure of my page is similar to the sample above,
i have an outer svg to handle the drag and drop events:

<svg @onmousemove="this.OnMouseMove" @onmouseup="this.OnMouseUp" />

And multiple child rectangles where i'm capturing the selection events:

<g @onmousedown="this.OnItemSelected"> .. </g>

So my question is, does it make more sense to move all child event bindings
to the parent svg to improve the performance? Or is blazor able to handle this
and i missed something in my implementation?

[TanayParikh]

Closing as dup of #10522.