Fire and Ice

in Shorts

This is a flame graph:

Source

Source

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

Source

Source

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.

If you enjoy my writing, you can subscribe to my newsletter to get new posts sent directly to your inbox.