Y axis = stack depth X axis = percent of time spent in this function
If a function sits atop another, it was in its callchain and spent time in the callee. The more of a parent that is covered by the things it calls, the less it is doing and the more its children are doing.
This means the two main things (in my experience) to look for are:
- plateaus -- functions where a lot of time was spent
- shallow-sloped pyramids -- functions where time was spent up and down the callchain vs any isolated place
In the middle of the wide section you can see a function called "parseGif" which is where we'll focus. This particular flame graph was generated to analyze something inside there -- for the most part I don't care about the rest right now.
Above that you can see one fairly large plateau in the middle: inxsearch this function on its own took over 20% of the total runtime. That's a lot and worth noting.
That's in the writegif branch of execution. I didn't actually write that library, so I'll table that for "future" considerations.
What I'm was trying to look at was the "replaceBackground" function I wrote and how it works. You can see that it (including its children) took over 57% of the time. I want to make it faster.
Going up from there you can see that it called a few things, eventually claling avg which is the highest function I wrote (that you can see here, there are a few inlined functions that are hidden) -- it spent over 49% of the time in avg
I then used this knowledge to figure out why avg is slow, try to figure out how to speed it up, and then re-run the test to see if it worked.