0
0
CSSmarkup~8 mins

Visibility property in CSS - Performance & Optimization

Choose your learning style9 modes available
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
PatternDOM OperationsReflowsPaint CostVerdict
visibility:hiddenNo DOM changes0 reflowsPaints hidden element (medium cost)[OK]
display:noneNo DOM changes1 reflow per element hiddenNo 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
Test your performance knowledge
Which CSS property hides an element but keeps its space in the layout?
Aopacity:0
Bvisibility:hidden
Cdisplay:none
Dposition: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.