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

Session: Blazor WebAssembly - Performanceoptimierungen fürs UI

Session: Blazor WebAssembly - Performanceoptimierungen fürs UI

Stockende UI, keine Reaktion nach dem Klick auf einen Button oder einer Eingabe in einem Feld – dies sind nur wenige Beispiele alltäglicher Probleme, die beim Benutzen von Clientanwendungen im Allgemeinen und bei Webanwendungen im Speziellen immer wieder auftreten können. In der Entwicklung von Webanwendungen, und so auch in der Entwicklung von Blazor WebAssembly SPAs, ist es wichtig, die Laufzeitperformance der Anwendung immer im Auge zu behalten und wenn nötig zu optimieren.

7a33106dde82ecc65a220eaf9d131222?s=128

Patrick Jahr

February 24, 2022
Tweet

More Decks by Patrick Jahr

Other Decks in Programming

Transcript

  1. Patrick Jahr https://thinktecture.com/patrick-jahr Session Blazor WebAssembly: Performanceoptimierungen fürs UI @jahr_patrick

    Developer Consultant
  2. Hello, it’s me. Patrick Jahr Developer Consultant @ Thinktecture AG

    E-Mail: patrick.jahr@thinktecture.com Twitter: @jahr_patrick Slides: https://thinktecture.com/patrick-jahr Blazor WebAssembly Performanceoptimierungen fürs UI Patrick Jahr
  3. - 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 Performanceoptimierungen fürs UI Motivation
  4. Listen virtualizierung Render Prozess Clevere Komponenten Render- Fragments Events- Reaction

    Resümee Blazor WebAssembly Performanceoptimierungen fürs UI
  5. Listen virtualizierung Render Prozess Clevere Komponenten Render- Fragments Events- Reaction

    Resümee Blazor WebAssembly Performanceoptimierungen fürs UI
  6. - 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 Performanceoptimierungen fürs UI Listenvirtualizierung
  7. Blazor WebAssembly Performanceoptimierungen fürs UI Listenvirtualizierung Zeile außerhalb des Sichtbereichs

    Zeile im Sichtbereich Zeile außerhalb des Sichtbereichs Zeile im Sichtbereich ... Zeile außerhalb des Sichtbereichs Zeile außerhalb des Sichtbereichs
  8. DEMO Blazor WebAssembly Performanceoptimierungen fürs UI

  9. Listen virtualizierung Render Prozess Clevere Komponenten Render- Fragments Events- Reaction

    Resümee Blazor WebAssembly Performanceoptimierungen fürs UI
  10. Blazor WebAssembly Performanceoptimierungen fürs UI Wann wird eine Komponente gerendert?

    Initialisierung Änderung von Parametern Änderung von Parametern der übergeordneten Komponente DOM-Events StateHasChanged()
  11. Blazor WebAssembly Performanceoptimierungen fürs UI 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
  12. Listen virtualizierung Render Prozess Clevere Komponenten Render- Fragments Events- Reaction

    Resümee Blazor WebAssembly Performanceoptimierungen fürs UI
  13. - ShouldRender prüft ob eine Komponente gerendert werden soll -

    Methode der Basisklasse ComponentBase - Default Wert true - Optimierung - Komponenten Re-Rendring über eigene Logik steuern - Leicht für primitiven Typen wie string, int oder bool als Parameter - Aufwändiger für komplexe Typen Blazor WebAssembly Performanceoptimierungen fürs UI Clevere Komponenten
  14. DEMO Blazor WebAssembly Performanceoptimierungen fürs UI

  15. Listen virtualizierung Render Prozess Clevere Komponenten Render- Fragments Events- Reaction

    Resümee Blazor WebAssembly Performanceoptimierungen fürs UI
  16. - Problem - Jede Komponente steht für sich alleine und

    wird auch jedes mal gerendert - Bei großen Verschachtelungen kann dies zu Performanceproblemen führen, da jede Instanz zu einem neuen Rendering führt - Optimierung - Komponenten durch leichtgewichtiges HTML-Fragment ersetzen - Ideal für statischen Inhalt, welcher nicht geändert werden muss - Grenzen - Keine Anpassung der Unterstuktur oder Auslösen von Events, da es sich hier um keine Komponente handelt Blazor WebAssembly Performanceoptimierungen fürs UI Render-Fragments
  17. Blazor WebAssembly Performanceoptimierungen fürs UI Render-Fragments Row 1 Row 3

    Row 2 Row 4 ... Row n Liste mit Komponenten Row 1 Row 3 Row 2 Row 4 ... Row n Liste mit RenderFragments
  18. DEMO Blazor WebAssembly Performanceoptimierungen fürs UI

  19. Listen virtualizierung Render Prozess Clevere Komponenten Render- Fragments Events- Reaction

    Resümee Blazor WebAssembly Performanceoptimierungen fürs UI
  20. Blazor WebAssembly Performanceoptimierungen fürs UI 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
  21. - Durch jedes 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-6.0#avoid-rerendering-after-handling-events- without-state-changes Blazor WebAssembly Performanceoptimierungen fürs UI Events-Reaction
  22. DEMO Blazor WebAssembly Performanceoptimierungen fürs UI

  23. - Wird das Re-Rendering benötigt nach einem Event: - Debounce

    Events - Throttle Events - Slice Events Blazor WebAssembly Performanceoptimierungen fürs UI Events-Reaction
  24. DEMO Blazor WebAssembly Performanceoptimierungen fürs UI

  25. Listen virtualizierung Render Prozess Clevere Komponenten Render- Fragments Events- Reaction

    Resümee Blazor WebAssembly Performanceoptimierungen fürs UI
  26. - Listenoptimierung durch Virtualize-Komponente - Muss meine Komponente wirklich immer

    gerendert werden? - Soll ein Event immer ein Re-Rendering triggern? Blazor WebAssembly Performanceoptimierungen fürs UI Resümee
  27. Vielen Dank für Ihre Aufmerksamkeit! Patrick Jahr @jahr_patrick patrick.jahr@thinktecture.com