svelte:window for window events - Performance & Optimization

Performance: svelte:window for window events

MEDIUM IMPACT

This affects how efficiently window-level events are handled and how they impact page responsiveness and rendering.

Listening to window resize events in a Svelte component

Svelte

<script>
  let width = 0;
</script>

<svelte:window on:resize={() => width = window.innerWidth} />

<p>Window width: {width}</p>

Svelte automatically manages event listeners and updates state reactively, reducing boilerplate and risk of leaks.

📈 Performance GainSingle reactive update per event; no manual listener management; reduces memory leaks.

Listening to window resize events in a Svelte component

Svelte

<script>
  import { onMount, onDestroy } from 'svelte';
  let width = 0;
  function updateWidth() {
    width = window.innerWidth;
  }
  onMount(() => {
    window.addEventListener('resize', updateWidth);
  });
  onDestroy(() => {
    window.removeEventListener('resize', updateWidth);
  });
</script>

<p>Window width: {width}</p>

Manually adding and removing event listeners can lead to bugs if cleanup is missed and causes unnecessary reflows on every resize event.

📉 Performance CostTriggers multiple reflows on every resize event; risk of memory leaks if listeners are not removed.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Manual addEventListener/removeEventListener	Multiple listeners if not cleaned	Multiple reflows on each event	High paint cost on frequent events	[X] Bad
Using svelte:window event binding	Single reactive update	Reflow only if state changes affect layout	Lower paint cost due to optimized updates	[OK] Good

Rendering Pipeline

Window events captured by svelte:window trigger reactive updates in the component, causing style recalculation and layout only if the state changes affect the DOM.

→Event Handling

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout stage when reactive updates cause DOM changes on frequent window events like resize or scroll.

Core Web Vital Affected

INP

This affects how efficiently window-level events are handled and how they impact page responsiveness and rendering.

Optimization Tips

1Use svelte:window to bind window events for automatic listener management.

2Avoid heavy DOM updates inside window event handlers to reduce layout thrashing.

3Throttle or debounce frequent window events to improve responsiveness.

Performance Quiz - 3 Questions

What is a key performance benefit of using svelte:window for window events?

A It bundles all event handlers into a single JavaScript file.

B It prevents all reflows and repaints on window events.

C Svelte automatically manages event listeners and reactive updates efficiently.

D It disables window events until the component is visible.

DevTools: Performance

How to check: Record a performance profile while resizing the window or triggering the event. Look for event handler duration and layout recalculations.

What to look for: Check for excessive layout thrashing or long event handler times indicating inefficient event handling.