Performance: Structural vs attribute directives
MEDIUM IMPACT
This concept affects how Angular manipulates the DOM structure and attributes, impacting rendering speed and layout stability.
0
0
Structural vs attribute directives in Angular - Performance Comparison
Conditionally showing or hiding content
Angular
<div [ngStyle]="{'visibility': isVisible ? 'visible' : 'hidden'}">Content</div>Attribute directive [ngStyle] toggles CSS visibility without removing nodes, avoiding reflows and layout shifts.
📈 Performance GainNo reflow or layout shift triggered on toggle
Conditionally showing or hiding content
Angular
<div *ngIf="isVisible">Content</div>Structural directive *ngIf adds/removes DOM nodes causing layout recalculations and potential layout shifts.
📉 Performance CostTriggers 1 reflow and 1 layout shift each time condition changes
Performance Comparison
| Pattern | DOM Operations | Reflows | Paint Cost | Verdict |
|---|---|---|---|---|
| Structural directive (*ngIf) | Adds/removes nodes | Triggers 1 reflow per toggle | Medium paint cost | [X] Bad for frequent toggles |
| Attribute directive ([ngStyle]) | No DOM changes | No reflows | Low paint cost | [OK] Good for toggling visibility |
Rendering Pipeline
Structural directives modify the DOM tree by adding or removing elements, causing the browser to recalculate layout and repaint. Attribute directives change element properties or styles without altering DOM structure, mostly triggering paint but not layout recalculation.
→DOM Update
→Layout
→Paint
⚠️ BottleneckLayout stage is most expensive due to DOM structure changes by structural directives
Core Web Vital Affected
CLS
This concept affects how Angular manipulates the DOM structure and attributes, impacting rendering speed and layout stability.
Optimization Tips
1Use structural directives sparingly to avoid frequent layout recalculations.
2Prefer attribute directives for toggling visibility to maintain layout stability.
3Monitor layout shifts in DevTools when using structural directives to ensure good CLS.
Performance Quiz - 3 Questions
Test your performance knowledge
Which directive type causes the browser to recalculate layout due to DOM changes?
DevTools: Performance
How to check: Record a performance profile while toggling the directive. Look for Layout and Recalculate Style events.
What to look for: Frequent Layout events indicate structural directive impact; absence means attribute directive is used efficiently.