Performance and size – Blazor in depth (W8, lesson 7)

What you learn in this lesson

measure before every change, saying what a measurement expresses and what it does not

render measurably less with parameters of simple types, @key and ShouldRender

build a long list with Virtualize and ItemsProvider so that only a window is created and only that window is read

classify the size and cost of the WebAssembly bundle with trimming, lazy loading, compression and AOT

use the memory per circuit as a planning figure for Interactive Server

A page that is fast for 45 appointments does not have to be fast for 50,000, and an island that responds instantly on the development machine may take a long time to load on a phone. Blazor has few levers for this: how often it renders, how much is in the document at once, what the browser has to load, and what each connection costs on the server. This lesson shows each lever with a measurement you can check yourself, and says explicitly what was not measured.

Where the Kladde stands

The lesson presupposes "Choosing and justifying render modes" and "State: prerendering, persistence, reconnecting", that is, the decision folder docs/decisions.md with the mode of each page. From K2 you know the appointment list with QuickGrid and ItemsProvider (lesson 2.5.9, "Lists with QuickGrid", 45 appointments, 20 per page), the figures for the WebAssembly island (lesson 2.5.10, "Interactive islands with WebAssembly") and the component tests (lesson 2.7.6, "Component tests with bUnit"). New is the appointment list with 50,000 rows in src/Kladde.Web/Components/Appointments. The source GeneratedAppointments sits behind IAppointmentSource for your database (in K2 through EF Core). Keep your names and carry the steps over.

What you learn in this lesson

Where the Kladde stands

This lesson belongs to course W8