Fire and Ice

This is a flame graph:

Screenshot of a flame graph. The graph grows upwards.

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

Screenshot of an icicle graph. The graph grows downwards.

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.