Why conditional rendering matters in Vue - Performance Evidence

Performance: Why conditional rendering matters

MEDIUM IMPACT

Conditional rendering affects how many elements the browser must create and manage, impacting page load and interaction speed.

Showing or hiding UI elements based on user actions

Vue

<template>
  <div v-if="isVisible">Content</div>
</template>
<script setup>
import { ref } from 'vue'
const isVisible = ref(false)
</script>

v-if adds/removes the element from the DOM, reducing DOM size and avoiding unnecessary style recalculations.

📈 Performance GainReduces DOM nodes and style recalculations, improving interaction responsiveness.

Showing or hiding UI elements based on user actions

Vue

<template>
  <div v-show="isVisible">Content</div>
</template>
<script setup>
import { ref } from 'vue'
const isVisible = ref(false)
</script>

v-show keeps the element in the DOM and only toggles CSS display, causing unnecessary DOM nodes and style recalculations.

📉 Performance CostTriggers style recalculation and paint on each toggle, increasing INP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
v-show toggling visibility	Element always in DOM	Triggers reflow on toggle	Paint triggered on toggle	[X] Bad
v-if conditional rendering	Element added/removed as needed	Reflow only when element changes	Paint only when element changes	[OK] Good

Rendering Pipeline

Conditional rendering controls whether elements exist in the DOM, affecting style calculation, layout, and paint stages.

→DOM Construction

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout and Paint stages due to unnecessary elements causing extra calculations.

Core Web Vital Affected

INP

Conditional rendering affects how many elements the browser must create and manage, impacting page load and interaction speed.

Optimization Tips

1Use v-if to add/remove elements instead of hiding them with v-show when possible.

2Avoid rendering large hidden sections to reduce DOM size and improve interaction speed.

3Test toggling UI elements in DevTools Performance panel to check layout and paint costs.

Performance Quiz - 3 Questions

Which Vue directive removes elements from the DOM to improve rendering performance?

A v-bind

B v-show

C v-if

D v-for

DevTools: Performance

How to check: Record a performance profile while toggling the element visibility. Look for layout and paint events triggered by the toggle.

What to look for: High layout and paint times indicate inefficient rendering; minimal layout/paint means good conditional rendering.