Render functions vs templates decision in Vue - Performance Comparison

Performance: Render functions vs templates decision

MEDIUM IMPACT

This affects how Vue compiles and renders components, impacting initial load time and runtime rendering speed.

Choosing between Vue templates and render functions for component rendering

Vue

<template>
  <div class="container">
    <p>Hello {{ name }}</p>
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

Templates are compiled by Vue into efficient render functions, improving maintainability and allowing Vue to optimize updates.

📈 Performance GainSaves developer time and reduces bugs; runtime performance is optimized by Vue's compiler.

Choosing between Vue templates and render functions for component rendering

Vue

import { h } from 'vue';
export default {
  render() {
    return h('div', { class: 'container' }, [
      h('p', 'Hello ' + this.name),
      h('ul', this.items.map(item => h('li', item)))
    ])
  }
}

Handwriting complex render functions can lead to verbose code and harder maintenance, increasing developer errors and slowing development.

📉 Performance CostNo significant runtime cost difference, but increases cognitive load and potential bugs.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Templates for most components	Minimal and optimized by Vue	Few reflows due to efficient updates	Low paint cost	[OK] Good
Handwritten render functions for simple UI	Same DOM operations but more complex code	Same reflows but harder to maintain	Low paint cost	[!] OK
Render functions for complex conditional logic	Fewer DOM operations by precise control	Reduced reflows	Lower paint cost	[OK] Good
Render functions for static content	Same DOM operations but larger bundle	Same reflows	Low paint cost	[X] Bad

Rendering Pipeline

Vue templates are compiled into render functions during build or runtime, which then create virtual DOM nodes. These virtual nodes are diffed and patched to update the real DOM efficiently.

→Template Compilation

→Virtual DOM Diffing

→DOM Updates

⚠️ BottleneckDOM Updates stage is most expensive if render logic causes unnecessary changes.

Core Web Vital Affected

LCP

This affects how Vue compiles and renders components, impacting initial load time and runtime rendering speed.

Optimization Tips

1Use templates for most components to leverage Vue's compiler optimizations.

2Use render functions only for complex dynamic rendering to reduce unnecessary DOM updates.

3Avoid render functions for simple static content to keep code simple and bundle size small.

Performance Quiz - 3 Questions

Which pattern generally leads to better maintainability and optimized runtime rendering in Vue?

A Using templates compiled by Vue

B Writing all UI with handwritten render functions

C Using render functions for static content only

D Mixing templates and render functions randomly

DevTools: Performance

How to check: Record a performance profile while interacting with the component; look for excessive scripting or layout events caused by rendering.

What to look for: Check for long scripting times during render and frequent layout/repaint events indicating inefficient updates.