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

DDF-2023-Blazor WebAssembly: UI-Performance-Opt...

Patrick Jahr
May 02, 2023
61

DDF-2023-Blazor WebAssembly: UI-Performance-Optimierungen in .NET 7

Stockendes UI, keine Reaktion nach dem Klick auf einen Button oder einer Eingabe in einem Feld – das sind nur wenige Beispiele alltäglicher Probleme, die beim Benutzen von Clientanwendungen im Allgemeinen und bei Webanwendungen im Speziellen immer wieder auftreten. In der Entwicklung von Webanwendungen, 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. Patrick Jahr zeigt Ihnen, wie komponentenbasierte UIs in Blazor WebAssembly optimiert werden können, um dadurch eine für die Benutzer spürbar gute Geschwindigkeit und ein flüssigeres UI zu bekommen.

Patrick Jahr

May 02, 2023
Tweet

Transcript

  1. Hallo, das bin i. Patrick Jahr Developer Consultant @ Thinktecture

    AG E-Mail: [email protected] Twitter: @jahr_patrick Slides: https://thinktecture.com/patrick-jahr Blazor WebAssembly UI-Performance-Optimierungen in .NET 7 Patrick Jahr
  2. - 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 UI-Performance-Optimierungen in .NET 7 Virtualizierung
  3. Blazor WebAssembly UI-Performance-Optimierungen in .NET 7 Virtualizierung 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
  4. - Erstes Framework Data Grid - Microsoft.AspNetCore.Components.QuickGrid - (limited) customizeable

    - NOCH: Experimental Package - Hohe Performance bei der Daten Bindung - Queryable - Itemsprovider - EF Database Context Blazor WebAssembly UI-Performance-Optimierungen in .NET 7 EXPERIMENTAL: QuickGrid
  5. Listen virtualizierung Render Prozess Clevere Komponenten Render- Fragments Events- Reaction

    Resümee Blazor WebAssembly UI-Performance-Optimierungen in .NET 7
  6. Blazor WebAssembly UI-Performance-Optimierungen in .NET 7 Wann wird eine Komponente

    gerendert? Initialisierung Änderung von Parametern Änderung von Parametern der übergeordneten Komponente DOM-Events StateHasChanged()
  7. Blazor WebAssembly UI-Performance-Optimierungen in .NET 7 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
  8. - 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 UI-Performance-Optimierungen in .NET 7 Clevere Komponenten
  9. Blazor WebAssembly UI-Performance-Optimierungen in .NET 7 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
  10. - 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 UI-Performance-Optimierungen in .NET 7 Events-Reaction
  11. - Wird das Re-Rendering benötigt nach einem Event: - Debounce

    Events - Throttle Events - Slice Events - … Blazor WebAssembly UI-Performance-Optimierungen in .NET 7 Events-Reaction
  12. Listen virtualizierung Render Prozess Clevere Komponenten Render- Fragments Events- Reaction

    Resümee Blazor WebAssembly UI-Performance-Optimierungen in .NET 7
  13. - Listenoptimierung durch - Virtualize-Komponente - QuickGrid-Komponente (Experimental) - Muss

    meine Komponente wirklich immer gerendert werden? - Soll ein Event immer ein Re-Rendering triggern? Blazor WebAssembly UI-Performance-Optimierungen in .NET 7 Resümee