Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up