Raw HTML with v-html in Vue - Performance & Optimization

Performance: Raw HTML with v-html

MEDIUM IMPACT

Using v-html affects rendering speed and visual stability by injecting raw HTML directly into the DOM.

Displaying dynamic HTML content safely and efficiently

Vue

<div>{{ sanitizedText }}</div>

Rendering sanitized text instead of raw HTML avoids layout shifts and reduces reflows.

📈 Performance GainPrevents layout shifts and reduces reflows, improving CLS and rendering speed.

Displaying dynamic HTML content safely and efficiently

Vue

<div v-html="rawHtmlContent"></div>

Directly injecting raw HTML can cause layout shifts and security risks if content changes often or is untrusted.

📉 Performance CostTriggers layout recalculation and repaint on each content update, causing CLS and slower rendering.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Using v-html with dynamic content	Inserts multiple nodes dynamically	Triggers reflow on each update	High paint cost due to layout shifts	[X] Bad
Rendering sanitized text without v-html	Minimal DOM changes	No reflows from HTML injection	Low paint cost	[OK] Good

Rendering Pipeline

v-html inserts raw HTML into the DOM, causing the browser to recalculate styles and layout for the new nodes, then repaint and composite the updated content.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage is most expensive due to recalculations triggered by injected HTML.

Core Web Vital Affected

CLS

Using v-html affects rendering speed and visual stability by injecting raw HTML directly into the DOM.

Optimization Tips

1Avoid frequent updates to content rendered with v-html to reduce layout recalculations.

2Sanitize HTML content before injecting to prevent security risks and unexpected layout changes.

3Prefer rendering plain text or Vue templates over raw HTML when possible for better performance and stability.

Performance Quiz - 3 Questions

What is a main performance risk when using v-html with frequently changing content?

A Increased JavaScript bundle size

B Slower network requests

C Frequent layout recalculations causing layout shifts

D Reduced accessibility

DevTools: Performance

How to check: Record a performance profile while updating v-html content and observe layout and paint events.

What to look for: Look for frequent layout recalculations and large paint times indicating costly reflows from raw HTML injection.