1 00:00:00,100 --> 00:00:04,730 Let's go ahead and check out the profiles panel here. 2 00:00:04,730 --> 00:00:08,540 There's not much to the profiles panel at first glance. 3 00:00:08,540 --> 00:00:13,990 You basically have to select a profiling type, and 4 00:00:13,990 --> 00:00:19,300 you can click on collect Javascript CPU profile here, and then hit Start. 5 00:00:20,530 --> 00:00:25,620 And then when I hit Stop, if we click on it, you'll notice nothing 6 00:00:25,620 --> 00:00:26,740 happened at all. 7 00:00:26,740 --> 00:00:30,850 The webpage was completely idle 100% of the time, 8 00:00:30,850 --> 00:00:35,830 and the program was active for 0% of the time. 9 00:00:35,830 --> 00:00:38,170 And this is basically a measurement of how much 10 00:00:38,170 --> 00:00:41,640 of the CPU That we're using up in our JavaScript. 11 00:00:42,860 --> 00:00:45,550 Now I'm going to show you another panel, a 12 00:00:46,700 --> 00:00:49,600 little bit ahead of where we're at right now, 13 00:00:50,690 --> 00:00:54,180 but we'll go ahead and cover this panel in more detail. 14 00:00:55,220 --> 00:00:59,080 This is the console and in the console I'm going 15 00:00:59,080 --> 00:01:02,555 to go ahead and write a little bit of JavaScript. 16 00:01:02,555 --> 00:01:08,964 [SOUND] So, I'm going to write a function called test. 17 00:01:08,964 --> 00:01:16,100 And inside my test function, I'm going to log when we started the test. 18 00:01:20,590 --> 00:01:24,630 And then I'm going to create a loop. 19 00:01:24,630 --> 00:01:27,295 And this loop is going to be very inefficient. 20 00:01:27,295 --> 00:01:29,910 [SOUND] 21 00:01:29,910 --> 00:01:33,170 And by inefficient, I just mean it's going to do a lot of stuff. 22 00:01:33,170 --> 00:01:36,560 So, we create a infinite for loop here. 23 00:01:38,610 --> 00:01:40,220 And next, 24 00:01:42,660 --> 00:01:48,560 we'll go ahead and increment i every time it loops, which is our variable here. 25 00:01:48,560 --> 00:01:49,805 And then we'll say. 26 00:01:49,805 --> 00:01:58,190 [NOISE] If i is equal to a really large number, we'll say a billion, so that's 27 00:01:58,190 --> 00:02:03,670 billion, million, thousand, I think that's a billion, let's see. 28 00:02:03,670 --> 00:02:07,480 A thousand, nope, that's a hundred million, one more. 29 00:02:08,620 --> 00:02:11,390 It's either a hundred million or a really large number. 30 00:02:11,390 --> 00:02:12,380 One or the other. 31 00:02:12,380 --> 00:02:15,040 So we'll go ahead and have our if statement there. 32 00:02:16,600 --> 00:02:22,340 And, if i hits that really large number, we'll go 33 00:02:22,340 --> 00:02:28,170 ahead and log that we're all done here. We'll say done, and 34 00:02:29,250 --> 00:02:33,850 then we'll go ahead and break the loop to stop 35 00:02:33,850 --> 00:02:37,519 it from running. So now we have this function test. 36 00:02:39,300 --> 00:02:44,140 And I'm going to switch over to profiles, create a new JavaScript 37 00:02:44,140 --> 00:02:49,730 CPU profile, hit start, and then I'm gonna switch over to my console here, 38 00:02:49,730 --> 00:02:55,235 whoops, and I'm going to actually run test. 39 00:02:55,235 --> 00:02:58,960 [SOUND] There it started. 40 00:02:58,960 --> 00:03:00,430 Now its done. 41 00:03:00,430 --> 00:03:04,110 Over in profiles I'm gonna hit stop, and 42 00:03:04,110 --> 00:03:07,600 now you have a lot more detailed information. 43 00:03:07,600 --> 00:03:13,670 So, if we have a very complex JavaScript application, you'd be able to see that. 44 00:03:13,670 --> 00:03:20,210 This test function is actually taking up 7% of the CPU, which is not 45 00:03:20,210 --> 00:03:24,330 a huge amount, but it's still quite a bit and it might be somewhere to investigate 46 00:03:24,330 --> 00:03:26,480 in your program for some optimizations. 47 00:03:26,480 --> 00:03:30,460 Now it looks like we still have continuous re-paint on here. 48 00:03:30,460 --> 00:03:32,500 So I'm going to go ahead and turn that off. 49 00:03:32,500 --> 00:03:33,870 Really quick there we go. 50 00:03:35,730 --> 00:03:39,620 And now let's try running that same function again 51 00:03:39,620 --> 00:03:41,160 so I just hit the up arrow to bring that 52 00:03:41,160 --> 00:03:43,530 back up in our console and I'm going to 53 00:03:43,530 --> 00:03:46,910 run it for a few more orders of magnitude here. 54 00:03:49,170 --> 00:03:52,150 And then I'm going to start a new CPU profile, 55 00:03:54,180 --> 00:03:57,790 run the test function, and now you'll see it started. 56 00:04:00,150 --> 00:04:03,570 And there's quite a bit longer delay 57 00:04:03,570 --> 00:04:07,070 between when it started and when it's done. 58 00:04:07,070 --> 00:04:10,650 In fact, we may have gone up a few too many orders of magnitude here. 59 00:04:10,650 --> 00:04:13,410 And it looks like it's never really going to finish. 60 00:04:14,430 --> 00:04:18,990 But we can go ahead and hit stop and we can still see that, while our test 61 00:04:18,990 --> 00:04:25,620 function is taking up 84% of our available CPU, which is, quite a lot. 62 00:04:25,620 --> 00:04:28,960 And it looks like this never even finished, so. 63 00:04:30,490 --> 00:04:32,400 That's fine though it'll finish it eventually. 64 00:04:33,970 --> 00:04:37,900 All right. So, that's pretty much the Profiles panel. 65 00:04:37,900 --> 00:04:41,750 You can also look at memory allocation here 66 00:04:41,750 --> 00:04:45,200 by taking a snapshot of the memory heap. 67 00:04:45,200 --> 00:04:47,130 And it's still snapshotting there. 68 00:04:47,130 --> 00:04:50,810 Looks like it's probably snapshotting for quite some time because there's still 69 00:04:50,810 --> 00:04:51,680 JavaScript running. 70 00:04:51,680 --> 00:04:57,180 Wonder if I can actually stop that maybe by refreshing the page here. 71 00:05:00,760 --> 00:05:02,750 This is what happens when you crash your browser. 72 00:05:04,270 --> 00:05:09,600 Alright, gonna close browser here and bring back 73 00:05:09,600 --> 00:05:12,720 up Smells Like Bakin' and there we go. 74 00:05:14,000 --> 00:05:17,270 Now, if we go back to profiles here, and take a snapshot 75 00:05:17,270 --> 00:05:21,220 of the heap, you'll notice that happened much more quickly this time. 76 00:05:21,220 --> 00:05:24,920 And we only have 1.2 megabytes of memory allocated. 77 00:05:24,920 --> 00:05:25,760 However, if we were 78 00:05:25,760 --> 00:05:30,290 running a much larger JavaScript application, you could go ahead and 79 00:05:30,290 --> 00:05:35,730 see, what type of memory allocation you have going on here. 80 00:05:35,730 --> 00:05:37,930 That's about it for the profiles panel. 81 00:05:37,930 --> 00:05:40,320 Next up we're gonna take a look at the audit panel 82 00:05:40,320 --> 00:05:43,720 where we can learn about additional performance tips for our webpage.