Fire and Ice

This is a flame graph:

Source: https://blog.codecentric.de/en/2017/09/jvm-fire-using-flame-graphs-analyse-performance/

Turn it upside down, and you get an icicle graph:

Source: https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference

This means the flame graph view in the Firefox and Chrome profilers is actually an icicle graph view. Who knew?

I learned this tidbit of trivia when I was trying to figure out whether it’s practical to implement a flame graph in the browser using SVG.

Turns out SVG gets too slow if you have a few thousand elements on the screen. You probably want to use <canvas> if you need to visualize a ton of data at once. For this reason, both Firefox and Chrome use <canvas> for their flame graph views. Here is Firefox’s implementation, and here is Chrome’s.