Honestly this is some of the most edge case Javascript stuff I have ever seen. I love it so muchhhh
@pranjalagnihotri60723 жыл бұрын
Your Javascript lessons are "The Best", your experience talks for itself 🔥
@simondev7583 жыл бұрын
If this helped you in any way and you'd like to support future vids: www.patreon.com/simondevyt
@aufkeinsten78833 жыл бұрын
Have half an hour of work to kill and didn't want to assign myself a new ticket, then this popped up - truly godsent :D
@Rssks3 жыл бұрын
8:20 if you could (in depth with examples) explain all shared datatypes and atomics, please do. That's something I wish someone like you would explain to me :)
@Mal1t1aTV3 жыл бұрын
I feel like I actually learned about web workers and have a better understanding of what they are and how they work. Way better than random google searches!
@pawekoaczynski45053 жыл бұрын
This is quickly becoming one of my favorite JS channels
@dhawaljoshi3 жыл бұрын
would really appreciate more videos on multi-threading with Javascript.
@thomasbates91893 жыл бұрын
Thank you! Thank you! Thank you! I really wanted to see a video from you that included threading!
@MYMPSWORLD3 жыл бұрын
Great video! This is the first video i have seen going deeper into the js threads. Please keep posting more content like this. Do you have blog where you post the video content in text format? That will be great for quick reference. BTW , in Nodejs environment, we have worker threads which are kind of similar to web workers and solves the same problem.
@simondev7583 жыл бұрын
Nah, this is it for now. If that's interesting for people I could definitely go that route in the future.
@philodox13 Жыл бұрын
Well explained video on using transferrables. I'd love to see a followup on using Shared Array Buffers with Atomics. It'd be nice to see a tech breakdown on typed arrays and how to properly implement them. I'm currently using transferrables for 3D physics animation but would appreciate any insights into making that faster. With 3D simulations I've found every millisecond counts.
@ilin76bb3 жыл бұрын
After completing my Basic HTML course today - thank you for that easy tutorial on Javascript.
@none0n2 жыл бұрын
This smells like sarcasm
@ilin76bb2 жыл бұрын
@@none0n nah it was my fart you smelled
@soykike19913 жыл бұрын
Simon you are awesome, I wrote something similar about the JS workers in the other video, but never thought you would actually make it, very thorough I am actually impressed on your dedication!
@frahohen3 жыл бұрын
You are really good at explaining in simple terms.
@ioshaven4363 жыл бұрын
You may be able to see performance gains if you structure the workers as a predefined pool which pulls from a queue of callbacks to prevent unnecessary worker instantiation.
@simondev7583 жыл бұрын
Maybe yeah, would be interesting to see what the cost of spinning these workers up is
@fueledbycoffee5833 жыл бұрын
@@simondev758 I actually did this for a web game engine project and then you are left with the time spent serializing your objects. in my case was about 60MS round trip. would like to try transferable objects to see if i can use it for a more "real time" approach without stutters in game
@BogacGuven3 жыл бұрын
Always a pleasure to watch your content. Thanks for putting these together. ❤👍
@boudyhesham58753 жыл бұрын
i loved it man amazing like always, if there was one place that i wish to work at i would wish to work with you you're amazing keep it up!
@taylormason30523 жыл бұрын
The new Dune movie was awesome! Still, the David Lynch version will always have a special place in my heart. Great video!
@mattropolis7857 Жыл бұрын
You are correct in your interview. I learned this the first time I implemented a more clever free list vs one that was a stupid linear array. Even then the smart one was log n and the array was order N. The performance dropped by 20% because the linear caching vs cache misses of the log N version. i went back to the linear list and got my 20% back.
@James22108 ай бұрын
He never misses, the absolute legend
@aliphian3 жыл бұрын
Awesome video. I love your presentation style.
@ToothlessXDIn3 жыл бұрын
Javascript: One cannot have all the knowledge about me. SimonDev: I will take that challenge personally. Dam, this guy is so good. Glad i found this channel a few months ago by searching for a procedural terrain.
@aj35lightning3 жыл бұрын
ahhh thank you! this is exactly the video i was hoping for
@ruigaspar10593 жыл бұрын
Amazing video! Hard to find such good content as this.
@IDontWantAHandleKThanks3 жыл бұрын
Thank you father. We love your videos!
@v8metal3 жыл бұрын
this is my favorite "dev/code" youtube channel :)
@falxie_3 жыл бұрын
I really appreciate the research put into this
@RocketFever223 жыл бұрын
An amazing 100% interesting up to the point video. Thank you so much!
@JustVincentD2 жыл бұрын
This is actually awesome
@pist53433 жыл бұрын
Lovely! Quality work as always Simon!
@brennorris70613 жыл бұрын
Really nice post. Thank you!
@Skeffles3 жыл бұрын
Super interesting! I was under the influence this was not possible.
@oah84652 жыл бұрын
That was fun to watch. Thx a toooon
@Lorkin323 жыл бұрын
Now please do wasm inside web workers! I played around a little with that but found it too daunting to actually get working
@mkmyuu3 жыл бұрын
Loved this! More generic JS stuff please!
@shapelessed Жыл бұрын
JavaScript (more specifically in Node) *DOES* support threading although it's limited and abstracted away. Pretty much all async operations like streams, accessing files, handling requests - this is all handled in separate threads using libuv. In the browser you can spawn a separate thread and basically offload computation-heavy tasks to it through its API so the main UI thread will not freeze on you,
@TylerLarson Жыл бұрын
I don't quite understand. If we're talking about async operations then the thing we're offloading is largely io, not computation. So it wouldn't be using threads, it would be using something like epoll. I saw that libuv has a thread pool implementation, but since node apparently supports the same Worker thread API as shown in this video, it's not clear whether libuv's pool is just an implementation detail of the Worker API, or what.
@lethern29 ай бұрын
Probably you know the following, but maybe worth bringing it up.. One cannot have multi threading with shared data and no means of limiting data access, and thats what JS avoids by being single threaded, and as was covered, you can't access data in other threads the same way you do in main thread
@agumonkey2 жыл бұрын
High quality cruftless content. Thanks a lot.
@evgeniytimofeev60822 жыл бұрын
Very useful, thank you!
@chevotebenadoa Жыл бұрын
Service workers is a thing if you work with PWA. From iOS 17 there will be support for it, and Android already have good support. Thanks for info about serialization messages speed and hardwareConcurrency!
@iba0013 жыл бұрын
This is great, thanks!!
@Otakutaru3 жыл бұрын
nicely explained. Just one question prevails... WHY CRABMAN?
@simondev7583 жыл бұрын
I have no idea, at some point I picked up that name as a handle and I still use it occasionally.
@danielli32883 жыл бұрын
we frontend developers usually don't know about this stuff, so it would be nice if you explain what threading was, just a brief explanation would be good. though i think i got the idea in the end
@danielli32883 жыл бұрын
I love these types of videos btw hope you make more of it
@Henrix19983 жыл бұрын
You need to dive relatively deep to really get threading and concurrency and when to use it. There are surely good videos in youtube, this one for example kzbin.info/www/bejne/bXaxd5iYYq9qa80
@chrishamilton17283 жыл бұрын
It's just operations being run in parallel. ie. I can use one cpu core to calculate 2+2, and then 3+3 - or I can use 2 cpu cores to calculate both 2+2 and 3+3 at the same time, so it takes half the time (theoretically). A thread is kind of an abstract idea - it's just a piece of code than can be run in parallel (In this case 2+2 is a thread, 3+3 is a thread). One cpu core can run one piece of code at a time - one core to one thread. The nuances come when you need the threads to share memory. ie. My first thread calculates 2+2 = x, second 3+3 = y, and third x+y = z. I want my first two threads to save x and y somewhere in the memory (RAM) that my third thread can then access. The fastest way is to have all three threads executing in the same context - which just means they share the same memory addresses in the RAM. The initial problem in this video was that the threads all operate in their own context - they all have their own RAM addresses. Thread 3 does not have direct access to the memory addresses that x and y are saved in. That means for my third thread to get x and y, I would need to copy both variables from one context to another, which takes time.
@sanderbos42433 жыл бұрын
@@chrishamilton1728 Awesome concise explanation, thanks! :-) One small nitpick I have is with "One cpu core can run one piece of code at a time - one core to one thread.", cause the Mozilla Docs on Navigator.hardwareConcurrency states: "Modern computers have multiple physical processor cores in their CPU (two or four cores is typical), but each physical core is also usually able to run more than one thread at a time using advanced scheduling techniques. So a four-core CPU may offer eight logical processor cores, for example. The number of logical processor cores can be used to measure the number of threads which can effectively be run at once without them having to context switch."
@chrishamilton17283 жыл бұрын
@@sanderbos4243 I think that's referring to hyperthreading, which is where some software splits every "physical" core into two "virtual" or "logical" cores. It runs two threads on one core, but alternates which one is running. There can never be two processes running on one core at the same time, that's just not how a cpu works as far as I know. I know you only get like 30% performance gains with hyperthreading even though you're "doubling" the cores. Edit: turns out modern cpus can do some instructions in parallel, for example an integer operation and a floating point operation. If two threads are being hyperthreaded, then some operations may run in parallel, but it's not the same as a whole other core - hence only 30% gains.
@MrJester8313 жыл бұрын
I really wanted this to be a Rust FFI video >.
@simondev7583 жыл бұрын
heh
@gingeral253 Жыл бұрын
Cool stuff
@Retrofire-473 жыл бұрын
I appreciate seeing a game dev taking web programming seriously
@pdcx Жыл бұрын
thats why when i use multiple processes...i use shared memory with threads in other programming languages you have shared memory by default
@simondev758 Жыл бұрын
Along with all the race conditions and problems of shared memory heh
@pdcx Жыл бұрын
@@simondev758 one gotta be good with mutex -based constructs and busy-waiting but before that atomic operations should be abused to its fullest
@mattmmilli82873 жыл бұрын
What about a video on how to take any old c++ library and making it run with wasm and interacting with JS
@planktonfun13 жыл бұрын
do promises and await async next // wait for a certain milisecond function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); }
@simondev7583 жыл бұрын
Added to my todo list.
@Nikhil-wz6nt3 жыл бұрын
Can you make a video on implementation of spatial hash grid in three js (meshes) ?
@FredZockt3 жыл бұрын
8:28 yes I can :D Thanks for this very nice and informative video :)
@simondev7583 жыл бұрын
Hah nice catch!
@wolfmibАй бұрын
It’s threading natural , you raise threads to certain amount , then you reach the system kind limitation to get benefit from that . Just do binary test , once you optimized your threads count Stay with it , no need to keep maxing trying 👍
@collinvisser71083 жыл бұрын
very cool - have you looked at nodeJs at all with threading ?
@simondev7583 жыл бұрын
Not really, I glanced at the interface just to see if they had them, didn't look super complicated. I feel like it's more important to get to know the underlying mechanics and how cpu architectures/threading works in general, tradeoffs therein, etc.
@keenanduplessis30233 жыл бұрын
Great video, thanks, but this whole time I couldn't stop thinking Bob, from Bob's Burgers, switched careers 😂
@simondev7583 жыл бұрын
Flipping burgers doesn't pay the bills, if this KZbin thing doesn't pan out I'll have to go back to being a spy.
@jerrygreenest5 ай бұрын
Logical cores are basically threads? And there's no way to know physical cores in javascript? And that's browser environment right, but what about nodejs is it any different there? Great video btw.
@marcenware01138 ай бұрын
I'm actually really looking forward to the new Dune movie 😂
@serjmarkelov99153 жыл бұрын
I'm quite newbie in JS, so basically that means that we can create few workers for the efficient tasks and it will work fast? Is there no cons?
@simondev7583 жыл бұрын
No such thing as no cons, just tradeoffs. In these examples, a lot of the tradeoffs came in the form of serialization time vs task length.
@justanotherhotguy3 жыл бұрын
I wonder if the JavaScript version made in Rust has significantly better performance than regular JS
@Soremwar3 жыл бұрын
You mean Deno? About the same, since the underlying engine is still V8 (C++ based) I wouldn't expect Rust to come out on top of C++ though, they are roughly the same
@justanotherhotguy3 жыл бұрын
@@Soremwar Milliseconds could however become whole seconds with larger code, so in terms of how quick an interpreted (or in the case of JS, just in time compilated) language is, miliseconds are life changing!
@Soremwar3 жыл бұрын
@@justanotherhotguy The problem is that when we compare Rust vs C++ we don't even find milliseconds of difference. They both produce about the same output (ignoring the obvious memory safety instructions Rust outputs)
@simondev7583 жыл бұрын
The JS code is often jit'd into machine code, so most of the difference would come from better code generation. That would be my guess.
@Nexus-rt1bm3 жыл бұрын
@@Soremwar Rust's borrow checker prevents you to compiling code that violates its rules so at runtime, there isn't any cost. Bound checking and such in rust will most likely get stripped away if it's unnecessary.
@DommageCollateral Жыл бұрын
do you have, or can you make a video about threejs webworkers? from what i understand, you have another instance of threejs running in the background and both share a buffer as intersection
@simondev758 Жыл бұрын
I don't have a video about that, no, but I can look into it a bit.
@DEV_XO3 жыл бұрын
nice!
@emil2634 Жыл бұрын
I'm aware this is an old video, but for some reason the worker threads are not showing up for me in the performance tab. Do you know if you have to do anything in particular to be able to see the worker threads in the chrome performance tab?
@jonmichaelgalindo3 жыл бұрын
8:41 For shared array buffers, also note that atomics are not supported in Safari, and Apple has a strong incentive to kill future web-app optimization, so please don't expect to rely on it.
@simondev7583 жыл бұрын
developer.apple.com/safari/technology-preview/release-notes/ Looks like they're being brought back.
@jonmichaelgalindo3 жыл бұрын
@@simondev758 I'll believe it when I see it. Devs can choose what goes into tech previews. Corporate policy controls what makes it to release. (Took them 8 years to support WebGL2, so I'm a little jaded. Obviously, I will be very happy if it I get atomics in production! :-) )
@simondev7583 жыл бұрын
@@jonmichaelgalindo Heh, I used to work on Chrome, so I'm very familiar with how Apple drags their feet. This isn't a slam dunk, but they seem to be actually moving in the right direction so I'm cautiously optimistic.
@razorstone30883 жыл бұрын
Would you share the sources from which you learnt javascript when you started learning ?
@simondev7583 жыл бұрын
I started learning around the start of the pandemic, and really no resources beyond just the MDN docs. I'm an experienced programmer though, almost 20 years of C++ and other languages. developer.mozilla.org/en-US/docs/Web/JavaScript
@razorstone30883 жыл бұрын
@@simondev758 thanks for replying! I had learnt a little bit of javascript before but I couldn't understand a lot of things about why i'm doing a particular thing. I started learning c++ because of that, I thought if I could learn the concepts in a lower level statically typed language everything would make more sense long term and I'd have more transferrable skills
@simondev7583 жыл бұрын
@@razorstone3088 Learning how things work at a lower level will definitely be helpful.
@blain20_3 жыл бұрын
Are you MadSeasonShow's brother? 😁
@4.0.42 жыл бұрын
What about C++? Do you think it would scale almost perfectly (i.e., almost 8x faster) in this pure math example?
@simondev7582 жыл бұрын
You'll see gains from just better optimized code, but the overall trend should follow. This test, I had 4 real physical cores and 8 logical ones via hyperthreading, which means 2 threads per core sharing resources.
@zainkhalid36702 жыл бұрын
Hi, I need your help. I'm a computer science student working on a project, "Reinforcement Learning based 2D Self Driving Car in JavaScript using no library". I'm using Canvas to draw onto. The Problem is everything is that everything drawn or processed in real-time is being called into animate function that is based on requestAnimationFrame(). I've randomized road-map generation, Terrain generation Cars Drawing, Sensors Drawing, Collision Detections for multiple sensors of every car. Road Borders are being thrown around for calculations. Each Car is Maintaining Neural Networks, Evaluation Functions. I need 1000 instance of my player car object except traffic etc etc. All these calculations are being done on each frame call of requestAnimationFrame() which leads to lag in the game environment. I've no experience regarding multithreading. Can I boost performance in my case using multithreading? Right now, whatever you said did not made much sense to me due to my inexperience. I've an i7-12H 10 Core 20 Threads 16GB DDR5 Ram Nvidia RTX 3070 8GB Laptop.
@gabrieldesimone46443 жыл бұрын
Does sharedArrayBuffer would improve it in any way? because it will read/write the same buffer if I understand it
@simondev7583 жыл бұрын
Haven't tested it, it would probably make some things easier like having concurrent threads accessing a central data structure. There's a bunch of added complexity though, if you go that route, with managing concurrent access via atomics.
@boot-strapper2 жыл бұрын
Another important note about js/node being "single threaded" is that anytime you run an async function, which in js is most of the time, it goes onto a different thread, so thats why js is so much more performant than most people realize.
@elijahshadbolt7334 Жыл бұрын
The javascript async keyword does not run it on a different thread. It just defers execution until after the DOM event, and it runs on the same thread (same js core context). Or so I've been told.
@elijahshadbolt7334 Жыл бұрын
Or is that a non-standard feature of node.js?
@boot-strapper Жыл бұрын
@@elijahshadbolt7334 it does run on a different thread and it is a standard feature of any asynchronously run code in nodejs.
@DrewTeter Жыл бұрын
@@boot-strapper That is incorrect. Code inside an async function is run on the main thread. Javascript has something called the Event Loop that is used to schedule what code is executed and when. What happens is that, when an Async Function is called, a context is created for that function. The function then runs on the main thread until it hits an asyncronous call. That call can be another Async Function, or a call to one of the APIs provided by the browser. Such as the Fetch API for making HTTP requests. Rather than wait for that call to complete, Javascript will pause the context for that function and have the main thread check the Event Loop for the next scheduled task that it can work on. When the asynchronous call comes back with a response it will register that response to the Event Loop which will have the main thread resume executing the contect of the function when it becomes free again. It's like going to a restaurant that has a long line. Then, instead of waiting in line, you tell them to text you when there's a table ready and go to do some unreleated errands. When you get the text that says your table is ready, you finish the errand you are currently doing and then head back to the restuarant.
@boot-strapper2 ай бұрын
@@DrewTeterwhen you “pause context” where do you think that work is being done? It’s being done with a C library on another thread…
@jonmichaelgalindo3 жыл бұрын
Bonus: Launch any function in a thread using new Worker( URL.createObjectURL( new Blob( [ `(${myThreadedFunction})()` ] ) ) )
@kacperkepinski4990 Жыл бұрын
how to run the code in browser? can I see code?
@ducchuy24673 жыл бұрын
At 8:09 Can someone explain for me from line 187 to 191
@simondev7583 жыл бұрын
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array There are 4 bytes in a 32 bit float (line 187), the next lines instantiate ArrayBuffers of length "positions.length" x the size of a float, then we pass those as arguments to construct a float32array.
@ducchuy24673 жыл бұрын
@@simondev758 thanks, also do you post your code on your github respo
@arctan23 жыл бұрын
hey hey.....how to draw a path(roads for my city) on the terrain in the video "procedural terrain generation".....plzzz tell me how to do that.... i am so stuck
@swoorp3 жыл бұрын
fourth!!!, infinite love from me
@subhadeepmandal3092 Жыл бұрын
Didn't understand 80% of the video.As I don't know profiling and in-depth javascript etc yet. Just understood the images and your conclusions. Would be great if you could mention that this video was not for beginners.
@simondev758 Жыл бұрын
That's ok, not every video has to be explicitly aimed at beginners. Work your way through it slowly and hopefully everything will land with you.
@ollydix Жыл бұрын
You need to stop smoking man 😄😄
@jjfattz2 жыл бұрын
JEA-va-script
@stephenkamenar3 жыл бұрын
javascript threads are way too slow to use, i've tried
@simondev7583 жыл бұрын
I'd be interested in hearing what you tried, and what you were trying to do
@stephenkamenar3 жыл бұрын
@@simondev758 fuzzysearch. but really anything like < 10ms can't go faster with threads, because of all the overhead
@kittysplode Жыл бұрын
yes, it can. no, you shouldn't watch this video. if you need something faster than js, write in something faster than js or you're pissing away time :P
@simondev758 Жыл бұрын
Yeah, that's totally fine if your application is a few hundred, or even thousand, lines long. Rewrite if you need it faster. And if "just use another language" isn't an option? They're locked in to JS for commercial/feature/legacy reasons?
@nathalieyxxn3 жыл бұрын
First!
@Borgilian2 жыл бұрын
No dude, you're not seeing performance drop-offs because you're using hyperthreads... Your additional threads are actually being starved because you've never implemented an actual work queue. You're also not adding any barriers for memory accesses either, but it wouldn't make much of a difference since the threading model in javascript, implemented using "web workers", is absolute crap. And lastly, you can NEVER make any kind of quality performant software in javascript due to one simple reason: you're never able to actually use the damned CPU to it's fullest! One CPU core and its hyperthread each have their own ALU, and can each execute SIMD code. With one SIMD operation you could go 128 wide and run it on 4 floats at the same time. You don't have direct access to CPU intrinsics in JS, so you have to rely on your final interpreted code being auto-optimized for parallel work (which it never is... interpreters/compilers are extremely dumb. They also can't understand the context of what you're trying to accomplish).And the CPU will try to fill those "work units" with other unrelated data just so that it optimizes its usage. This means that you're potentially already 4 times slower in JS!! But to fully utilize the core you'd have to go wide on both threads of the same core (that's 8 floats at the same time on 2 threads). And now you realize you're 8x slower in JS!!! But wait, modern CPUs have multiple cores, which means that on a quad core you're 32x slower, or 64x slower on a octacore, than a conventional C/C++ program!!!
@Galomortalbr3 жыл бұрын
JavaScript multi threading sucks, If you run a situation where you need it, you are better off using something else.
@simondev7583 жыл бұрын
Maybe, but I like to dig into "how much" it sucks heh
@Retrofire-473 жыл бұрын
What else is there for creating web based games? Like, seriously asking... I know the DOM is accessible via other languages but JavaScript and the web are inseparable.
@Galomortalbr3 жыл бұрын
@@Retrofire-47 there is WebAssembly but it's still on it's baby steps, there used to be more options with Flash and the Unity Web player, but those are dead, i guess if you are an web developer then there is not much in alternatives of java script.
@Retrofire-473 жыл бұрын
@@Galomortalbr I just was reading into Web Assembly. So do you think it's worth trying to use JavaScript's multithreading or is it kind of stupid? I'm just starting to explore this area so I figured I'd ask for your opinion