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

Blazor WebAssembly: Performance-Optimierung in .NET 5

7a33106dde82ecc65a220eaf9d131222?s=47 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.

7a33106dde82ecc65a220eaf9d131222?s=128

Patrick Jahr

September 08, 2021
Tweet

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