Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Hello, it’s me. Patrick Jahr Developer Consultant @ Thinktecture AG E-Mail: [email protected] Twitter: @jahr_patrick Slides: https://thinktecture.com/patrick-jahr Blazor WebAssembly Performanceoptimierungen fürs UI Patrick Jahr

Slide 3

Slide 3 text

- 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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

- 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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

DEMO Blazor WebAssembly Performanceoptimierungen fürs UI

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Blazor WebAssembly Performanceoptimierungen fürs UI Wann wird eine Komponente gerendert? Initialisierung Änderung von Parametern Änderung von Parametern der übergeordneten Komponente DOM-Events StateHasChanged()

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

- 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

Slide 14

Slide 14 text

DEMO Blazor WebAssembly Performanceoptimierungen fürs UI

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

- 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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

DEMO Blazor WebAssembly Performanceoptimierungen fürs UI

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

- 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

Slide 22

Slide 22 text

DEMO Blazor WebAssembly Performanceoptimierungen fürs UI

Slide 23

Slide 23 text

- Wird das Re-Rendering benötigt nach einem Event: - Debounce Events - Throttle Events - Slice Events Blazor WebAssembly Performanceoptimierungen fürs UI Events-Reaction

Slide 24

Slide 24 text

DEMO Blazor WebAssembly Performanceoptimierungen fürs UI

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

- 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

Slide 27

Slide 27 text

Vielen Dank für Ihre Aufmerksamkeit! Patrick Jahr @jahr_patrick [email protected]