Visibility property in CSS - Performance & Optimization

Performance: Visibility property

MEDIUM IMPACT

Controls whether an element is visible or hidden without removing it from the layout, affecting paint and compositing.

Hiding an element without causing layout shifts

CSS

element.style.visibility = 'hidden';

Keeps element in layout, preventing reflow and layout shifts.

📈 Performance GainNo reflow triggered, reduces CLS impact

Hiding an element without causing layout shifts

CSS

element.style.display = 'none';

Removes element from layout causing reflow and layout shifts.

📉 Performance CostTriggers 1 reflow and layout recalculation causing CLS

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
visibility:hidden	No DOM changes	0 reflows	Paints hidden element (medium cost)	[OK]
display:none	No DOM changes	1 reflow per element hidden	No paint for hidden element	[OK] Good

Rendering Pipeline

Visibility property affects the paint and composite stages by controlling element visibility without layout changes.

→Paint

→Composite

⚠️ BottleneckPaint stage due to rendering hidden elements

Core Web Vital Affected

CLS

Controls whether an element is visible or hidden without removing it from the layout, affecting paint and compositing.

Optimization Tips

1Use visibility:hidden to hide elements without causing layout shifts.

2Avoid hiding many large elements with visibility:hidden to reduce paint cost.

3Use display:none to remove elements from layout and avoid painting when layout shifts are acceptable.

Performance Quiz - 3 Questions

Which CSS property hides an element but keeps its space in the layout?

A opacity:0

B visibility:hidden

C display:none

D position:absolute

DevTools: Performance

How to check: Record a performance profile while toggling visibility and display properties; observe reflows and paint events.

What to look for: Look for layout shifts and paint durations; display:none triggers layout recalculation, visibility:hidden triggers paint but no reflow.