Common action patterns (click-outside, tooltip) in Svelte - Performance & Optimization

Performance: Common action patterns (click-outside, tooltip)

MEDIUM IMPACT

These patterns affect interaction responsiveness and visual stability by managing event listeners and DOM updates efficiently.

Detecting clicks outside an element to close a tooltip or dropdown

Svelte

import { onMount, onDestroy } from 'svelte';

onMount(() => {
  const handleClick = event => {
    if (!element.contains(event.target)) {
      closeTooltip();
    }
  };
  window.addEventListener('click', handleClick);
  onDestroy(() => window.removeEventListener('click', handleClick));
});

Adds a single global listener with proper cleanup to avoid leaks and redundant processing.

📈 Performance GainSingle listener with cleanup reduces memory use and event handling overhead.

Detecting clicks outside an element to close a tooltip or dropdown

Svelte

window.addEventListener('click', (event) => {
  if (!element.contains(event.target)) {
    closeTooltip();
  }
});

Attaches a global click listener without cleanup, causing memory leaks and multiple handlers if component re-renders.

📉 Performance CostAdds multiple global listeners on re-renders, increasing memory use and event processing time.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Global click listener without cleanup	Multiple listeners added	Multiple reflows on event	High paint cost on updates	[X] Bad
Global click listener with cleanup	Single listener active	Single reflow per event	Moderate paint cost	[OK] Good
Tooltip shown via JS reactivity	DOM nodes added/removed	Reflow and repaint on hover	Moderate paint cost	[!] OK
Tooltip shown via CSS hover	No DOM changes	No reflows on hover	Low paint cost	[OK] Good

Rendering Pipeline

Click-outside and tooltip patterns involve event handling, style recalculation, layout, and paint stages. Efficient event listener management and CSS-based visibility reduce costly layout and paint operations.

→Event Handling

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout and Paint caused by DOM updates and style changes triggered by JavaScript events.

Core Web Vital Affected

INP, CLS

These patterns affect interaction responsiveness and visual stability by managing event listeners and DOM updates efficiently.

Optimization Tips

1Always remove global event listeners when components unmount to prevent memory leaks.

2Prefer CSS hover for showing/hiding tooltips to avoid layout thrashing.

3Minimize DOM changes on user interactions to keep input responsiveness high.

Performance Quiz - 3 Questions

What is the main performance risk of adding a global click listener inside a Svelte component without cleanup?

A Memory leaks and multiple event handlers slowing interaction

B Faster event handling due to multiple listeners

C No impact on performance

D Improves layout stability

DevTools: Performance

How to check: Record a session while interacting with the tooltip or clicking outside. Look for event handler counts and layout/paint timings.

What to look for: Check for multiple event listeners in the Event Listeners tab and long layout or paint tasks in the flame chart indicating inefficiency.