Hacker News new | ask | show | jobs
by vive-la-liberte 3820 days ago
Slide 27/36, aka. slide 18/23, shows a type of graph which I have also seen in the Google Chrome Dev Tools as well as a couple of other places. Someone told me once the name of that kind graph but I've forgotten what it was. I've never learned how to read that kind of graph. So, if someone would be so kind, please tell me what it's called and how to read it.
3 comments

It's a flame graph or flame chart. I found this video explaining how to use them: https://www.youtube.com/watch?v=g0g4ML4nhPg

I think the basic idea is: say you have some code like this.

function a() { // 6 ms b(); // 3 ms c(); // 3 ms } Then you might have a flame chart that looks like this:

[-b-][-c]

[---a---]

Essentially you're decomposing the time we spend in a() into its constituent pieces b() and c().

essentially, yes, but:

flame graphs: x-axis is sample population (or event time), alphabetical sort on function names to maximize merging

flame charts: x-axis is the passage of time

Great resource! Thank you.
Thanks :)
They call it a flame graph and what you are seeing are call stacks. X axis is time, Y axis is call stack depth.

The very bottom layer is the function you are analyzing, ever layer above is a function called by the one directly below it.

> X axis is time

That's not correct from what I'm reading.

If you are sampling the stack at equidistant points in time (or, sampling theorem and all, fast enough) and then determine the width on the basis of "seen in fraction of samples", that's pretty close to time. (timespan if you want)
The span on the x-axis is the amount of time spent in a function, but not the passage of time left-to-right.
I down voted you because I'm on a phone and my thumb is a bit bigger than the voting triangles - apologies.
Thank you. Very succinct explanation. I like that.