Else and else-if blocks in Svelte - Performance & Optimization

Performance: Else and else-if blocks

MEDIUM IMPACT

This affects how the browser updates the DOM when conditionally rendering content, impacting interaction responsiveness and visual stability.

Conditionally rendering mutually exclusive content blocks

Svelte

<script>
  let status = 'loading';
</script>

{#if status === 'loading'}
  <p>Loading...</p>
{:else if status === 'error'}
  <p>Error occurred.</p>
{:else}
  <p>Data loaded.</p>
{/if}

Using else-if and else blocks ensures only one DOM branch is active, reducing DOM operations and reflows.

📈 Performance GainTriggers a single DOM update and reflow per status change, improving interaction responsiveness.

Conditionally rendering mutually exclusive content blocks

Svelte

<script>
  let status = 'loading';
</script>

{#if status === 'loading'}
  <p>Loading...</p>
{/if}

{#if status === 'error'}
  <p>Error occurred.</p>
{/if}

{#if status === 'success'}
  <p>Data loaded.</p>
{/if}

Multiple separate if blocks cause Svelte to create and check multiple independent DOM nodes, leading to unnecessary DOM updates and reflows.

📉 Performance CostTriggers multiple DOM insertions and removals on status change, causing up to 3 reflows per update.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Separate if blocks for mutually exclusive content	Multiple nodes created and destroyed	Up to 3 reflows per update	High paint cost due to multiple DOM changes	[X] Bad
Single if block with else-if and else	Only one node created/destroyed at a time	Single reflow per update	Lower paint cost with minimal DOM changes	[OK] Good

Rendering Pipeline

Svelte compiles else and else-if blocks into mutually exclusive DOM branches. When the condition changes, only the active branch is mounted or updated, minimizing layout recalculations and paints.

→DOM Operations

→Layout

→Paint

⚠️ BottleneckLayout (reflows caused by DOM insertions/removals)

Core Web Vital Affected

INP

This affects how the browser updates the DOM when conditionally rendering content, impacting interaction responsiveness and visual stability.

Optimization Tips

1Use else and else-if blocks to render only one conditional branch at a time.

2Avoid multiple separate if blocks for mutually exclusive content to reduce DOM thrashing.

3Minimize DOM insertions and removals to improve interaction responsiveness (INP).

Performance Quiz - 3 Questions

Why is using else-if blocks better than multiple separate if blocks in Svelte?

A Because else-if blocks load all content at once, improving load time.

B Because else-if blocks render only one branch, reducing DOM updates and reflows.

C Because separate if blocks prevent any DOM updates.

D Because else-if blocks increase bundle size but improve style calculation.

DevTools: Performance

How to check: Record a performance profile while changing the condition that controls the blocks. Look for the number of layout and paint events triggered.

What to look for: Fewer layout and paint events indicate better performance with else-if blocks compared to multiple separate if blocks.