Name: The Breakpoint Ep. 8: Memory Profiling with Chrome DevTools
Uploaded: 2014-06-16T13:05:24.000Z
Duration: 26 min 5 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

I'm John McCutchan, and welcome to the Break Point.

JOHN MCCUTCHAN: So what do you do at Google?

LOREENA LEE: I actually work on Gmail, and I'm focused

primarily on performance, so making it faster as well as

making sure we're using the right amount of memory.

Good thing you're here, because we're here today to

talk about understanding the way memory works inside

JavaScript and how to profile your usage of memory inside

So I'm going to spend a little bit of time talking about the

conceptual material for how JavaScript manages memory.

And then Loreena is going to show us a really cool demo of

So JavaScript variables can be of four primary types--

the boolean type, which just true or false canonical

values, the number type, which is any double precision

floating point number, the string, which is a UTF-16

encoded character array, or an object, which

For those of you familiar with JavaScript, this

But we're just going to start from scratch and build up.

So objects are built around key value mapping.

No matter what you put in it, it's going to be

And then use that as the look up into the table.

And then for value, you can store any JavaScript object

So a key fundamental concept of memory and JavaScript is

So we're looking at a whole bunch of circles and lines on

But let's start from the left at the blue circle.

This is the root object inside the memory management system.

This is not something that you can explicitly manipulate or

do anything with, but this is just where every object that

And from the root, it references global variables

and other global state that's available to the browser.

And the green circles are scalar variables, like a

boolean or a number that can't reference anything else.

And you can see the green note at the end there, on the upper

right part of the screen with the yellow arrow, this is the

terminating node in this part of the object graph.

So objects have a concept of a retaining tree.

And this is the paths along the graph that are keeping the

So on the slide right now, you can see a green node.

So the retaining tree is this yellow node here--

as well as this other path from the root to the other

So the object actually has two paths that are keeping it

If both of these paths are terminated, then the object

becomes garbage and eventually is collected.

They have a shallow size, which is just the size of the

And this is usually a very small constant value.

I think on my system, an object is 36 bytes.

All of the variables that the object references are

The sizes of those objects are accumulated, and this is the

This is the amount of memory that could be freed if this

LOREENA LEE: If you go back to the previous slide, we can see

the retained side of the root node would be basically the

whole graph except for those two disconnected

So from the root node, the retain sizes is the size of

Well, the definition of garbage is any variable and

all variables which cannot be reached from the root node.

So in this diagram here, I've highlighted the two nodes

The red node is referencing in the green node, but there is

no path from the blue root node to that red node, making

both the red and the green node into garbage.

So garbage collection happens in two phases.

First, the graph is scanned, and all garbage is found.

So we already know the garbage in this graph was the red and

And then this memory is returned to the system during

Subtitles ListPlay Video

The Breakpoint Ep. 8: Memory Profiling with Chrome DevTools

stuff

path

object

root