Named actions in Svelte - Performance & Optimization

Performance: Named actions

MEDIUM IMPACT

Named actions affect how efficiently DOM elements are enhanced with behavior, impacting interaction responsiveness and layout stability.

Attaching reusable behavior to DOM elements in Svelte

Svelte

function focus(node, params) {
  if (params?.shouldFocus) {
    node.focus();
  }
  return {
    update(params) {
      if (params?.shouldFocus) {
        node.focus();
      }
    }
  };
}

// Usage in component
<input use:focus={{ shouldFocus: true }} />

Focus is only applied when needed, reducing unnecessary DOM operations and layout recalculations.

📈 Performance GainSingle reflow on initial focus, no repeated layout thrashing on updates.

Attaching reusable behavior to DOM elements in Svelte

Svelte

function focus(node) {
  node.focus();
  return {
    update() {
      node.focus();
    }
  };
}

// Usage in component (with frequently changing param)
<input use:focus={counter} />
<!-- counter changes frequently, triggering update every time -->

This action forces focus on every action update (when params change), causing repeated layout recalculations and potential input focus flicker.

📉 Performance CostTriggers multiple reflows on each update, increasing INP and causing input lag.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Unconditional focus on update	Multiple focus calls	Multiple reflows per update	High paint cost due to layout shifts	[X] Bad
Conditional focus only when needed	Single focus call	Single reflow on initial focus	Low paint cost, stable layout	[OK] Good

Rendering Pipeline

Named actions run during the update phase of Svelte components, modifying DOM nodes. If they cause style or layout changes, they trigger reflows and repaints.

→Update

→Layout

→Paint

⚠️ BottleneckLayout (reflow) caused by DOM changes in action update calls

Core Web Vital Affected

INP

Named actions affect how efficiently DOM elements are enhanced with behavior, impacting interaction responsiveness and layout stability.

Optimization Tips

1Avoid unconditional DOM updates inside named actions.

2Use parameters to control when actions update the DOM.

3Monitor reflows caused by actions using browser DevTools.

Performance Quiz - 3 Questions

What is the main performance risk when a named action's update function unconditionally updates the DOM every time its parameters change?

A It delays the initial page load (LCP).

B It causes repeated layout recalculations (reflows), slowing interaction responsiveness.

C It increases the JavaScript bundle size significantly.

D It causes cumulative layout shifts (CLS).

DevTools: Performance

How to check: Record a performance profile while interacting with the component using named actions. Look for layout thrashing or repeated style recalculations.

What to look for: Check for multiple Layout events and long tasks caused by action updates triggering reflows.