Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Website Optimization

Well done!

You have completed Website Optimization!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

The Profiles Panel

5:44 with Nick Pettit

The Profiles panel can take snapshots of CPU and memory utilization. This is useful in complex JavaScript applications that can potentially use too much of the processor and memory. In conjunction with the Timeline panel, it can be useful for tracking down the source of memory leaks and other areas where performance can be improved.

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