When measuring web performance—especially on page load—it’s not always about a consistent metric, such as how quickly the entire HTML tree loads from the server. It’s helpful to think in terms of  perceived performance—do you understand what needs to be rendered now, and what can be rendered later? End users should never have to wait for something that, well, can wait.

The ASP.NET Core team recently rolled out  Blazor component virtualization, a technique for limiting UI rendering to the visible page elements only. You can easily leverage this through a built-in Virtualize component.

Here’s a common scenario: let’s say you have a requirement to list a bunch of items on a table, and you might be stuck with a lot of data. If you’re listing several thousand items on a page, users often have to sit and wait for the entire site to load. With Blazor component virtualization, the app will load only the records in the user’s window, then render more only when scrolling.

This post will discuss the following content.

• Prerequisites
• The “up and running in 30 seconds” solution
• Our sample app
• Additional parameters
• OverscanCount
• Lazy loading with ItemsProvider  and Placeholder
• ItemSize
• Reminder: this isn’t a catch-all
• Wrap up
• References

Heads up! This post assumes you have  some familiarity with Blazor, like how to create and render a basic component.

#blazor