Flame Graphs in Chrome DevTools: A Guide for Front-End Developers
If you’re a front-end developer, you are undoubtedly familiar with Chrome DevTools. It is a powerful tool that allows you to debug and optimize your web applications. One of the features that may have caught your eye is the flame graph. In this article, we will discuss what flame graphs are, why they are important to front-end developers, and how to use the flame graph feature in Chrome DevTools.
What is a flame graph?
A flame graph, also known as a flame chart, is a graphical representation of the stack trace of a program. It is a way to visualize the time spent by the program on various functions or methods. Flame graphs are particularly useful for profiling the performance of a program. They help identify which functions or methods are taking up the most time, and where optimization efforts should be focused.
Flame graphs derive their name from the way in which the data is displayed where the ascending data points are increasingly smaller in size, resembling a fire. The graph is made up of horizontal bars acceding upward where each bar represents a task. The bar at the bottom is the parent task and each bar above is descendent. When inverted with the parent task is at the top and the children descending, it’s referred to as an ice cycle chart. The two are functionally the same, but we’ll be addressing the former in this article.
To learn more about flame graphs, you can check out this blog written by the creator or flame graphs, Brendan Gregg.
Why is this important for front-end development?
To answer this question, we should first look at the JavaScript Event Loop.
The event loop is like a traffic controller for JavaScript. When an event happens like a button click or a network request, it gets added to a queue. The event loop will send an event from the queue to the call stack to be executed; however, if the call stack is busy, the event will remain in the queue until the previous events are finished.
This is where we can run into some trouble. When the event loop must wait to send events to the call stack, it causes delays in running subsequent events and in any DOM (Document Object Model) changes the user might be expecting. The end user directly feels extensive delays in the call stack, resulting in a poor user experience.
This is where a flame graph becomes useful. A flame graph shows the state of the JavaScript stack at every millisecond during the performance profile. This gives a way to know precisely which function was executed at any point during the recording, how long it ran for, and where it was called from. This is useful when dealing with performance bottlenecks, as the graph will allow you to find the function(s) responsible so that they can be refactored, and in turn it enables you to build better websites that deliver a faster and smoother end-user experience.
How to use
For the demonstration, we will look at a basic application running locally on my machine that contains the following slow function that will act as our bottleneck.
To use the flame graph feature in Chrome DevTools, you first need to navigate to your application in the browser and open the DevTools panel by pressing F12 or by right-clicking on the page and selecting Inspect. Once you have opened the DevTools panel, click on the Performance tab.
In the Performance tab, click on the Record button to start profiling your application.
Perform the task or tasks that cause a performance hiccup, in my case clicking the Start Slow Function button, then click on the Stop button after the event has completed to stop profiling.
After profiling, a flame graph is generated from the runtime data of every task that ran during the profiling state. Long-running tasks are colored in red with their child tasks nested below. Once long-running tasks are identified, we can click on that to get more information at the bottom of the screen. Here we get a warning that this is a long task taking one second.
If we zoom in, we can see the chain of events from top to bottom that will lead us to the function that is causing the bottleneck. Here the chain of events are as follows: Click event -> function call -> anonymous function -> slowFunction. Below we can see the “slowFunction” event is running multiple times over the span of a second under the task “(anonymous).” Clicking on one of the slowFunction events will display runtime information as well as the file and line number of the function in the summary tab, which will link to the code in the source tab, revealing the JavaScript in question. From here we can see the line of code that is taking the longest and focus our refactoring efforts there.
In more complex applications, such as in using a front-end framework, the events can be obscured by the framework, making it difficult to locate meaningful information. In the flame graph below, generated from an Angular application, the event in question is a piece of Angular templating logic that has been named “6224” by the compiler. This is easy to overlook as the name is not something recognizable or human-friendly.
When having difficulty locating a bottleneck, it may be beneficial to look at the Event Log as a way of viewing and navigating the flame graph from a different perspective. The Event Log contains the same information as (and can be used in addition to) the flame graph but is structured like a file system directory, where events are listed as folders. In the Event Log events are notated with a total time column to the left of the folder, where long event times are highlighted in orange. Using this view of the flame graph, the bottleneck can be located by finding the long-running events and navigating down through the nested folders, using the total time column as a reference as to what folders the task is nested in. Once the bottleneck is found, the file and line number are listed on the right and will link to the source code just as in the flame graph event summary view.
Summary
In summary, the flame graph in Chrome DevTools is an indispensable tool for front-end developers looking to optimize their web applications. Its ability to visualize the execution timeline, identify performance bottlenecks, and aid in debugging makes it an essential asset in the developer’s toolbox. By leveraging the power of the flame graph, developers can create faster, more efficient, and highly performant web applications that deliver an exceptional user experience.
Slalom is a global consulting firm that helps people and organizations dream bigger, move faster, and build better tomorrows for all. Learn more and reach out today.
