So an allocation will take a long amount of time, and then it'll just grab a few heaps as you go through there, basically. It's basically the same as taking a bunch of heap snapshots, but you can start seeing, is the memory going up and up and up? Or is it going up and down, these different things. And so these are really cool, these kind of allocations over time. Beyond that, you can do these kind of allocations. So you can take one, give it a few seconds, take another one, compare them to each other, see what's changed. But what's also really neat about them is you can take multiple and compare them to each other. So the first one is it takes a heap snapshot, and these are really cool because they'll show you everything that's being used, so you can see what's using the most memory. Paused because of potential out of memory crash. What's going on here? The first one is a heap snapshot, so it just grabs the whole memory heap, everything that's being used, and it'll show it to you. And basically they have these kind of three tools for analyzing memory, cuz now we're getting into, well, what's using that memory? So then the next thing you want to do, confirming you have a memory leak, which you do via the task manager and via the Performance tab, is you wanna go into the memory section. And it kind of breaks into those categories so at least you have some clue of where to start with it. So it breaks it into JavaScript memory, document memory nodes, like elements and event listeners. A cool thing about this is that it tells you specifically what type of memory it is. This might be normal if it was calculating something, but for a page just to be sitting here, we shouldn't be seeing these jigsaws, right? And so this is always the shape that you want to watch for is this up and up and up jigsaw. And it does clean and then it just starts growing and growing and growing and growing and we're not doing anything. Whereas the blue, you see it kind of starts off its thing here. And then they're done, right? Then yellow is back to this, just one. We'll get into garbage collection in a second. And then they finish and a garbage collection happens here. So the page starts, and they start reasonably high, a decent amount of memory being used. > Jon Kuperman: And here we go, this is the jigsaw pattern that we don't wanna see, right? And so what we can see is what you normally want to see and actually I think there's some good examples, yeah, so this yellow, this event listener is a great example. > Jon Kuperman: I'll try to move these tools. What I'm gonna do is at this time is I'm gonna move up the memory view It doesn't need to run for a significant amount of time, but you do wanna see is this building over time as opposed to a one second. I'll let it run for usually a couple of seconds. When you're doing performance recordings from memory, you wanna do them longer, cuz you wanna see it over time. And remember in the last section I said when you're doing performance recordings for CPU, you make them as short as possible. So with the Performance tab, we'll check this memory checkbox here. The memory tab is the best one for figuring out what it is that's what's going on. The performance tab is the best one for spotting a memory leak. Again, performance and memory kind of have a lot in common. A way of visualizing it is if you open up DevTools, you can go ahead and pin this back to the bottom. If your site's just sitting here and your JavaScript memory usage is going up, that's a really good way of knowing you have a memory leak. But mine is mastering from DevTools is just going up and up and up and up. And the two of them from my slides with those Ss on them are stable, right? They're not moving cuz they use the memory they needed to use and now they're using it. Really, I think two of them are from my slides. Unfortunately, I can't zoom in, but as we see, we've got three tabs open, right? And so what we can kind see here, I know it's small. And then you'll wanna select this top-down view of JavaScript memory. So you'll want to right-click up at these headers and add JavaScript memory. And then by default, JavaScript memory won't be on there. ![]() I'm not sure how many of you knew, but Chrome has a task manager where it keeps track of each tab and its performance. So if you go to these three dots up in Chrome, and you go down to More Tools > Task Manager. So the first one, is the only thing that I show that's actually not part of the developer tools, but it is part of Chrome which is really cool. And we wanna see what tools that we have for catching memory leaks. So what we wanna do is this is a page that I made that has a memory leak on it. > Jon Kuperman: Kind of back over here on the lessons page, we've got this memory leak section. Transcript from the "Chrome Task Manager & Snapshots" Lesson
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |