Let's go ahead and check out the profiles panel here. 0:00 There's not much to the profiles panel at first glance. 0:04 You basically have to select a profiling type, and 0:08 you can click on collect Javascript CPU profile here, and then hit Start. 0:13 And then when I hit Stop, if we click on it You'll notice nothing 0:20 happened at all. 0:25 The webpage was completely idle 100% of the time, 0:26 and the program was active for 0% of the time. 0:30 And this is basically a measurement of how much 0:35 of the CPU That we're using up in our JavaScript. 0:38 Now I'm going to show you another panel, a 0:42 little bit ahead of where we're at right now, 0:46 but we'll go ahead and cover this panel in more detail. 0:50 This is the console and in the console I'm going 0:55 to go ahead and write a little bit of JavaScript. 0:59 [SOUND] So, I'm going to write a function called test. 1:02 And inside my test function, I'm going to log when we started the test. 1:08 And then I'm going to create a loop. 1:20 And this loop is going to be very inefficient. 1:24 [SOUND] 1:27 And by inefficient, I just mean it's going to do a lot of stuff. 1:29 So, we create a infinite for loop here. 1:33 And next, 1:38 we'll go ahead and increment i every time it loops, which is our variable here. 1:42 And then we'll say. 1:48 [NOISE] If i is equal to a really large number, we'll say a billion, so that's 1:49 billion, million, thousand, I think that's a billion, let's see. 1:58 A thousand, nope, that's a hundred million, one more. 2:03 It's either a hundred million or a really large number. 2:08 One or the other. 2:11 So we'll go ahead and have our if statement there. 2:12 And, if i hits that really large number, we'll go 2:16 ahead and log that we're all done here. We'll say done, and 2:22 then we'll go ahead and break the loop to stop 2:29 it from running. So now we have this function test. 2:33 And I'm going to switch over to profiles, create a new JavaScript 2:39 CPU profile, hit start, and then I'm gonna switch over to my console here, 2:44 whoops, and I'm going to actually run test. 2:49 [SOUND] There it started. 2:55 Now its done. 2:58 Over in profiles I'm gonna hit stop, and 3:00 now you have a lot more detailed information. 3:04 So, if we have a very complex JavaScript application, you'd be able to see that. 3:07 This test function is actually taking up 7% of the CPU, which is not 3:13 a huge amount, but it's still quite a bit and it might be somewhere to investigate 3:20 in your program for some optimizations. 3:24 Now it looks like we still have continuous re-paint on here. 3:26 So I'm going to go ahead and turn that off. 3:30 Really quick there we go. 3:32 And now let's try running that same function again 3:35 so I just hit the up arrow to bring that 3:39 back up in our console and I'm going to 3:41 run it for a few more orders of magnitude here. 3:43 And then I'm going to start a new CPU profile, 3:49 run the test function, and now you'll see it started. 3:54 And there's quite a bit longer delay 4:00 between when it started and when it's done. 4:03 In fact, we may have gone up a few too many orders of magnitude here. 4:07 And it looks like it's never really going to finish. 4:10 But we can go ahead and hit stop and we can still see that, while our test 4:14 function is taking up 84% of our available CPU, which is, quite a lot. 4:18 And it looks like this never even finished, so. 4:25 That's fine though it'll finish it eventually. 4:30 All right. So, that's pretty much the Profiles panel. 4:33 You can also look at memory allocation here 4:37 by taking a snapshot of the memory heap. 4:41 And it's still snapshotting there. 4:45 Looks like it's probably snapshotting For quite some time because there's still 4:47 JavaScript running. 4:50 Wonder if I can actually stop that maybe by refreshing the page here. 4:51 This is what happens when you crash your browser. 5:00 Alright, gonna close browser here and bring back 5:04 up Smells Like Bakin' and there we go. 5:09 Now, if we go back to profiles here, and take a snapshot 5:14 of the heap, you'll notice that happened much more quickly this time. 5:17 And we only have 1.2 megabytes of memory allocated. 5:21 However, if we were 5:24 running a much larger JavaScript application, you could go ahead and 5:25 see, what type of memory allocation you have going on here. 5:30 That's about it for the profiles panel. 5:35 Next up we're gonna take a look at the audit panel 5:37 where we can learn about additional performance tips for our webpage. 5:40