Skip to content

MudItem: Build only the breakpoint classes that are set - #13738

Merged
danielchalmers merged 2 commits into
MudBlazor:devfrom
danielchalmers:perf/muditem-lazy-breakpoint-classes
Aug 27, 2026
Merged

danielchalmers merged 2 commits into
MudBlazor:devfrom
danielchalmers:perf/muditem-lazy-breakpoint-classes

Conversation

@danielchalmers

Copy link
Copy Markdown
Member

Problem

Every breakpoint class was passed to AddClass as an interpolated string with its condition as a second argument:

.AddClass($"mud-grid-item-xs-{xs}", xs != 0)

Arguments are evaluated before the call, so the string is formatted whether or not the condition holds. Most items set one breakpoint out of six, so five are built and thrown away on every render.

Fix

Build each class inside its condition. The markup is unchanged.

Numbers

200 MudItem with only xs set, allocation measured on a bare Renderer with GC.GetTotalAllocatedBytes, median of 5:

before after
mount 478 KB 416 KB
re-render 177 KB 115 KB

That is 310 B less per item on re-render, which is the repeated cost.

Scope

Only MudItem, deliberately. The same pattern appears elsewhere, but measuring it showed the saving comes from formatting a value into the string, not from the interpolation itself, so it only pays where a number or enum is formatted into a class that usually is not used:

  • MudStack has five conditional interpolated classes and the same change made no measurable difference at all (391 KB and 108 KB either way), because its values are null when unset and a null appends nothing.
  • MudInputCssHelper likewise: 1026 KB against 1025 KB across a 20 field form.
  • MudIconButton has six such classes, but at ~9.9 KB per instance the saving would be under 4%.

MudItem stands out because it is a very small component whose class chain is most of what it does, and because six integer breakpoints are formatted where at most a couple are used.

Verification

Class output is identical for none, xs, xs+md, all six breakpoints, xxl only, xs+Class, and Class only.

The Grid documentation page renders 30 grid items with an identical class string on this branch and on dev (same hash, same 1053 characters), before and after moving the interactive sliders.

361 Grid tests and the full suite pass.

Each breakpoint class was passed to AddClass as an interpolated string with
its condition alongside, so the string was built whether or not the condition
held. Most items set one breakpoint out of six, so five were formatted and
thrown away on every render.

Building them inside the conditions cuts a 200-item grid from 478 to 416 KB
on mount and from 177 to 115 KB on re-render, with identical markup.
@mudbot mudbot Bot added performance Related to time/memory/CPU/allocation performance characteristics refactor Reorganizes code with no changes to the API or functionality in the main library or other benefits labels Aug 27, 2026
@danielchalmers danielchalmers removed the refactor Reorganizes code with no changes to the API or functionality in the main library or other benefits label Aug 27, 2026
@danielchalmers
danielchalmers merged commit 5e8e262 into MudBlazor:dev Aug 27, 2026
7 checks passed
@danielchalmers
danielchalmers deleted the perf/muditem-lazy-breakpoint-classes branch August 27, 2026 01:57
This was referenced Sep 14, 2026
This was referenced Sep 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

performance Related to time/memory/CPU/allocation performance characteristics

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant