Default actions in Svelte - Performance & Optimization

Performance: Default actions

MEDIUM IMPACT

This concept affects how quickly user interactions respond and how smoothly the page updates after events.

Handling user clicks without blocking default browser behavior

Svelte

function handleClick(event) {
  // Let default action happen immediately
  console.log('Immediate action');
  // Run slow code asynchronously without blocking
  setTimeout(() => {
    console.log('Delayed action');
  }, 1000);
}

<button on:click={handleClick}>Click me</button>

Allows browser to perform default action immediately, keeping input responsive while running slow code later.

📈 Performance GainImproves INP by avoiding blocking default actions

Handling user clicks without blocking default browser behavior

Svelte

function handleClick(event) {
  event.preventDefault();
  // heavy computation or slow code here
  setTimeout(() => {
    console.log('Delayed action');
  }, 1000);
}

<button on:click={handleClick}>Click me</button>

Preventing default action and running slow code delays browser's natural response, causing input lag.

📉 Performance CostBlocks interaction responsiveness, increasing INP by 1000ms

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Blocking default action with heavy JS	Minimal	0 immediate, delayed reflows possible	Low immediate, higher delayed	[X] Bad
Allowing default action, async heavy JS	Minimal	0 immediate	Low	[OK] Good

Rendering Pipeline

When a user event occurs, the browser first performs default actions like focusing or navigation. If JavaScript blocks or prevents these, the pipeline stalls, delaying rendering and interaction updates.

→Event Handling

→Layout

→Paint

⚠️ BottleneckEvent Handling stage when default actions are prevented and slow JS runs

Core Web Vital Affected

INP

This concept affects how quickly user interactions respond and how smoothly the page updates after events.

Optimization Tips

1Do not call event.preventDefault() unless you need to stop the browser's default behavior.

2Run heavy or slow code asynchronously to avoid blocking event handling.

3Let the browser perform default actions immediately to keep interactions smooth.

Performance Quiz - 3 Questions

What happens if you call event.preventDefault() and run slow code synchronously in a Svelte event handler?

A Page loads faster because JS blocks rendering.

B Input responsiveness decreases because default browser actions are delayed.

C No effect on performance.

D Browser skips default actions automatically.

DevTools: Performance

How to check: Record a performance profile while interacting with the element. Look for long tasks during event handling and delays before default actions.

What to look for: Long event handler durations and delayed paints indicate blocking default actions harming INP.