The Hitchhiker's Guide to All Things Memory in Javascript

0 0

okay um so the errand is flaky so we'll see if I can get through this talk um so as Jake so eloquently mentioned I am Sofia and I'm here to talk to you about memory management and JavaScript if you're sitting in the back or you can't see the screen or for whatever reason you can follow along with the talk at JMP /j s - ma'am - live and you'll just automatically see everything but also the internet is down so you can't it's not moving I'm sorry guys this is no fun it's reconnecting is so awkward oh my god I'm not worried I could do this thing just without slides but that wouldn't be fun Oh I actually can't do this thing about slides yes do we have Ethernet I could tell jokes in the meantime knock-knock King Tut King Chucky fried chicken what does it web developers ghosts a Twitter bootstrap I was going to come on stage and help but you've got this rao's the faster he works the quicker this torture will be over let's see if I can remember another one oh god I can't even have any good memory bank banter what's your what's your favorite memory address oh my god so you see if you have you've been able to use the chrome dev tools in terms of memory cleanup wow you are the only person in the world who can use that that's amazing believe it or not um once this is set up you guys are actually going to be getting the opportunity to interact with the chrome dev tools a bit more I created a tutorial an interactive tutorial for everyone at the conference to follow along with to learn how to use dev tools I always find that it's one of the reasons that I kind of stay away from like the kind of single page app push State stuff because I think no matter how bad I handle memory I know I'm one navigation away from it all being cleared and starting again awesome okay right I'll go away bye bye okay awesome uh so I'm Safi as I already mentioned my two passions in life are data science for social good and open source software and if you're interested in learning more about that or the open source work that I'm doing I'm captain Sofia on Twitter and github and NPM um and like MySpace and Friendster and all the stuff and Sophia don't rocks is my website so what are we going to be talking about today I just want to give you a quick outline of what you guys are getting yourselves into so first I'm going to talk a little bit about why we should care about memory as software engineers whether you're working in the client-side with JavaScript or the server-side I'm going to give you reasons to think about memory first and then we're going to talk about what it means to manage memory and for those of you who might have computer science degrees this is going to be a throwback to your systems or compilers courses so I'm sorry if I'm bringing up very horrifying flashbacks right now please bear with me and then we're going to talk it all in particular about how JavaScript manages memory and then we'll finish it off with how we can write memory performant applications but what are some tools and techniques that you folks can use and once all that is done you will be wizards and witches of JavaScript after battling the Dark Lord of memory leaks um so first why do we care about memory why is memory important to us as programmers and these are three very bias reasons that I have for caring about memory the first is that it forces us to be more inventive programmers I always think it's great to add restrictions to the way that we develop our software because it forces us to reason critically of our our applications to analyze and debug things and use tools like the chrome dev tools and to build better there's no way to get somebody more creative and inventive than by locking them in a dark room or by placing them in the middle of the Sahara in 100 degree weather with no Wi-Fi and having them code ask me about that later memory is scarce and although the amount of memory that's available on machines has been increasing over the past couple of decades so have people's expectations of what their machines can do your users expect your applications to be able to handle their multitasking workflows users expect and deserve really rich interactive web experience and those things tend to be really memory intensive and then finally it helps us exercise our empathy muscles I view empathy as a muscle that you can train in thinking about the different conditions that your program is going to be used in or your application is going to be used in in the context of memories a really great way for you to discover new user stories and start to think about how your applications being used so now that we have a couple of reasons to care about memory management let's go a brief overview of what memory management is so if you programmed in C you are familiar with a paradigm known as manual memory management what that means is that you as the programmer had to allocate memory on the machine using malloc then you were done with it you're responsible for freeing it using free now there's a fundamental issue with that and it's that this is a huge cognitive load on you as the engineer you can imagine in addition to having top-down missing semicolons and arguing over where you place your curly braces and thinking about algorithm design and software architecture you have this additional cognitive load of managing the memory of your application and actively thinking about it so you can imagine software written this way has lots of memory leaks has lots of other memory related bugs no fun for anybody and that's where the concept of automated memory management comes in it's known as the garbage collector this is Oscar the Grouch from Sesame Street um and the garbage collector is really in charge of finding out where garbage memory is and then clearing it away and we'll get into that a little bit later an automated memory management has its pros and consequences the first big Pro really for us as engineers is we don't have that cognitive load of having to manage memory on our own the consequence is that the garbage collector is an application it's another program that runs in order to clear your memory so it does have a performance endurance and depending on how good your memory allocator is and what technique it's using that hindrance might not be as bad that is still a consequence also so now we talked about memory management and we're going to cover it in JavaScript really quickly is everyone with me so far oh yeah get hyped so for the rest of this talk I'm really going to be focusing on the v8 JavaScript engine um we're all pretty familiar with it if you use Chrome that's the thing that's interpreting and executing your code you're using node or MongoDB on the server side it's responsible there so um sorry for all the other JavaScript engines who won't be getting any love from me today but v8 swear it's up so let's start off by going through the basic data types in Java Script I'm going to start off really easy and then like ramp it up super fast so if you're boole's right you're trues your falses your numbers your one two threes any of your strings your hello worlds and your man cats and all that and all of these are the sort of elements in the JavaScript universe and they can be combined to form different compounds and molecules in your application these are really the basics and where that becomes relevant is how memory is allocated memory is allocated in a heap structure so it looks something like this so the read node you see there is the root node this is something like the window object the root node has edges pointing to other nodes in this case the blue nodes and the green nodes the green nodes in this particular case are your boolean's your numbers and your strengths those fundamental elements the blues are references to those things so this is what memory looks like it's definitely a giant heap which is why Jake made that joke earlier and v8 does something where allocates memory into six different spaces or chunks and there's sort of a method to the madness of why it does this and we're going to find out why later I hope I'm keeping you on the edge of your seats with all this like we'll find out later try to keep you guys excited so let's talk a little bit different kinds of spaces so the first space is the new space this is where memory gets allocated when an object is immediately created objects in the new space tend to be smaller they're newer new space your next space is the old pointer space so if an object is in the new space and it's a reference to an object it's not a scalar itself and it's resided in the new space for a while it's been actively used it graduates the old pointer space and if it's not a reference the scalar graduates to the old data space and then you have the large object space this is where you store giant look-up tables and things that don't you don't want to fall under the memory restrictions or the size restrictions of the new old end of the new and old space and then you have the code space the code space is special because it contains executable memory memory on your machine by default is not executable because you don't want to go around just running whatever data is on your memory that would not be good and so items in the code space are generally get instructions just-in-time compiled and then the last space is the map space and this contains maps property cells and cell these are used by the JavaScript engine and really for the rest of this talk we're going to focus on two spaces the new space in the old space so you can kind of forget about the rest and you can treat it as like fun stuff you learned so this point we've allocated objects in memory they're in our heap how do we know what to clean and how to clean it and really the answer and the basis for this is reach ability memory is considered garbage when it's no longer reachable or accessible in your code this usually tends to be data that is not reserved for local variables or function parameters or global variables if you look back into the heap the way that we can determine what is considered garbage is by traversing through our heap so you can start off at the root node anything that you can access by traveling through nodes in the heap is considered accessible and reachable things that you can access are not reachable in their garbage so these two your out garbage but how exactly does JavaScript collect garbage or the v8 engine collect garbage we know how the allocates memory we know what it considers garbage how does it collect it and the v8 engine employs something called stop the world technique for garbage collection and so what happens is programs halted like complete stop and then there's a pause and that pause there's a moment where the garbage collector runs and it's a brief short cycle and that's really to offset that performance hindrance so you're just running quick garbage collection cycles in pauses in between your program this next step is going to be a perfect representation of what this means yes we've all seen this um so if you remember earlier we talked about the new space and the old space and so when you start to go through these garbage collection cycles the v8 engine has different approaches to how it collects garbage in the new space and how it collects garbage in the old space so we'll start off by talking about how it collects garbage in the new space and and before I go there this sort of idea of having a different garbage collection approach to old memory or and to old data versus new data is known as a generational garbage collector just think you're kind of like approaching the age of your memory in-app generations and you're treating each one differently and so let's talk about how garbage is collected in the new space and it's a process known as scavenging and so generally memory and the new space is collected more quickly than memory in the old space just because it's newer um and what tends to happen is when your new space is filled the v8 engines going to go ahead and start a scavenging garbage collection cycle in the new space and what happens in this Gavan process is your garbage collector is going to go through your entire heap it's going to traverse it starting from the route it's going to make copies of everything that it traverses and it's going to clear out what was previously in the new space and so the copies it has made is everything that it could reach in a traversal of the heap and everything that I couldn't reach and couldn't copy is considered garbage memory so that's okay now for those of you are paying attention to how this technique works you might realize the fundamental problem with it which is that it has a very high space complexity you need to have double the amount of memory that is the size of your new space for that copying over and this might be a kind of consequential thing but is if you recall the data in the new space is younger smaller data so the sort of fact that you need double the size of the new space is not that big a deal so if we go back to our lovely memory heap we're going to start off at the red root node and then traverse over to the blue and then go over to the two blues and then go over to the greens and our garbage nodes are never traversed and they're never each and they're never copied over and they're just like obliterated into nothingness and then for the old data space um there's a different technique that's gets used and it's the mark and sweep technique and the mark and sweep technique works by traversing the nodes in the heap marking the ones that are active and then removing unmarked objects on a regular basis and I know that was a super cryptic description and I could like for you guys right now with an entire discussion on mark-and-sweep um but I want you to stay my friends I really hope you do ah so I won't torture you that way but in all seriousness mark-and-sweep has a very rich history in computing and it merits its own 30 minute maybe 45 minute talk if the organizers will let me but if you guys just want to grab me during lunch maybe do it tomorrow because I'm still jet-lagged but yes I'm happy to talk about it so at this point you're almost almost masters of memory management or JavaScript you have an understanding of why we care about it what memory management is in a general perspective how it works in JavaScript how the v8 garbage collector works now you want to start to apply these and only the best way to approach this is to start by asking yourself two simple questions which is how much memory is my application using and you're never going to get a solid quantified answer for this because that's not how it works but you can start to develop ranges you can start develop metrics with how much memory you're comfortable with having your application use and when you develop these metrics it's important to consider that your application runs in the context of other applications so like all eight gigabytes of memory or all four gigabytes of memory on a machine like belong to you entirely which is sad you're sharing these lots of other applications if you've seen people use like 48 tabs in their Chrome browser and you're like why do you torture your browser like that you have to like share memory with all of the other taps that they have open and the second question that you want to ask is how often does the garbage collector cycle in my application how often does it run and you can actually find this out all I don't have pictures of it in my talk but if you use the chrome dev tools timeline tab thing that shows all the stuff that's happening in your application Jake will explain later you can actually find when garbage collection cycles are running in your application you can determine how frequently they're occurring that might be symptomatic of how fast stuff is allocating in the new space so if you're like aggressively allocating new memory and a loop or something like that you might want optimize that there's like stuff you can do that brings us to the right tools for really messy job debugging memory is no fun like I'm surprised most of you are still engaged in this talk way to go good job but good tools can make it much easier and so the first awesome tool once again in chrome dev tools there's tons of awesome tools and chrome dev tools mostly because the folks at Google are building lots of very memory intense applications things like Gmail things like Google Drive and so you know if the like Google Drive team or the Gmail team is like and we need tools to like debug figure out memory in our applications they'll like go go bug the chrome team and the chrome team will be all like alright we're at your service and so the result is that there's a rich toolset for inspecting heap allocation and for examining and profiling our applications and dev tools yeah that's great for us as programmers and so this is a snapshot that I took of the chrome dev tools heap allocation profiler running on the Facebook web application and there's sort of two curious things that I want to point everyone to which are the retained size and the shallow size of an object and you'll see these mentioned a lot when you start to like independently research memory management because I got you so excited about it the shallow size of an object is the amount of memory that it holds in and of itself and the retained size is its size and all of its dependents if it's pointing to anything in the heap structure it's all of those and the chrome dev tools allows you to see that oh my god there's there had to be an NPM command and this after load is talk yay another great thing about having tools like NPM available to us is that people can build utilities to help other programmers do their stuff and things better and so we're all happy people as a particular utility that I want to showcase here is called heap dump um heap dump is a JavaScript library that you can install for node and it allows you to take a snapshot of your heap at a particular instance and it's a super easy to use library it's got a very simple API there's only like one function that exports which is write snapshot what you can do is you can take a snapshot of your application at a particular instant and you'll get a file with a dot heap snapshot extension and then you can actually load it into the chrome dev tools profiler and start to analyze it inside that really awesome interface that the team at chrome built instead of reading the like raw Heath snapshot file don't don't do that that's not smart spare yourself the trouble awesome so I'm going to try and stay on time um here with four minutes left I mentioned that I put together a resource for everyone here today ah that I will show off now um awesome okay hopefully everyone can see this awesome so this is just a interactive experience that I set up and it starts off with the very basic console logging things um and you start to get familiar with the heap dump tool in writing snapshots and there are some questions for you to think about this is basically a homework assignment so I'm like I'm like your college ciass professor that you hated but hopefully funnier um so I'm going to go ahead and publish this really quickly so if it works awesome I'm going to live tweet it out awesome so this way you guys will be able to see I can't live code in my presentation so the least I could do is like live tweet that'll help right also there's probably a typo in that as is there a typo and all my tweets thank you for the applause I know that was all of computation led up to that um awesome so feel free to check out that tool there is a link to that github repository for it so if you have trouble with it or like you're confused my my directions or you think there should be more jokes in there just open up an issue and I'll address it if you want to get the slides for this talk they're available at sofia Rox um there's a talk section on my website and if you scroll down you'll see all the good stuff and finally thanks for being a wonderful audience thanks to the organizers for putting this together and for like bringing us all here I'll try and get a lot of sleep tonight so I can like actually communicate and interact with you people without being jet-lagged insane but thanks I hope my talk was like super informative and you took something away from it or you just like liked my jokes that's fine too I'll stop talking now and Jake can come up and pills