Let's go ahead and check out the profiles panel here.

There's not much to the profiles panel at first glance.

You basically have to select a profiling type, and

you can click on collect Javascript CPU profile here, and then hit Start.

And then when I hit Stop, if we click on it You'll notice nothing

happened at all.

The webpage was completely idle 100% of the time,

and the program was active for 0% of the time.

And this is basically a measurement of how much

of the CPU That we're using up in our JavaScript.

Now I'm going to show you another panel, a

little bit ahead of where we're at right now,

but we'll go ahead and cover this panel in more detail.

This is the console and in the console I'm going

to go ahead and write a little bit of JavaScript.

[SOUND] So, I'm going to write a function called test.

And inside my test function, I'm going to log when we started the test.

And then I'm going to create a loop.

And this loop is going to be very inefficient.

[SOUND]

And by inefficient, I just mean it's going to do a lot of stuff.

So, we create a infinite for loop here.

And next,

we'll go ahead and increment i every time it loops, which is our variable here.

And then we'll say.

[NOISE] If i is equal to a really large number, we'll say a billion, so that's

billion, million, thousand, I think that's a billion, let's see.

A thousand, nope, that's a hundred million, one more.

It's either a hundred million or a really large number.

One or the other.

So we'll go ahead and have our if statement there.

And, if i hits that really large number, we'll go

ahead and log that we're all done here. We'll say done, and

then we'll go ahead and break the loop to stop

it from running. So now we have this function test.

And I'm going to switch over to profiles, create a new JavaScript

CPU profile, hit start, and then I'm gonna switch over to my console here,

whoops, and I'm going to actually run test.

[SOUND] There it started.

Now its done.

Over in profiles I'm gonna hit stop, and

now you have a lot more detailed information.

So, if we have a very complex JavaScript application, you'd be able to see that.

This test function is actually taking up 7% of the CPU, which is not

a huge amount, but it's still quite a bit and it might be somewhere to investigate

in your program for some optimizations.

Now it looks like we still have continuous re-paint on here.

So I'm going to go ahead and turn that off.

Really quick there we go.

And now let's try running that same function again

so I just hit the up arrow to bring that

back up in our console and I'm going to

run it for a few more orders of magnitude here.

And then I'm going to start a new CPU profile,

run the test function, and now you'll see it started.

And there's quite a bit longer delay

between when it started and when it's done.

In fact, we may have gone up a few too many orders of magnitude here.

And it looks like it's never really going to finish.

But we can go ahead and hit stop and we can still see that, while our test

function is taking up 84% of our available CPU, which is, quite a lot.

And it looks like this never even finished, so.

That's fine though it'll finish it eventually.

All right. So, that's pretty much the Profiles panel.

You can also look at memory allocation here

by taking a snapshot of the memory heap.

And it's still snapshotting there.

Looks like it's probably snapshotting For quite some time because there's still

JavaScript running.

Wonder if I can actually stop that maybe by refreshing the page here.

This is what happens when you crash your browser.

Alright, gonna close browser here and bring back

up Smells Like Bakin' and there we go.

Now, if we go back to profiles here, and take a snapshot

of the heap, you'll notice that happened much more quickly this time.

And we only have 1.2 megabytes of memory allocated.

However, if we were

running a much larger JavaScript application, you could go ahead and

see, what type of memory allocation you have going on here.

That's about it for the profiles panel.

Next up we're gonna take a look at the audit panel

where we can learn about additional performance tips for our webpage.