Blazor Performance Diagnostics for Re-Rendering and Execution times.
- Dominant language
- C#
- Stars
- 38.4k
- Forks
- 10.9k
- Avg merge
- 2d 6h
- Merged PRs (30d)
- 290
Description
## The Problem:
Blazor Performance problems often arise becaues of too frequent and unintended Re-Renders:
For example:
- Unexpected Parameters changes: A objekt-parameter is recreated in the render loop and causes rerenders because it is a parameter change. (No-nos like passing lambdas as parameters)
- One Child Component for some reason is rerendered 10 times on changes.
- Some component maybe throws unintended events which caues rerenders.
- A costly operation (Rest call) is executed while wating for the task to complete multiple renders happen.
- A REST Call is made in OnParametersSet() or OnAfterRender() and by error this rest call is executed multiple times since unexpected Rerenders.
With one Component this can be debugged with console messages in OnParametersSet() or OnAfterRender, but in case of a complex render three with different components this gets quite compilcated to diagnose Performance Bottlenecks.
Also it is often difficult to see which changes cause rerenders in child components.
Or which await calls for for responses from Webservices also cause rerenders between initiating the call and completing the call.
## Potential Solution:
Some possiblily / Component / API, which allows globally to trace all OnSetParameters, Renders etc. with execution times, to see
if renders happen too frequent, how long it is executed and what caues the bottlenecks.
at first maybe an API to hook into the render events of all components would be maybe already enough. Otherwise I would need make a custom ComponentBase class which traces all Steps like BuildRenderTree() or OnAfterRender().
## Example
A example output log
```
Navigation.Component1 InitalizeAsync() took 100 Milliseconds
Navigation.Component1 Inital Render:
Navigation.Component1 BuildRenderTree() took 10 milliseconds
Navigation.Component1.SubComponent Initalize() took 400 milliseconds
Navigation.Component1 Inital Render:
Navigation.Component1 Render because parameter change.
Navigation.Component1.SubComponent BuildRenderTree() took 10 milliseconds
Navigation.Component1 Render because parameter change.
Navigation.Component1.SubComponent BuildRenderTree() took 10 milliseconds
Navigation.Component1 Render because parameter change.
Navigation.Component1.SubComponent BuildRenderTree() took 10 milliseconds
Navigation.Component1 Render because eventhanlder onclick
Navigation.Component1.SubComponent BuildRenderTree() took 10 milliseconds
```
A integration into the Performance Monitor is maybe possible in Blazor Server Side but on the Blazor Webassembly side
only general Browser tools for Webassembly would be possible. Of which I am not aware of yet.
Contributor guide
Assessment
This issue has not been assessed yet.