How I Made JavaScript BLAZINGLY FAST

Key Takeaways

we've all probably seen code that looks something like this in which an object is created if Ops is not provided and then we create this config option as a series of merges between a brand new empty object the default values and the options passed in there's also other variations of this exact same thing you can think of prop spreading and react all that there's always some form of object creation or spreading or copying that goes on in JavaScript it's very frequent I don't know what it is but I emotionally can't handle seeing objects ever being created even in like the medium path not even the hot path and let's do an entire video why that hurts me okay why that hurts me deep down and yes you'll notice that there's some crap all over my hoodie I was making some dough with my kids for their volcano project okay so this is called being a dad okay this is a dad dad bod dead life just between me and you I even get a little bit like whenever I use a ray dot map or filter because I know I'm creating a closure I know I'm creating a new array okay and it does hurt me a little bit I know it's silly but it does for me it hurts all right so let's actually look at this code for a quick second so what is going on here well what's actually happening is we're creating an empty object then we're going to merge all the keys of our default values into this object now this is done obviously in C plus plus so it's pretty fast but nonetheless key references and value references have to be stored now in this new object container and after that all the options from the past and option then have to be stored in there as well and overwritten now this object has to live but how long does it have to live well V8 has this algorithm called Mark and sweep if you want to know more about Mark and sweep and how it exactly works you can check the description down below and as you scroll down to that link why aren't you hitting the like button on the way down it's so convenient it's there it's like literally it's right there so just press it okay back to code obviously we also create a closure here in which closes over the convict value and any other values that are above this function that you refer to inside of this closure so that means we probably we have some sort of function Arrow function object that gets created we get some sort of closure that's wrapping the values that is the container of the things that are created we also get this many objects being created right here all of these have to be held onto V8 and their life cycles have to be determined when they can be cleaned up it's a lot of stuff now you hopefully see why objects and copying emotionally hurts me but seriously man it's functional you and you're functional okay that's what I have to say that's not too much is that the part that I just finally crossed the line I will unsubscribe from this Channel right now okay do it then re-hit that button and you can too who's not even subscribed go ahead press it right now let's make an experiment in which we test the performance of garbage collection and creation it's pretty darn simple first off this function just creates new objects either with five properties or ten properties depending on what value I pass in up here the fourth argument we'll tackling the fifth R given the fourth intercede argument into this program after that I I have this little copying function that goes on right here that actually just passes the props from one of these objects to another object so instead of just explicitly copying I'm moving over properties one at a time obviously this looks way less efficient than three dots spread it ship it lastly I created this very simple Object Store in which if you try to get and there's some items left we'll grab and use an item out of the pool and when you're done using it call this function and it will return those items one at a time back into the pool increasing of course the length right there foreign based on Prop count we either create an object store with the factory function of object prop 10 and we have a copying function copy 10 or copy five okay so you kind of see what's happening here and lastly the kind of the Crux of this experiment even though I think lastly I set it up there but anyways this is kind of like the Crux of the experiment either we spread the prop or we cache this object and we keep track of its life cycle and we move the props over one at a time and copy them into new places after that we just do something pretty dang simple every 100 milliseconds I'm gonna go and I'm going to release all the objects I have created up to this point and either release them back into the object pool or just simply erase references to them and let garbage collection handle them later and then right here I create about a hundred objects at a time and I increment my total count by 100 objects and if 100 milliseconds gone by we do the thing you've already heard about that and then we just run we run until collect has been called a certain amount of times and then it will stop hopefully that all makes sense I know that was quick but there's a point to this experiment right either a I create a new object and then spread it into new objects over and over again or B I create a new object whenever I don't have any more inside my object store and then spread props into it one at a time via a function I call Copy five or ten all right let's get to the results let's get to the results I know you want to see them so what I'm going to run here of course is going to be style zero that means just use prop spreading uh we're gonna do 200 runs through that 100 millisecond and we're going to use 10 prop objects all right so let's look at the results right here we ran for effectively 20 seconds we created this many objects and we had about 4 600 objects per millisecond created that's pretty damn fast or could be fast all right let's do it again except for this time let's use style one again we ran for an extra couple milliseconds right there we literally created almost 10 times the amount of objects or in other words reuse those objects which ended up meaning that we were doing about 24.6 000 objects per millisecond yes I do know that was a micro Benchmark ran on my computer and right now I'm listening to weed music in my headset while we were running those but when it comes to these type of benchmarks if they were close at all I would have been a lot more worried and I would have probably re-ran them did something or it really shows that it doesn't matter that much but we're talking six seven eight X faster so directionally it is signifi efficiently faster to not let V8 use the garbage collection mechanism if you do not have to so I'm actually going to rerun this again but this time with the inspector attached and we're going to do 2000 so runs for a long time approximately 200 seconds all right so let's just start recording obviously we're on the profiler tab so we can kind of see what's happening within our program all right when we stop it what you're going to see is all these little gray lines here and each one of those gray lines represent garbage collection while garbage collection is running your program cannot do anything yes there are some scavenged and some various things that VA can do off thread but this part is just like sorry you're done you're stopped you can't do anything and when you highlight over it you'll notice something that the self time of this one functions 19 milliseconds but the aggregated total time of all these functions is almost seven seconds and we let this thing run for like what nine and a half seconds that means we're only running about 22 of the time the rest of time is garbage collection all right let's rerun it but this time with our little object pooling strategy jump back over here re-record this sweetness yes I'm using a mouse don't tell my mother okay I don't think she would like that boom what do you see here you don't see very much garbage time who knows what happened right here obviously something went wrong there but nonetheless like very little anything is going on within the program and look at this a huge amount of time is spent within this right here we spent a lot of time 500 milliseconds recollecting these objects but that is certainly better than the seven seconds spent garbage collecting in the other program all right so before you just run out there and start implementing these things okay I I want you to hold on okay I want you to hold on I want you to listen to me for a second okay listen to me do you see how crispy that Camel looks right here why do I look so blurry nobody even knows I suck at AV okay I suck at I suck at it so first thing you need to know is that obviously it is a lot faster but you've got to put it in terms of something that makes more sense right if your program is doing a lot of stuff is garbage collection really affecting it so profiling it would be a very first good step how much time proportionally are you spending in garbage collection is a 10 win worth some complication it very well could be if you have hundreds of servers running in production a 10 win is real money but personally I would not probably do anything like this if it's not on the server or in a library because the library you tend to know the life cycle of your objects you're kind of guaranteeing that no one on the outside has access to them you know what you're doing also on the server you could imagine something like fastify it has these request response bodies that it's constantly dishing out a simple caching of those objects could be a really good performance win for fastify somebody tweet Mateo right now don't say it's from me you can you can take credit okay you can take credit and give them this great idea but again I do want to say that this strategy is very complicated and should not be your first reach for Server performance it should be one of your later reaches profile your server find out what's slow fix the slow if that's not working start looking at memory so I actually have used this strategy more than once at Netflix I recently improved the performance of a tool by about 50 percent by ditching promises which create tons of memory and instead having a series of defined functions as like a kind of like this step that you'd walk through and it's because with promises I was spending about 20 percent of the time in garbage collection and so by just removing that the program flew so dang fast and of course promises there's also other problems with it and performance but you get the idea I hope that you enjoyed this I know this was a fairly technical one tell me what you think about it because I often don't show that much code do you like it did you hit the Subscribe button have you pressed the like button are you sending me those algorithmic signs yes or no and have you joined the Discord if you haven't joined the Discord you're weak probably even see you on Twitch you probably are off there flapping your gums telling me all about why go is the greatest language I mean it's a pretty good language it's pretty good I'd give it two thumbs up the name is the primogen