Why components are the building blocks in Svelte - Performance Evidence

Performance: Why components are the building blocks

MEDIUM IMPACT

This concept affects how efficiently the page loads and updates by controlling how much of the UI the browser must render or re-render.

Building a user interface with reusable parts

Svelte

<script>
  import Counter from './Counter.svelte';
</script>
<div>
  <Counter />
  <p>Other unrelated content</p>
</div>

<!-- Counter.svelte -->
<script>
  let count = 0;
</script>
<button on:click={() => count++}>Click me</button>
<p>{count}</p>

Splitting UI into smaller components isolates updates so only the counter part re-renders on state change.

📈 Performance Gainonly the Counter component re-renders, reducing DOM updates and improving interaction speed

Building a user interface with reusable parts

Svelte

<script>
  let count = 0;
</script>
<div>
  <button on:click={() => count++}>Click me</button>
  <p>{count}</p>
  <p>Other unrelated content</p>
</div>

All UI is in one big block, so any state change causes the entire block to re-render, even parts that don't need updating.

📉 Performance Costtriggers full component re-render on every state change, causing unnecessary DOM updates

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Single large component	Many nodes updated on any change	Multiple reflows per update	High paint cost	[X] Bad
Small isolated components	Only relevant nodes updated	Single reflow per component update	Low paint cost	[OK] Good

Rendering Pipeline

When a component's state changes, Svelte updates only that component's DOM nodes instead of the whole page, minimizing layout recalculations and paints.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout and Paint stages due to unnecessary DOM updates when components are too large or not isolated

Core Web Vital Affected

INP

This concept affects how efficiently the page loads and updates by controlling how much of the UI the browser must render or re-render.

Optimization Tips

1Split UI into small components to limit DOM updates on state changes.

2Avoid large components that re-render many nodes unnecessarily.

3Use component isolation to reduce layout and paint costs.

Performance Quiz - 3 Questions

Why does splitting UI into smaller components improve performance?

A Because only the changed component re-renders, reducing DOM updates

B Because it increases the total number of DOM nodes

C Because it forces the browser to reload CSS

D Because it disables JavaScript event listeners

DevTools: Performance

How to check: Record a profile while interacting with the UI, then inspect the flame chart to see how many components re-render and how long layout and paint take.

What to look for: Look for minimal and localized DOM updates and short layout/paint times indicating efficient component updates.