bitfoundation
Performance issue in Forms with numerous BitTextField inputs in Blazor WebAssembly
Is there an existing issue for this?
- [X] I have searched the existing issues
Describe the bug
I have a page in which there exists quite a few number of inputs, mainly of type BitTextField. Typnig into fields is laggy.
Note that this issue is specific to when interactivity location is client-side (CSR).
Time consumed for processing each keypress event, is completely proportional to how big the page in terms of number of input elements is. (If I comment out some inputs, the rest responds more quickly)
Comparision:
I run profiler, for two pages. Both pages are the same in terms of number of input fields. The first one uses BitTextField and the other used input.
Results of page with BitTextField:
Results of page with native inputs:
In page with native elements, keypress consumes 3ms
In page with BitTextField: keypress consumes 400ms
Things I tried that didn't help:
1. Override ShourRender:
Even in case ShouldRender is set to return false and the page is rendered only and exactly once, we still have the problem. So despite the fact that lots of optimizations are about reducing number of rerenders, this seems not to be the soruce fo lag in our case.
use of @onkeypress:stopPropagation
I tried, did not have any affect.
use of ValueExpression and ValueChanged instead of the @bind-Value directive.
It did help, buy only in case the number of input elements is not big enough. I can provide a comparison result dedicated to this change if you need it.
Expected Behavior
I expect to have smooth typing experience in WASM.
Steps To Reproduce
No response
Exceptions (if any)
No response
.NET Version
8.0.205
Anything else?
No response
@ShahryarSaljoughi Thanks for contacting us. could you please provide the source code?
@msynk I'll deliver a minimal reproduction, having just those two pages used for comparison by June 8th.
@msynk Hi. Here is the source code: https://github.com/ShahryarSaljoughi/Issue7682
App is created using Bit.Boilerplate 8.8.1, with Admin template checked!
SDK Version is 8.0.205
Web app contains two pages (in addition to what already is inside the template): NativeBigForm and BitBigForm.
@ShahryarSaljoughi Thanks for your efforts on this issue. I investigated this problem and found the same results as your research. this problem only happens inside EditForms with a lot of inputs to validate. As soon as I removed the EditForm and related components the page was responsive as normal. It may be related to a situation that our components do redundant things in times that are not necessary which needs a lot more investigation from our side. I try to do these investigations ASAP and find a solution. Btw, resolving the issue (https://github.com/bitfoundation/bitplatform/issues/7660) might help resolve this problem.
@msynk I'll measure the performance as the #7660 is solved and let you if that issue ceases this one or not.
To later commers: So far I've built a software using Bit and can confirm that this not something happening all the time. For now for heavy forms the fastest solution is to stick to native elements.
@ShahryarSaljoughi the new prerelease is out there (v-8.10.0-pre-01), could you plz test this scenario again and let us know of the new result?
Hi.
I've tested the app. Here are the results:
- That annoying delay, is not sensed by me (the user)
- Each key down event, results in 11 ms of scripting which is perfect
- There is a considerable amount of scripting (162ms) before I type anything within the input, which I can't understand what it is, and what it's doing! Anyway, it is not sensible by the user and not a problem
The permance measurement is done based on V8.10 and the source code for that is in branch test of the same repository mentioned above.
Thank you for your great job.