Blazor WebAssembly: Performance-Optimierungen fürs UI

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. Patrick Jahr
   Blazor WebAssembly:
   Performanceoptimierungen fürs UI
   @jahr_patrick
   Developer Consultant
   

   View Slide

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
   

   View Slide

3. DEMO
   Blazor WebAssembly
   Performanceoptimierungen fürs UI
   P
   

   View Slide

4. Listen
   virtualisierung
   Render
   Prozess
   Clevere
   Komponenten
   Events-
   Reaction
   Resümee
   Blazor WebAssembly
   Performanceoptimierungen fürs UI
   P
   

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide

8. DEMO
   Blazor WebAssembly
   Performanceoptimierungen fürs UI
   

   View Slide

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

   View Slide

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()
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

14. DEMO
    Blazor WebAssembly
    Performanceoptimierungen fürs UI
    

    View Slide

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

    View Slide

16. 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
    

    View Slide

17. - 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
    

    View Slide

18. DEMO
    Blazor WebAssembly
    Performanceoptimierungen fürs UI
    

    View Slide

19. Was tun wenn das Re-Rendering nach einem Event benötigt wird?
    - Debounce Events
    - Throttle Events
    - Slice Events
    Blazor WebAssembly
    Performanceoptimierungen fürs UI
    Events-Reaction
    

    View Slide

20. DEMO
    Blazor WebAssembly
    Performanceoptimierungen fürs UI
    

    View Slide

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

    View Slide

22. - 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
    

    View Slide

23. Vielen Dank
    für Ihre Aufmerksamkeit!
    Patrick Jahr
    @jahr_patrick
    patrick.jahr@thinktecture.com
    

    View Slide