What does each color mean in Chrome devtools profile flame chart

Question

When I use Chrome devtools's profile tool to record javascript CPU run time, and switch to flame chart, I see lots color blocks, some block's color look similar, some are different.

What does each kind of color represent? What are the differences?

Answer 1

Colors are only there to make chart readable (and pretty!), there is no special meaning associated with them. Each function gets a random color that allows you to easily spot calls to the same function.

I've made two snapshots of exactly the same code below (restarting DevTools in between):

Answer 2

As mentioned on the Chrome Dev Site

"The colors in the Flame Chart fairly random, however functions will always be colored the same across invocations. This allows you to see a pattern of execution and then spot outliers easier. There is no correlation to the colors used in the Timeline."