This course has been updated! We now recommend you take the Introduction to Dev Tools, v3 course.
Transcript from the "Timeline Panel" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Jon Kuperman: Now the scariest of the panels but we're gonna get through it together. And it's gonna be awesome. The timeline panel. So the Timeline panel, I think I have a Lord of the Rings ring, is like becoming the one panel to rule them all. As it were, has got way too much stuff on it but it's really really useful information.
[00:00:22] So imma pop this back into full screen, so we can see it all and basically you can control what it captures. We're gonna to start off by capturing everything and then we gonna kind of narrow it down from there. So it can do network just like the network tab.
[00:00:38] A JavaScript profile, they can do those screenshots as we load just like we saw before they can copy, capture all the memory and all the screen paints. And I'm gonna go ahead imma hit refresh on here which will start the recording. With the timeline, it's actually true with almost all the panels, when you're on the panel a refresh will trigger it to start it's recording.
[00:00:58] You can also using command you're clicking on it, you can manually start and stop or recording and what that's important for is a refresh is gonna be profiling your page load your initial load. But sometimes you wanna profile how your app works like somewhere in the flow after the page loads to a single page application.
[00:01:17] And you're worried about like the checkout screen feeling slow. You don't need to start from page load, you can just hit record check out hit record stop and profile it that way. But for now, we're just going to be profiling the whole page load because this is a pretty simple site.
[00:01:29] Okay, so [COUGH] go to timeline, I don't know how I got off here but multiple my gosh, I have multiple death tool windows open. Okay, there we go back to has just one. Okay, so this is the screen and there's a ton of stuff going on, so let's start off with what we can eliminate and make it smaller just for a minute.
[00:01:53] Okay, so [COUGH] the first thing that we can probably eliminate is the screenshots, we already saw these down here on the network conditions. And I know that I'm not worried about how the paint performs. What you would wanna watch out for here is like I said before if maybe unimportant stuff like an image was loading before important stuff like a tagline or some communication.
[00:02:16] Screenshots are really useful for that, but since I can see that my whole page loads right away in the first screenshot, I don't need those anymore. So I'm gonna deselect to kinda tidy up a little bit. The next thing then we'll look at is memory. We're gonna get in the memory in the next section but the thing you wanna watch out for a memory is like the jigsaw pattern.
[00:02:35] So it's like memory going up is totally fine cuz you need memory to do basically everything, but what you wanna look for is every once in a while garbage collection kicks in and the memory should go back down. Preferably back down to a pretty low point, if you see your memory like jigsawing so up into the left.
[00:02:52] That's the bad sign because that means the flat is the garbage collection which should go back down. So we'll see it soon but the pattern that you always wanna watch out for is like the up and to the left memory provides, so we can see and hear is very, very flat, right?
[00:03:06] Like the page loads and it probably allocate some memory a garbage collection kicks in and it doesn't go back down to zero because we have stuff in memory still but it stays really flat. Whereas, if you are seeing like [SOUND] that kind of pattern, you'd have a memory leak, and that's thing you wanna diagnose there, that's our next section.
[00:03:25] So we can see there's not a memory leak on this page, so I'm gonna go ahead and not look at that right now. I did wanna point out that their color coordinated by the type of what the memory is being used for, which is really gonna be helpful on our next section.
[00:03:38] Whether it's like DOM nodes or elements or JavaScript or event listeners all like us, so it's gonna hide memory. Okay, so now, we're just down to three things. We're down to the summary down here. We're down to the networks, which is basically the waterfall that we saw before, and then we're down to the screen paint area.
[00:03:58] So the network is really useful like if you have a website that slow and you're looking at the timeline and you're seeing that like let's say, you're seeing. So these little red blips here are when when Chrome suspects what's called page jank which we're gonna get into in a bit which is like a jankness like not silky smooth page.
[00:04:20] So if you're seeing a lot of page jank and you're not seeing anything here, so these are again color coordinated like loading JavaScript we'll get into that a second. So if you're not seeing any stuff here, but you're seeing jank up here, it's probably a good idea to look into the network resources.
[00:04:38] Like, for example, you have one huge image. You might see no work being done, so none of these little pyramids but a whole lot of pages like the images loading in. But for this one, the areas that we do see a little bit of page jank, we also see a lot of work going on, so networking is probably not our issue.
[00:04:56] The controls are a little bit weird on the timeline too so if you scroll down it, zooms in and you can kind of see these two pictures here zooming in. And you can zoom in an area and if you scroll side to side, if you have a trackpad it moves it through time the X axis.
[00:05:12] But then when you get to something like here and you wanna scroll down, if you try to scroll down it won't, right? It will just zoom back out and in when you try to zoom down and up, so just remember the timeline kind of takes over the scrolling.
[00:05:25] And if you want normal scrolling, you have to hold Shift, and if you hold Shift you'll be able to scroll up and down, like normal. So again, the Network tab is useful in a sense because it can show us things that take a long time. And the really only thing that's taking a long time is these icon fonts to load and those icon fonts are just what I'm using for these little things here.
[00:05:48] So if we wanted an immediate awesome performance win and we're okay with not having those icons we could just get rid of this whole thing. This is like the Bootstrap cliff icons, we could also very easily trim the CSS down to just the five or six that I'm using as opposed to like 32 that come with Bootstrap.
[00:06:06] But there's nothing really like what you'd wanna watch out for on the Network tab is like some really wide stuff especially these are okay cuz they load at the end you can see. But if it was like something that was like blocking in the middle like the document comes down and then this huge image where no work is getting done.
[00:06:21] And then JavaScript like that's the kind of stuff you wanna watch out for on the Network tab and we'll see some examples of that in a bit. But I'm not concerned with this, does that kinda makes sense? Cuz I'm not seeing any red flags with this Network tab, so I'm wanna go ahead and hide it for now.
[00:06:36] Okay, so now we're just left with still a lot of stuff. So as far as the colors for all the rest of the panels they're dictated by this key here. So loading is blue, scripting is yellow, rendering is purple, painting is green, and then everything else. And other and idle are just like GPU or CPU, it has like stuff to do, right?
[00:06:59] There's like actual native code that it's running, there's actually like browser cleanup happening. So that's like not your app code, so you kind of get an idea just from looking like okay, like I'm seeing a lot of purple and yellow that's what's going on here. So there's like a a big rendering block at the beginning which makes sense.
[00:07:16] You got to run to the page and then there's like this big scripting block that basically continues for most of the rest of the time. So you can just like, by knowing the colors, you can start to just get an idea of like, well, is my app doing?
[00:07:27] Is it like a ton of loading, a ton of JavaScript, a ton of memory, all that kind of stuff. And this summary is just like a nice little pie chart of like, it looks like I spent most of my time scripting. Okay, so I know there's a lot here.
[00:07:40] Let's start kinda taking a look up here, so that this, even though it's just one column, there's actually three sections which you can see on the right side. So there's again a little mini Network tab, which you can see a little mini waterfall. Let me make this bigger.
[00:07:57] You can see there's a little mini waterfall over here but we've kind of looked we've kind of done the network thing already. Then there's CPU usage which is what the summary is like what we're spending our time doing. So we can see that rendering JavaScript are taking a lot of the time and then there's the third section which is frames per second.
[00:08:15] So I think I've got in here, I'm gonna move forward just for a second. Okay, so frames per second is a really crucial concept and it's a little bit confusing. So a lot of talks will speak about 60 frames per second as being silky smooth. Video games should be 60 frames per second.
[00:08:35] Website should scroll at 60 frames per second. So I think before we do too much, it's important or say where that comes from. So basic idea is that most screens refresh 60 times in a second. And so if you think about like you're you've got your website and your screen is refreshing 60 times so whatever 60 times in a second.
[00:08:54] You need to have something, a frame ready to give it. The browser needs to be able to give the screen a frame every one of those times a second. So basically, you have a little less time than that so 60 frames in a second means that you need to have a frame every 16 milliseconds.
[00:09:13] And this isn't something that you control necessarily. It's something that you can overwhelm the browser, and it will start failing to be able to do. Does that make sense like you don't actually control when you give a frame to the browser, but if you ask it to do too many things it might fumble, it might not be able to deliver a new frame.
[00:09:32] The tricky thing is you don't really get the full 16 milliseconds because the browser has a bunch of just stuff that it has to do like just what browsers are complicated and there is work to be done. So really like your work needs to be completed within 10 milliseconds for each frame that you need to run there.
[00:09:48] And when you don't have a frame ready is when you start, if you've ever seen that an animation on a website and it's like really, really choppy. It's because it's not going fast enough, it doesn't have a new frame to show the browser every ten milliseconds or so.
[00:10:02] The individual numbers aren't very important. What's important is that back on this view over here as the green goes up that's when we're getting into the kind of the dangerous territory, right? Like the higher that the this like the screen goes the like the less frames per second we're able to give.
[00:10:22] So it's kind of like you know high is low high is bad basically. So this looks okay, because the thing is rendering is unavoidable, right? If you have a whole website to paint and there's a bunch of content and pictures and stuff like that, there's a lot of rendering work.
[00:10:38] There's a lot of painting work that needs to be done. But what you wanna watch out for Is just unnecessary paints and we're gonna get to some examples of that but like so for example, seeing a big bump of green as the page loads is always gonna be the case.
[00:10:51] You always need that but if you're running like a timeline and you saw a big bump a green here and then you saw like huge spikes in green like all throughout like afterwards. That might be something to worry about, why are we repainting? Sorry, so we're gonna dive into this stuff a lot because I know it's really complicated, there's a lot going on but my whole point is just like starting to understand.
[00:11:15] Just being able to eyeball these sections and seeing like what information it's giving you. So like a dark red means that it suspects page jank. It suspects a frame was too slow. And then the green over here will spike as you're doing a lot of painting as like the frames per second is getting lower.
[00:11:33] Then this next section is just like this like pyramid a thing of like what is the CPU doing? Is it doing a lot of rendering? Is it doing a lot of JavaScript work? Then this is a little Network tab just the same kind of waterfall that we've been seeing.
[00:11:47] And then this is like a pie chart which just shows you all that information kind of broken up into what you spent time doing