Differential Flame Graphs
Developed differential flame graphs for comparing performance between software versions
Overview
Visualization technique for comparing two flame graphs side-by-side, highlighting differences in CPU time allocation between versions
Problem
Engineers need to understand how performance changes between software versions, but comparing two separate flame graphs is tedious and error-prone
Constraints
- Must clearly show both improvements and regressions
- Must handle profiles with different total durations
- Must be intuitive for engineers to interpret
Approach
Built differential visualization that subtracts corresponding frames and uses color to indicate increases (red) or decreases (green)
Key Decisions
Use color coding for difference indication
Reasoning:
Red for increases, green for decreases matches common intuition and makes regressions immediately visible
Normalize by total samples
Reasoning:
Different profile durations require normalization for fair comparison
Tech Stack
- JavaScript
- D3.js
Result & Impact
Enabled rapid identification of performance regressions between versions
Learnings
- Differential views are more actionable than side-by-side comparison
- Normalization is essential for fair comparison
- Color coding must match user intuition
How to Use
- Capture profiles before and after a change
- Load both profiles into the differential tool
- Frames show relative change: red = more time, green = less time
- Quickly identify regressions and verify optimizations