Action parameters in Svelte - Performance & Optimization

Performance: Action parameters

MEDIUM IMPACT

This affects how efficiently event handlers and DOM manipulations run during user interactions.

Passing parameters to a Svelte action for DOM event handling

Svelte

function myAction(node, param) {
  node.textContent = param;
  return {
    update(newParam) {
      if (newParam !== param) {
        param = newParam;
        node.textContent = param;
      }
    }
  };
}

<div use:myAction="hello"></div>

This pattern updates the DOM only when the parameter changes, reducing unnecessary DOM writes and reflows.

📈 Performance Gainreduces reflows to only when parameter changes

Passing parameters to a Svelte action for DOM event handling

Svelte

function myAction(node) {
  return {
    update(param) {
      node.textContent = param;
    }
  };
}

<div use:myAction="hello"></div>

This pattern updates the DOM on every parameter change without checking if the parameter actually changed, causing unnecessary updates and potential reflows.

📉 Performance Costtriggers 1 reflow per parameter update

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Update DOM on every param change (no check)	Multiple DOM writes	Triggers reflow each update	Higher paint cost	[X] Bad
Update DOM only on param change	Minimal DOM writes	Reflow only when needed	Lower paint cost	[OK] Good

Rendering Pipeline

Action parameters affect the update phase where DOM nodes are manipulated. Efficient parameter handling minimizes layout recalculations and repaints.

→Update

→Layout

→Paint

⚠️ BottleneckLayout (reflows caused by DOM updates)

Core Web Vital Affected

INP

This affects how efficiently event handlers and DOM manipulations run during user interactions.

Optimization Tips

1Only update the DOM inside actions when parameters actually change.

2Avoid recreating action objects unnecessarily to reduce runtime overhead.

3Use browser DevTools Performance panel to monitor layout thrashing caused by action updates.

Performance Quiz - 3 Questions

What is the main performance benefit of checking parameter changes inside a Svelte action before updating the DOM?

A It reduces unnecessary DOM writes and reflows.

B It increases the number of event listeners.

C It delays the initial rendering of the component.

D It adds more JavaScript to the bundle size.

DevTools: Performance

How to check: Record a performance profile while interacting with the component using action parameters. Look for frequent Layout events during parameter updates.

What to look for: Fewer Layout and Recalculate Style events indicate better performance with action parameters.