Flame Charts

[00:00:00]
>> Todd Gardner: So we're still in core web vitals, but to talk about our last core web vital which is interaction to Next paint, we need to understand another kind of chart, a flame chart. Did anybody know what a flame chart is? You've probably seen it before, maybe didn't know this word.

[00:00:17]
We're gonna talk about it because this is an important part of understanding the performance of JavaScript, which is ultimately part of what we are measuring here with our last Core Web Vital. So here is a flame chart, a flame chart is visible in Chrome and a bunch of other tools.

[00:00:35]
Usually it's shown alongside a waterfall because it's a different dimension of a waterfall. Now we are mentioning time here,the usual time that we are measuring here is in milliseconds and microseconds. We are measuring the actual executions of what the browser is doing on a millisecond to millisecond time frame, and so when we look at this all charts there are a stack set of bars.

[00:01:01]
And so we have some tasks, some thing needs to happen, and that thing starts some other thing. And we show that other thing below it, which then starts other things, so we see it as like this stacked task. Now, here's how this would look like in code, for example.

[00:01:19]
So, I have just these three JavaScript functions, task 1 calls task 2, task 2 calls task 3, and task 3 does something. If we execute task 1, that would show up out of order. So if we have this JavaScript, task 1 calls task 2, task 2 calls task 3 and task 3 does something, that's what this would look like.

[00:01:45]
So over time, we have task one execute, task 1 starts task 2, task 2 starts task 3. The size of these bars indicates like how much of the parent task was the child task consuming. So task 1 is the entire time, task 2 is part of task one, and task 3 is part of task 2.

[00:02:07]
So how does this work, again, they're color coded in when we're talking about the web, whereas gray is the top level browser task, something happens. Blue is parsing HTML, pink is layout and paint events, dark yellow is JavaScript. But it's usually the top level JavaScript, like evaluate and compile scripts, stuff that's like probably just pass through events that don't do very much.

[00:02:34]
The lighter yellow is shown as actual JavaScript execution time, like an expensive operation Is doing things. And then green is extensions, and unless you're doing extension development, largely you can ignore that sort of stuff when you see it. So let's look at a little example, here is a small HTML document, it doesn't even have a head, in the body, there is a script tag.

[00:03:02]
The script tag waits for the load event and then creates an element and sticks it in the body, right, that pretty straightforward? So how does this show up in a flame chart? Well, what we would see is when the HTML is done after the HTML document has fully come down, the browser triggers a task.

[00:03:26]
And it's a task to, hey, I got to parse this HTML I just got, as part of parsing that HTML, it runs into a script tag. And that script tag needs to be compiled, at this point, we have just looked at the top level of this JavaScript of this document.

[00:03:41]
Found the script tag, found that there's a window add event listener, and then didn't really care about what was in there. Just said, hey, there's a event listener I need to detach at some point later, another task is fired. When they'll load event is ready and the event load is fired.

[00:03:56]
It calls the function, which then has to be compiled because it didn't actually read the contents of that function until it needed, it compiles it. And then executes our function that triggers, that generates elements and will cause a layout event. So this is a simplified version, if we were to load this document and actually look at it in Chrome, this is Flame.

[00:04:21]
This is the key parts of the flame that we would see, why is this important? Why are Flame Charts important in web performance? Well, we have to talk about the main thread on the browser, JavaScript is everything is operating in a single thread called the main thread. It's the single thread of work that the browser has for handling user events, laying out the document, painting everything and running your JavaScript all happens in the same thread and has to be shared.

[00:04:55]
So if you write a bunch of JavaScript that is really slow and does a whole bunch of work. It can stop other things from happening, other things like firing events, laying out the document and painting things. It can stop things from happening that the user would expect to happen and we'll talk about next, why that's important.