Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Blazor WebAssembly: Performance-Optimierung in ...

Patrick Jahr
September 08, 2021

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.

Patrick Jahr

September 08, 2021
Tweet

More Decks by Patrick Jahr

Other Decks in Programming

Transcript

  1. Hello, it’s me. Patrick Jahr Architekt @ Thinktecture AG E-Mail:

    [email protected] Twitter: @jahr_patrick Slides: https://thinktecture.com/patrick-jahr Blazor WebAssembly Performance Optimierung in .NET 5 Patrick Jahr
  2. - 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
  3. - 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?
  4. 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
  5. - 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
  6. 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
  7. - 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
  8. - Wird das Re-Rendering benötigt nach einem Event: - Debounce

    Events - Throttle Events - Slice Events Blazor WebAssembly Performance Optimierung in .NET 5 Events
  9. - 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
  10. - 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é