h function for creating vnodes in Vue - Performance & Optimization

Performance: h function for creating vnodes

MEDIUM IMPACT

This affects how Vue creates virtual DOM nodes, impacting rendering speed and memory usage during component updates.

Creating virtual DOM nodes in Vue components

Vue

import { h } from 'vue';

const items = ['Item 1', 'Item 2', 'Item 3'];

export default {
  render() {
    return h('div', {}, items.map(item => h('p', {}, item)));
  }
};

Using array mapping to generate vnodes reduces code repetition and allows Vue to optimize vnode diffing efficiently.

📈 Performance GainReduces CPU work by batching vnode creation, improving update speed and lowering interaction delay.

Creating virtual DOM nodes in Vue components

Vue

import { h } from 'vue';

export default {
  render() {
    return h('div', {}, [
      h('p', {}, 'Item 1'),
      h('p', {}, 'Item 2'),
      h('p', {}, 'Item 3')
    ]);
  }
};

Manually creating many vnode calls without abstraction causes repetitive vnode creation and can lead to more CPU work on updates.

📉 Performance CostTriggers multiple vnode creations and re-renders, increasing CPU usage and blocking rendering for tens of milliseconds on large lists.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Manual multiple h calls without abstraction	Many vnode creations	Multiple reflows on updates	Higher paint cost due to frequent DOM changes	[X] Bad
Using array map to batch vnode creation	Fewer vnode creations, batched	Single reflow per update batch	Lower paint cost with minimal DOM changes	[OK] Good

Rendering Pipeline

The h function creates virtual DOM nodes which Vue uses to compare with previous nodes. This diffing process determines minimal DOM updates.

→Virtual DOM Creation

→Diffing

→DOM Updates

⚠️ BottleneckVirtual DOM Creation and Diffing when many vnodes are created inefficiently

Core Web Vital Affected

INP

This affects how Vue creates virtual DOM nodes, impacting rendering speed and memory usage during component updates.

Optimization Tips

1Batch vnode creation using arrays or loops to reduce CPU overhead.

2Avoid repetitive manual vnode calls for similar elements.

3Profile vnode creation to detect and optimize slow rendering.

Performance Quiz - 3 Questions

What is the main performance benefit of using the h function efficiently in Vue?

A Triggers more reflows for better visuals

B Increases bundle size significantly

C Reduces CPU work by minimizing vnode creation

D Blocks rendering for longer to ensure accuracy

DevTools: Performance

How to check: Record a performance profile while interacting with the component, then inspect the scripting and rendering sections for vnode creation and DOM update times.

What to look for: Look for long scripting tasks related to vnode creation and multiple layout/repaint events indicating inefficient vnode handling.