Why events drive user interaction in Svelte - Performance Evidence

Performance: Why events drive user interaction

HIGH IMPACT

This concept affects how quickly the page responds to user actions and how smoothly interactions feel.

Handling user clicks on multiple buttons

Svelte

function handleClick() {
  requestAnimationFrame(() => {
    console.log('Clicked');
  });
}
document.querySelectorAll('button').forEach(btn => {
  btn.addEventListener('click', handleClick);
});

Defers heavy work to the next frame, keeping UI responsive and fast.

📈 Performance GainReduces input delay, keeps main thread free for rendering

Handling user clicks on multiple buttons

Svelte

document.querySelectorAll('button').forEach(btn => {
  btn.addEventListener('click', () => {
    // heavy logic
    for(let i=0; i<1000000; i++) {}
    console.log('Clicked');
  });
});

Attaching heavy logic directly inside each event listener blocks the main thread, causing slow response.

📉 Performance CostBlocks rendering for 100+ ms on each click, causing input delay

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Heavy synchronous event handler	Minimal	Triggers 1 reflow if layout changes	High paint cost due to blocking	[X] Bad
Lightweight event handler with deferred work	Minimal	Single reflow if needed	Low paint cost, smooth interaction	[OK] Good

Rendering Pipeline

When a user event occurs, the browser processes the event, runs the event handler code, then updates styles and layout if needed before painting the changes.

→Event Handling

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckEvent Handling with heavy synchronous code blocks the main thread delaying rendering.

Core Web Vital Affected

INP

This concept affects how quickly the page responds to user actions and how smoothly interactions feel.

Optimization Tips

1Keep event handlers short and fast to avoid blocking the main thread.

2Defer heavy computations using requestAnimationFrame or async methods.

3Avoid adding multiple listeners for the same event unnecessarily.

Performance Quiz - 3 Questions

What is the main performance risk of heavy synchronous code inside event handlers?

A It causes layout shifts

B It blocks the main thread causing input delay

C It increases bundle size

D It reduces network speed

DevTools: Performance

How to check: Record a performance profile while interacting with the page. Look for long tasks during event handling.

What to look for: Long tasks blocking main thread during clicks indicate slow event handlers causing input delay.