How Flame Charts Represent JavaScript Execution

A flame chart is a performance visualization tool that plots JavaScript runtime metrics along two dimensions: time and call stack depth. It enables developers to analyze how long individual functions take to run, how functions invoke one another, and where performance bottlenecks occur during the execution lifecycle. By visually mapping function calls as colored blocks across a chronological timeline, the chart provides an intuitive representation of both execution duration and call hierarchy.

The Horizontal Axis: Time and Execution Duration

The horizontal axis (X-axis) in a flame chart represents chronological time, moving from left to right. Each block along this axis represents a specific function execution:

• Width as Duration: The width of a block corresponds directly to the total time that the function spent on the call stack. A wider block means the function took longer to finish executing.
• Total Time vs. Self Time: The full width of a function’s block represents its total time, which includes the time spent executing its own code plus the time spent waiting for any nested child functions to return. Self time refers strictly to the time spent executing code within that function alone, visible as the portions of the block that have no child blocks stacked beneath them.
• Chronological Flow: Functions that appear to the left executed before functions to the right. Gaps between blocks represent idle time or asynchronous delays where the JavaScript engine was not executing synchronous code.

The Vertical Axis: Call Hierarchies and Stack Depth

The vertical axis (Y-axis) represents the call stack at any given millisecond during profiling.

• Call Hierarchy: In standard browser profilers (such as Chrome DevTools), the chart reads top-down. The top-level function or event (such as a DOM event handler, timer callback, or script evaluation) is placed at the top. When that function calls another function, the newly invoked function is placed directly underneath it.
• Caller and Callee Relationship: The parent block sits above the child block. If Function A calls Function B, Function A is rendered on top, and Function B is nested below it within the horizontal span of Function A.
• Stack Depth: The vertical height (or depth) of the stack reflects how deeply nested function calls are at a specific point in time. Deep vertical towers indicate deep recursion or heavily nested architectural patterns.

Identifying Performance Bottlenecks

Flame charts make it easy to spot common performance issues by turning raw timing data into distinct geometric patterns:

• Long Tasks: Unusually wide blocks at the top level indicate long tasks that block the browser’s main thread and degrade user interface responsiveness.
• Deep Nesting: Tall, narrow stacks indicate rapid, deeply nested calls that can increase memory usage and stack overhead.
• CPU Bottlenecks: A block that is both wide and has few or no child blocks stacked under it represents a function with high self time, pointing to heavy internal computation or inefficient synchronous algorithms that need optimization.