Blazor WebAssembly: Performance-Optimierung in .NET 5

Stockende UI, langsame Reaktion nach dem Klick auf einen Button oder einer Eingabe in einem Feld – dies sind nur wenige Beispiele für alltägliche Probleme, die beim Benutzen von Client-Anwendungen im Allgemeinen, und bei Webanwendungen im Speziellen immer wieder auftreten können. Bei der Entwicklung von SPAs, und so auch bei Blazor WebAssembly SPAs, ist es wichtig, die Laufzeit-Performance der Anwendung immer im Auge zu behalten und wenn nötig zu optimieren.

Transcript

1. Blazor WebAssembly Performance Optimierung in .NET 5 Patrick Jahr @jahr_patrick Architekt
2. Hello, it’s me. Patrick Jahr Architekt @ Thinktecture AG E-Mail: patrick.jahr@thinktecture.com Twitter: @jahr_patrick Slides: https://thinktecture.com/patrick-jahr Blazor WebAssembly Performance Optimierung in .NET 5 Patrick Jahr
3. Motivation Render Prozess Komponenten Events Listen Resumé Blazor WebAssembly Performance Optimierung in .NET 5 P T
4. - Stockende UI - Keine Reaktion nach einem Klick auf einen Button - Lange „unsichtbare“ Ladezeiten → Nur was sich flüssig bedienen lässt, nutzen Anwender auch gerne Blazor WebAssembly Performance Optimierung in .NET 5 Motivation
5. DEMO Blazor WebAssembly Forms in Action
6. Blazor WebAssembly Performance Optimierung in .NET 5 Motivation Render Prozess Komponenten Events Listen Resumé
7. - Initialisierung - Änderung von Parameter des Parent - Parameter der Komponente sich ändern - Aufruf von StateHasChanged() - Nach jedem Event wie z.B. @onclick oder @oninput Blazor WebAssembly Performance Optimierung in .NET 5 Wann wird eine Komponente gerendert?
8. Blazor WebAssembly Performance Optimierung in .NET 5 Erstes Rendern? || ShouldRender() Render Component OnAfterRender/ OnAfterRenderAsync Render tree wird erstellt und an den DOM gesendet DOM Update Rendern wird beendet Nein Ja 1 2a 2b 3 4
9. Blazor WebAssembly Performance Optimierung in .NET 5 Motivation Render Prozess Komponenten Events Listen Resumé P
10. - ShouldRender prüft ob eine Komponente gerendert werden soll - Methode der Basisklasse ComponentBase - Default Wert true - Optimierung - Nutzen von primitiven Typen wie string, int oder bool bei Parametern - ShouldRender überschreiben Blazor WebAssembly Performance Optimierung in .NET 5 Komponente
11. DEMO Blazor WebAssembly Forms in Action
12. Blazor WebAssembly Performance Optimierung in .NET 5 Motivation Render Prozess Komponenten Events Listen Resumé
13. Blazor WebAssembly Forms in Action Erstes Rendern? || ShouldRender() DOM Event oninput, onclick, onblur,... Event Handler ausführen Render Component OnAfterRender/ OnAfterRenderAsync Render tree wird erstellt und an den DOM gesendet DOM Update Rendern wird beendet Nein Ja 1 2 3 4a 4b 5 6
14. - Bei jedem Event wird die Methode HandleEventAsync des Interface IHandleEvent in der Basisklasse ComponentBase aufgerufen - Optimierung - Interface IHandleEvent in der Komponenten Klasse implementieren - Einsatz der Hilfsklasse EventUtils, die von Microsoft angeboten wird - Hinweis: Die Hilfsklasse muss dem Projekt selbst hinzugefügt werden EventUtils: https://docs.microsoft.com/de-de/aspnet/core/blazor/webassembly-performance-best-practices?view=aspnetcore-5.0#avoid-rerendering-after-handling-events- without-state-changes Blazor WebAssembly Performance Optimierung in .NET 5 Events
15. - Wird das Re-Rendering benötigt nach einem Event: - Debounce Events - Throttle Events - Slice Events Blazor WebAssembly Performance Optimierung in .NET 5 Events
16. DEMO Blazor WebAssembly Forms in Action
17. Blazor WebAssembly Performance Optimierung in .NET 5 Motivation Render Prozess Komponenten Events Listen Resumé
18. - Müssen alle Elemente im DOM geladen sein? - Wie schnell komm ich an meine Daten für die Liste? - Optimierung: Virtualize Komponente - Nur der Sichtbereich wird geladen - Lazy Loading - Ladeanimation Blazor WebAssembly Performance Optimierung in .NET 5 Listen
19. DEMO Blazor WebAssembly Forms in Action
20. Blazor WebAssembly Performance Optimierung in .NET 5 Motivation Render Prozess Komponenten Events Listen Resumé
21. - Muss meine Komponente wirklich immer gerendert werden? - Soll ein Event immer ein Re-Rendering triggern? - Listenoptimierung durch Virtualize-Komponente Blazor WebAssembly Performance Optimierung in .NET 5 Resumé
22. Vielen Dank für Ihre Aufmerksamkeit! Patrick Jahr @jahr_patrick patrick.jahr@thinktecture.com