0
0
CSSmarkup~8 mins

Text decoration in CSS - Performance & Optimization

Choose your learning style9 modes available
Performance: Text decoration
LOW IMPACT
Text decoration affects the paint and composite stages of rendering, impacting how quickly styled text appears and updates on screen.
Applying underline style to text
CSS
p { text-decoration: underline solid black; }
Simple solid underline uses less paint and compositing resources.
📈 Performance Gainreduces paint and composite cost by ~50%
Applying underline style to text
CSS
p { text-decoration: underline wavy red; }
Complex text-decoration styles like wavy lines trigger more paint and compositing work.
📉 Performance Costtriggers 1 extra paint and composite per element
Performance Comparison
PatternDOM OperationsReflowsPaint CostVerdict
text-decoration: underline solidnonenonelow paint cost[OK] Good
text-decoration: underline wavynonenonehigher paint cost[X] Bad
Rendering Pipeline
Text decoration styles are applied during style calculation and affect paint and composite stages. Complex decorations increase paint area and compositing layers.
Style Calculation
Paint
Composite
⚠️ BottleneckPaint
Core Web Vital Affected
CLS
Text decoration affects the paint and composite stages of rendering, impacting how quickly styled text appears and updates on screen.
Optimization Tips
1Prefer simple text-decoration styles like solid underline for better paint performance.
2Avoid animating text-decoration properties to reduce paint and composite overhead.
3Use browser DevTools Performance panel to monitor paint and composite costs of text styles.
Performance Quiz - 3 Questions
Test your performance knowledge
Which text-decoration style generally causes less paint work?
ADouble underline
BWavy underline
CSolid underline
DDotted underline
DevTools: Performance
How to check: Record a performance profile while interacting with text that has decoration. Look for paint and composite events in the flame chart.
What to look for: High paint or composite times indicate costly text-decoration styles.