permalink

5

Visualising JavaScript Processing Over Time With DevTools Flame Charts

In this quick video, I walk through how to effectively use DevTools Flame Charts for visually representing your app’s JavaScript processing over time. This can be useful if you’re concerned it may be suffering from particularly long function executions and you want to dive into them further.

Flame Charts compliment the existing JavaScript CPU Profile’s Tree and Heavy views, displayed lower down. For those unfamiliar with the CPU profiler, it shows where CPU time is statistically spent on your code.

Tree view (Top Down)

Tree view (Top Down)

Heavy view (bottom up)

Heavy view (Bottom Up)

Flame chart view (same app)

Flame Chart view (same app)

Flame Chart view (for a more complex app)

Flame Chart view (for a more complex example – the Octane benchmark)

Flame chart for a three.js demo

Flame Chart for a segment of the Chrome Maze experiment

Noticing particularly long (and repeat) function executions which can be optimised.

Noticing particularly long (and repeat) function executions which can be optimised.

5 Comments

  1. Perfect overview of Flame Chart™ :)

    It would be worth mentioning as well, that the flame chart can be viewed zoomed out to be able to see the color patterns of function calls and how the call progression unfolds. If there are any strange outliers or unexpected jumps that aren’t within the pattern flow they are visible this way.

  2. Pingback: Collective #79 : Big Design Blog

  3. Pingback: Web Design Digest No.8 (01 — 10 September 2013) | Splashnology.com

  4. Pingback: Visualising JavaScript Processing Over Time With DevTools Flame Charts | InfoLogs

Leave a Reply

Required fields are marked *.