Vueframework~8 mins

Teleport for rendering elsewhere in Vue - Performance & Optimization

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

Performance: Teleport for rendering elsewhere

MEDIUM IMPACT

Teleport affects how and where DOM nodes are inserted, impacting layout and paint performance by moving elements outside their original parent.

Rendering a modal dialog outside the main app container to avoid layout shifts

Vue

<template>
  <div class="app">
    <Teleport to="body">
      <Modal v-if="show" />
    </Teleport>
  </div>
</template>

<script setup>
import Modal from './Modal.vue'
import { ref } from 'vue'
const show = ref(true)
</script>

Teleport renders the modal directly under <body>, avoiding layout shifts in the main app container.

📈 Performance GainReduces reflows and CLS by isolating modal rendering outside main layout.

Rendering a modal dialog outside the main app container to avoid layout shifts

Vue

<template>
  <div class="app">
    <Modal v-if="show" />
  </div>
</template>

<script setup>
import Modal from './Modal.vue'
import { ref } from 'vue'
const show = ref(true)
</script>

Modal is rendered inside the main app container, causing layout shifts and reflows when toggled.

📉 Performance CostTriggers multiple reflows and repaints on modal open/close, increasing CLS.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Rendering modal inside app container	High (nested nodes)	Multiple reflows on toggle	High paint cost due to layout shifts	[X] Bad
Rendering modal with Teleport to body	Moderate (direct child of body)	Single reflow isolated to overlay	Lower paint cost, stable layout	[OK] Good

Rendering Pipeline

Teleport moves the rendering of a component's DOM nodes to a different place in the DOM tree, bypassing the normal parent-child hierarchy. This affects layout and paint stages by isolating changes.

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage due to reflows caused by inserting/removing nodes inside complex containers

Core Web Vital Affected

CLS

Teleport affects how and where DOM nodes are inserted, impacting layout and paint performance by moving elements outside their original parent.

Optimization Tips

1Use Teleport to render overlays or modals outside main containers to reduce layout shifts.

2Avoid toggling large DOM subtrees inside complex layouts to minimize reflows.

3Check layout stability with DevTools Performance panel when using Teleport.

Performance Quiz - 3 Questions

Test your performance knowledge

What is the main performance benefit of using Vue's Teleport for rendering modals?

AIt reduces layout shifts by rendering outside the main DOM tree

BIt decreases JavaScript bundle size

CIt speeds up network requests

DIt improves CSS selector matching speed

DevTools: Performance

How to check: Record a performance profile while toggling the modal. Look for layout and paint events related to modal insertion.

What to look for: Fewer layout recalculations and smaller paint areas when using Teleport indicate better performance.