If blocks ({#if}) in Svelte - Performance & Optimization

Performance: If blocks ({#if})

MEDIUM IMPACT

Controls conditional rendering which impacts DOM size and layout recalculations during state changes.

Showing or hiding UI elements based on user interaction

Svelte

{#if showContent}
  <div>Content</div>
{/if} <!-- element only in DOM when needed -->

Only renders elements when needed, reducing DOM nodes and layout recalculations.

📈 Performance GainReduces reflows and repaints, improving interaction responsiveness (INP)

Showing or hiding UI elements based on user interaction

Svelte

<div style="display: none">Content</div> <!-- always in DOM but hidden -->

Keeps all elements in the DOM even when hidden, causing unnecessary layout and paint work.

📉 Performance CostTriggers layout and paint for hidden elements, increasing INP and memory usage

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Using CSS display:none to hide elements	No DOM changes	No reflow triggered for hidden elements	Paint triggered for hidden elements	[X] Bad
Using {#if} to conditionally render elements	DOM nodes added/removed as needed	Single reflow per toggle	Paint only for visible elements	[OK] Good

Rendering Pipeline

The {#if} block controls whether elements exist in the DOM. When the condition changes, Svelte adds or removes nodes, triggering layout and paint updates.

→DOM Update

→Layout

→Paint

⚠️ BottleneckLayout stage due to adding/removing nodes causing reflows

Core Web Vital Affected

INP

Controls conditional rendering which impacts DOM size and layout recalculations during state changes.

Optimization Tips

1Use {#if} blocks to add/remove elements instead of hiding with CSS to reduce layout and paint cost.

2Avoid toggling {#if} conditions too frequently to prevent layout thrashing.

3Keep {#if} blocks simple and avoid deep nesting for better rendering performance.

Performance Quiz - 3 Questions

What is the main performance benefit of using Svelte's {#if} block instead of hiding elements with CSS?

A Elements are removed from the DOM, reducing layout and paint work

B CSS display:none is faster because it avoids DOM changes

C Both have the same performance impact

D {#if} blocks increase bundle size significantly

DevTools: Performance

How to check: Record a performance profile while toggling the {#if} condition. Look for layout and paint events in the flame chart.

What to look for: Fewer layout and paint events when using {#if} compared to toggling CSS display.