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.

Practice

1. What is the main purpose of using svelte:window in a Svelte component?

easy

A. To style the window element with CSS

B. To create a new browser window

C. To listen to events on the browser window like resize or scroll

D. To manage component state internally

Solution

1. Step 1: Understand svelte:window usage

   svelte:window is a special element in Svelte used to listen to events on the browser window object.

2. Step 2: Identify the correct purpose

   It does not create windows or style elements but listens to events like resize or scroll on the window.

3. Final Answer:

   To listen to events on the browser window like resize or scroll -> Option C

4. Quick Check:

   svelte:window listens to window events [OK]

Hint: Remember: svelte:window listens to window events only [OK]

Common Mistakes:

• Thinking it creates or styles windows
• Confusing with component state management
• Using it to listen to DOM element events

2. Which of the following is the correct syntax to listen for the window's resize event using svelte:window?

easy

A. <div on:resize={handleResize}></div>

B. <svelte:window on:resize={handleResize} />

C. <window onresize={handleResize}></window>

D. <svelte:window bind:resize={handleResize} />

Solution

1. Step 1: Recall correct event binding syntax in Svelte

   In Svelte, event listeners use on:eventName={handler} syntax.

2. Step 2: Apply to svelte:window

   The correct way to listen to window resize is <svelte:window on:resize={handleResize} />.

3. Final Answer:

   <svelte:window on:resize={handleResize} /> -> Option B

4. Quick Check:

   Use on:event on svelte:window [OK]

Hint: Use on:event syntax on svelte:window [OK]

Common Mistakes:

• Using HTML window tag which doesn't exist
• Trying to bind event with bind: instead of on:
• Attaching events to div instead of svelte:window

3. Given this Svelte code snippet, what will be the value of width after resizing the browser window?

  <script>
    let width = 0;
    function updateWidth(event) {
      width = event.currentTarget.innerWidth;
    }
  </script>

  <svelte:window on:resize={updateWidth} />

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

medium

A. It updates to the current window width on every resize

B. It stays 0 because width is never updated

C. It throws an error because event.currentTarget is undefined

D. It updates only once when the component loads

Solution

1. Step 1: Understand the event handler logic

   The updateWidth function sets width to event.currentTarget.innerWidth, which is the window's width.

2. Step 2: Recognize svelte:window event behavior

   On every resize event, updateWidth runs, updating width reactively.

3. Final Answer:

   It updates to the current window width on every resize -> Option A

4. Quick Check:

   Resize triggers updateWidth, updating width [OK]

Hint: Resize triggers handler updating width reactively [OK]

Common Mistakes:

• Assuming width never changes without explicit initialization
• Confusing event.currentTarget with event.target
• Thinking event.currentTarget is undefined in this context

4. Identify the error in this Svelte code that tries to listen for the window scroll event:

  <script>
    let scrollY = 0;
    function onScroll() {
      scrollY = window.scrollY;
    }
  </script>

  <svelte:window on:scroll={onScroll}></svelte:window>

  <p>Scroll position: {scrollY}</p>

medium

A. Not binding scrollY with bind:scrollY

B. Missing event parameter in onScroll function

C. Accessing window.scrollY inside the handler is invalid

D. Using <svelte:window> with a closing tag instead of self-closing

Solution

1. Step 1: Check svelte:window tag usage

   svelte:window is a special element that must be self-closing when used to listen to events.

2. Step 2: Identify the tag error

   The code uses an opening and closing tag <svelte:window></svelte:window>, which is invalid syntax for this element.

3. Final Answer:

   Using <svelte:window> with a closing tag instead of self-closing -> Option D

4. Quick Check:

   svelte:window must be self-closing [OK]

Hint: Always self-close svelte:window when listening to events [OK]

Common Mistakes:

• Trying to use opening and closing tags for svelte:window
• Thinking bind: is needed for event values
• Assuming window.scrollY is inaccessible in handler

5. You want to track both the window's width and height reactively using svelte:window. Which code snippet correctly updates both values on resize events?

hard

A. <script>
let width = 0, height = 0;
function updateSize() {
width = window.innerWidth;
height = window.innerHeight;
}
</script>
<svelte:window on:resize={updateSize} />

B. <script>
let width = 0, height = 0;
function updateSize(event) {
width = event.currentTarget.innerWidth;
height = event.currentTarget.innerHeight;
}
</script>
<svelte:window on:resize={updateSize} />

C. <script>
let width = 0, height = 0;
<svelte:window bind:innerWidth={width} bind:innerHeight={height} />
</script>

D. <script>
let width = 0, height = 0;
function updateSize(event) {
width = event.target.innerWidth;
height = event.target.innerHeight;
}
</script>
<svelte:window on:resize={updateSize} />

Solution

1. Step 1: Understand event object properties

   In window resize events, event.currentTarget and event.target may not reliably provide innerWidth and innerHeight. Using window.innerWidth and window.innerHeight is safer.

2. Step 2: Check each option

   <script> let width = 0, height = 0; function updateSize(event) { width = event.currentTarget.innerWidth; height = event.currentTarget.innerHeight; } </script> <svelte:window on:resize={updateSize} /> uses event.currentTarget which may not always be the window. <script> let width = 0, height = 0; function updateSize() { width = window.innerWidth; height = window.innerHeight; } </script> <svelte:window on:resize={updateSize} /> uses window.innerWidth and window.innerHeight directly, which is correct. <script> let width = 0, height = 0; <svelte:window bind:innerWidth={width} bind:innerHeight={height} /> </script> tries to bind non-bindable properties. <script> let width = 0, height = 0; function updateSize(event) { width = event.target.innerWidth; height = event.target.innerHeight; } </script> <svelte:window on:resize={updateSize} /> uses event.target which is unreliable.

3. Final Answer:

   Use window.innerWidth and window.innerHeight inside the handler -> Option A

4. Quick Check:

   Access window size via window.innerWidth in handler [OK]

Hint: Use window.innerWidth inside handler, not event properties [OK]

Common Mistakes:

• Using event.currentTarget or event.target for window size
• Trying to bind window properties directly
• Assuming event object always has innerWidth/innerHeight