How Slow Is JavaScript? | Prime Reacts

all right how slow is Javascript I've gotten a lot of flack for using JavaScript for a lot of these projects and possibly rightly so historically it's been a super slow language not one that you'd associate with game development and I'm actually not sure how fast it is I'm not actually a JavaScript programmer I just kind of play one of these videos so I'm kind of curious what we find here a very brief history of JavaScript apparently life for JavaScript started out around 1993 a programmer for an escape name I feel like the history of JavaScript has been told so many times at this point it might be the most told story in the programming world and Brendan I crapped it out over the course of 10 days which is pretty amazing given its popularity today we'll fast forward a bit bunch of crap happened over the years JavaScript got standardized through ECMO International none of this is particularly and then JavaScript got stabbed in the Buns by Microsoft why do I know this voice I have no idea yeah Microsoft uh really hurt a lot of ecmascript they were really trying to make jscript or whatever it was called the thing what's ecma irrelevant to us so let's just kind of skim through here so in 2006 Google hired this guy Lars back to build a new JavaScript engine that would go on to become V8 and this is where things got interesting okay this is where JavaScript changed from being this painfully slow interpreted language to one that had compilation I like it here's a seemingly endless stream of clever optimizations has trickled out from the VA team dramatically improving performance year after year I do think that that is just not said enough V8 is truly the reason why JavaScript is awesome V8 made what a crappy language the VA team was so talented they took one of the worst languages of all time and made it pretty fast like they did a pretty good job like no one could be upset about that I should really cover that mic arm shouldn't I like they did that they did that imagine how hard that had to be uh you sound like you're friends with someone who worked on the VA team in 2019 at the international JavaScript conference there was a talk called speed speed JavaScript versus C plus versus webassembly by one of Google's Engineers oh I saw that talking because they had some benchmarks where they showed roughly how close JavaScript and C plus plus was for the same algorithm now I don't have the source they used but I I never liked this comparison because it's so single-minded uh or single like I hate single implementation you know like if you watch any of my main channel YouTube stuff you always see how I talk about like I've done a lot of performance things and when it comes to like building something actually even if that actually is small the difference between JavaScript and something else is is just you know it's just massive it's just massive they got roughly a 2X difference which is pretty good and we'll use that as a baseline for our own comparisons let's write some code by the way quick reminder to subscribe and if you want to support me making future videos most games I've ever worked on don't involve millions of string manipulations and stuff it tends to be mostly math and manipulation of data structures so we'll stick to that side of things first up I'll start with the soup he just hit us with so much math that I don't even know what happened I just looked at the math saw some integrals realize I'm not very good at integrals you know what I mean I'm just not that good at integrals I thought I was good at integrals I'm not good at integrals super basic Loop gotta have a basic Loop let's just Loop over a bunch of crap and sum it up for something no reason other than it's easy you can see the C plus plus code is pretty simple just a for Loop which code here is virtually identical just a simple Loop send them up wrap the loop in performance.now calls it runs in about 22 milliseconds or so on the first run and then 17 milliseconds and later runs I'm guessing all right so the thing I don't like about about this type of optimization that that he's speaking about or just even this comparison in general is that one of the biggest problems here is that there is no like interaction with what makes JavaScript bad you know what I mean it's like such a tight experience that javascript's big part that it falls apart on is not this like yeah the jits really fast like it did a really good job but where things aren't good is when you start allocating and deallocating notice that we're really just not doing much for allocations or de-allocations uh because it's a small number so they called us me right so that's stored in a single pointer where the first bit is a zero I think it is and that signifies that it's a small integer stored in there so it's like it's such like a small nothing that happens in the JavaScript engine whereas like the moment you start allocating anything that's when everything starts breaking down not only that but you have to like let it run for a while like let it run for five minutes doing something and then watch how much does garbage collection make a real difference in the performance of say a server uh I mean real and optimization's kicking in to really absolutely nobody surprised the AC plus version is faster compiled with gcc-o3 which is the highest optimization level we get about 15 milliseconds what's pretty cool is that it's not that much faster than the JavaScript version only a two millisecond lead how about we try more complex calculations let's emulate a basically well again he's saying don't do it for uh game stuff because it's slow I would assume that you create objects and you throw away objects and stuff like that I think the garbage collection can be a really big problem and so I'm curious like you have to not create garbage to make it work out JavaScript I think you could make one in JavaScript that's like a simple game because you just have to make sure that you statically allocate everything and then you reuse all of your objects and you make sure you never have to use delete right you have to have some sort of like good way to make pools so that way you don't accidentally make stuff in like all these terrible ways blah blah blah uh because you never want to like delete or do something like this basic glsl Shader with a supply normal in color and use a directional light look something like this chunk of code JavaScript write shaders at one point I have no idea how they work anymore I just it was like a decade and a half ago now they're just magic to me when I look at code I'm just like wow it's magic we'll start by generating some random data to serve as the frame buffer and then just a big loop over all the data to do the dot products multiplications Etc Plus Code about as simple as it can be pretty much the same Loop and I've got a vector class here just to simplify things a bit not unlike the JavaScript version we'll inline a bunch of stuff not that it matters my understanding is that these are hints at best and ultimately please don't mind me I let this run a bunch of times and took the best of the runs that gives the jet compiler time to do its thing identify an inline stuff best foot forward and all that anyway got around 110 milliseconds or so 109 milliseconds on the best run give or take a few milliseconds here or there maybe the first result is any indication the C plus plus version will be around 95 milliseconds but the margin of Victory is pretty substantial on the C plus plus side 27 milliseconds so that comes in at over four times faster for this just the most basic version of the loop with gcc-o3 let's do another example so I think that was that one was getting closer I wonder if he was uh creating new objects or was he still reusing the same objects and the real question is is he perform you know like again it just always comes down to garbage collection memory and allocation and all that so if I guess as long as you're reusing everything maybe it's you know you could argue it's not as as big of a problem as it is uh I mean I can buy that argument game updates tend to involve updating many entities manipulating data structures that sort of thing and I did something similar with these spatial hash grids a while back check out that video for the JavaScript implementation but let's quickly Port that yeah anything special no clever optimizations or anything this is just a straightforward line-by-line Port of the JavaScript version to try to be fair so I'll run the JavaScript Benchmark here and we can check out the results I got around 167 milliseconds or so for five nearby and eight milliseconds for the update roughly now when we run the C plus plus version we get around 86 milliseconds per fight nearby and six milliseconds for the update so actually not that I do feel like you can't you shouldn't Port things one for one like line of Code by line of code you should try to use like the general constructs that are good in one language versus another right like so if you just did like a straight you know transport to rust you'd want to use Rusty type principles and if you you know just like we were talking about earlier like if you're using buying docs or box dine uh trait references to make it work out in in Rust you're going to be doing things that are just inherently slower than not doing it that way and so you know is it should you always write things one you know yeah idiomatic translations not transliteration so a lot of times we do like for these things a lot of times we we would do something like a transliteration where you're actually just line by line transforming that line of code into a different language whereas you should do like meaning for meaning translations Greg Greg leptos Greg understands in line with the twice the speed claim from the VA team what does this all mean all in all not too bad of a showing for JavaScript for a straight comparison with C plus plus code we got very roughly around two to four times the time for JavaScript to run versus the equivalent C plus plus code a bit slower than what Google said but at the same time meaning for meaning called it yeah you did pick you always call I don't know how you do it how do you always call it how do you know I'm still pretty amazing given this is supposed to be a slow web language let's screw around a bit more when I compare the dot product version I had written several versions comparing performance the version shown wasn't the fastest but it also wasn't the slowest I played with versions that were straight array implementations so normal in color was a three element array I also tried it out with objects with XYZ properties and they all were roughly in the same ballpark give or take there might be small differences but I kind of lumped them together I also wrote a four of loop instead of a classic for Loop since I'd heard somewhere that they were slower but I didn't see a world of difference here yeah when I tried just using one big typed array of floats I managed to get the loop down to 17 Mile seconds or so there you go these typed arrays you get a lot of benefits that you just don't get in regular JavaScript and so I think this is really important thing that he's calling out right here type to raise in JavaScript allow you to have uh like a big continuous block of memory and so if you're doing operations especially if you're doing operations that can be easily jitted you could you could get some pretty amazing things coming out of this I think that's where you're going to see a lot of the benefits in the JavaScript world I wonder if I could make a JavaScript program perform really well you know just a thought so about two and a half times lower than the C plus plus version albeit at the cost of some readability but there's some performance foot guns floating around too when I tried map and four each their performance was seriously unimpressive a straight Loop was a way bigger win but wait there's more we're not done with C plus plus yet because normally in games we have a bottleneck that involves turning through a bunch of data doing calculations often the first instinct is to go out and break out the intrinsics and vectorize that section of code so what I did with the first Loop was I just quickly cropped out an SSE and an AVX version so purchasing four eight floats at a time did clearly smarter than me the end result was that our time goes from 15 milliseconds to six milliseconds for the soc version and four milliseconds for the AVX version so not bad that makes it over four times faster than the JS version the second Loop the Shader same thing I went ahead and made a simple SSE version got a little bit lazy about making an AVX version but still saw an immediate Improvement the time went down quite a bit but wait there's even more we're using gcc-o3 for the tests but at these games I've worked on typically they ship with unsafe math optimizations so we'll go ahead and swap that for dash o fast one thing to keep in mind is that floating Point operations aren't associative meaning brackets a plus b plus C does not equal to a plus bracket B plus C since floats are inherently inexact by specifying so fast we've given the compiler permission to break strict standards compliance and go ahead and reorder floating Point statements for games this is generally fine calculations just need to be close broken Math called it it's enough when we do that the first Loop the scalar basic version drops to four milliseconds on par with the AVX version meaning I kind of wasted time writing that when the compiler's version was just as good it looks like the basic Shader dropped down to 22 milliseconds from 27 so got a decent win there and I'm not clear I saw much of a win on the spatial hashgrid code but maybe I didn't run it enough times so what does this all mean this wasn't meant to be the most scientific of tests I mostly just wanted to get a rough idea of JavaScript and relative performance that being said honestly JavaScript surprised me a bit I mean I've been screwing around for the last year in my spare time on random projects to see what it could do but I'm very much not a JavaScript programmer I spent most of my career in C plus plus with a few years in Python if you couldn't tell another JavaScript code it's definitely not that slow crappy language that it was back in the 2000s and the Jet compiler is just going to keep getting better and better over time so expect the difference between C plus and JS to keep narrowing in the future as the VA team comes up with ever more clever ways of generating machine code the C plus plus was that Turtle doing drugs is that what I'm saying right now are we having some sort of totally drug problem going on I don't know about this this doesn't feel right kids don't be doing okay I've heard I've heard a lot of kids have been doing jit these days on the street um and you know I I have you seen what your brain yeah have you seen what happens to your brain when you're on jit it's not good okay not good though I do hear it does help your max honestly like if you're hitting the gym a lot maybe you do want to jit a little bit you know not like jit a lot you don't want to get like some you know jit rage you just wanna just a little bit you know do it for the Bros come on just a little bit nice thing is that you've got options you can go lower and lower level massaging your code to be even faster and compilers are super good and getting better every year I wasn't actually expecting to be GCC I figured it's Auto vectorization would have beat me out easily maybe it has something to do with the way I'm using a vac 4 is a Vex 3 with W padding or maybe I just made some horrible mistakes somewhere but but anyway I get the easier role in that I understand my code and my specific intentions and it sucks to have the compiler's job I guess maybe the next step is to learn to read my mind until next time cheers I did it is kind of funny that we just watched a video Hey look it's me hey look it's me uh it is kind of funny look they're giving me my own videos uh it is kind of funny that we watched two videos in a row that are effectively the exact same idea but almost like inversions of each other where like he's just like ah look you can't get faster but look at this this code is kind of like the way I like it you know what I mean kind of like that you know or the other was like you get faster now I don't know I I think no matter what JavaScript will always be slower compared to any native option like it just can't beat them but the benefit of JavaScript is that it's pretty easy to write you know like if you're just doing stuff it's really easy you can get Vibe really really quick I've been using I've been doing JavaScript I've been jitting you know I've been hitting the Jets you know for a while now and I must say it's it's it's pretty easy but it's also not that easy sometimes like if you're using typescript and you're defining a types of some more complicated operations I'm gonna say that that if I were to Define this in Rust I would spend significantly less time like so much dude like so much less time I think that's the thing is that I think JavaScript written as an application is easier and faster to write than rust but JavaScript libraries that involve typescript and just doing all that stupid typing that you have to do I think is just massively massively harder than rust like by a significant portion because the the type system is nutty right like the type system is you're you have to write so much more code to make it correct and then uh it's just it's just a lot harder I'll be able to show you guys the code here in probably about three months

Channel: ThePrimeTime

Views: 168,116

Keywords: programming, computer, software, software engineer, software engineering, program, development, developing, developer, developers, web design, web developer, web development, programmer humor, humor, memes, software memes, engineer, engineering, Regex, regexs, regexes, netflix, vscode, vscode engineer, vscode plugins, Lenovo, customer service

Id: i10RLT6EAGM

Length: 15min 33sec (933 seconds)

Published: Tue Mar 07 2023