Understanding the V8 JavaScript Engine
Vložit
- čas přidán 10. 07. 2024
- JavaScript is cool (don't @ me), but how can a machine actually understand the code you've written? As JavaScript devs, we usually don't have to deal with compilers ourselves. In this talk, I’ll use visualizations to show you how the JavaScript engine handles our human-friendly code, and compiles it to code that machines understand.
Presenter: Lydia Hallie
Event: Reactathon 2020
I just love these moments of learning when I feel so stupid and my mind feels like oh, we've some work to do.
These infographics are really great. Excited to keep studying this. Gonna use this as a resource frequently. Very well-done.
I've been reading through the V8 dev blogs trying to get a sense of what's going on, and this video really tied the concepts together in a succinct way. Excellent use of graphics as well, really helpful.
The animation was not only cool but also incredibly helpful in visualizing the complexities of the engine. It's rare to find content that's both beginner-friendly and easy to follow, but this video nailed it. Thankyou so much!
Thanks for the talk and explaining in details. Always liked the visual articles. Kudos
wow... over 20 years of writing JS and I'm still learning new things. definitely going to keep this in mind when designing my functions.
This is exactly the video and explanation I've always wanted to see. Thank you.
best info-graphics and explanation I have seen on this very important topic. Thank you
Excellent illustration! These are key fundamental concepts all JS devs should understand, so as to optimize as much as possible. It takes some of the guesswork out of how you should solve a particular problem, also...seeing as JS is flexible enough to do everything at least 10 different ways. Well done!
Lydia~ thank you so much for your wonderful presentation!! You are so much better than Udemy instructor who explains about JS engine. Now finally I can understand how JS works perfectly !!! Thank you so much again !!
Great way of explaining the internals. Thanks!
This is such a great video!!!
The best explanation i have ever seen!!!
It's a fascinating and informative presentation. Can i ask how did you make slides. I mean, did you use some program or actually, is it a website =)
Maybe the people behind the v8 engine deserve a Nobel price of some kind.
Code optimization at that low level is really complex and the v8 engine seems to be highly optimized.
Thanks for the explaintion.
This was really helpful
Your content is just amazing 🤩🤩
perfect. a sua didatica e perfeita, junto dos graficos
nice visuals and explanations
Deep! And fun 🔥! Turbofan :)
After watching this video I remembered that I have learned about this V8 optimization previously, but I forgot about this completely when writing actual code!
Nice reminded that calls to function with different arguments or different shape of object are blocking V8 turbofan optimization.
very helpful explanation!
most amazing video ever
This is awesome
Very helpful! Where does Chromium load scripts before byte stream decoding?
Hi,
Thanks for the great presentation.
I was wondering though if we can assume type scripts code is by definition faster than regular javascript since we have more control on shape's number ?
Thank you!
beautiful talk.
I would love to know more about what happens in the browser when it sees JavaScript. When inspecting the performance profiler you can see "compiling" and "evaluating" as two separate tasks - what are they? Does Chrome cache compiled JavaScript between refreshes or only the asset? When it comes to caching, how does Chrome determine between disk and memory cache?
Awesome talk
Nice, I like it.
high level of explanation
Awesome, thx.
bloody hell. the ease of that to her is just... For extra beginners will like a complete summarised road map at the beginning before going into each section and function, if that makes any sense, glad to help. you did that, but it was too short, too quick.
Nailed it!
This is amazing! Does anyone knows where to find all the others ressources she is talking about?
Hey, did you manage to find them?
it's very good.
Amazing
the animation and explanations were helpful....but the cool thing was she was laughing after some seconds and that made ma laugh too......i watched it twice once just to laugh and another time for learning the concept
Where does the global execution context and call stack sit in this whole process?
I am not talking about event loop.
I just want to know the v8 part of browser which executes the code.
Global execution context and call stack is part of v8.
I find resources in Google explaining v8 architecture and event loop separately.
In event loop they show that global execution context and call stack is part of v8. And when I go to learn v8 internal process to execute code. I find these type of explaining but no mention of global execution context and call stack.
I want to know the relation among v8 engine architecture , global execution context and call stack.
How they work together???
Besides that I found variables and references are stored in stack and object and function description are stored in heap.
Some articles says both are stored in memory heap.
These are confusing.
What exactly is stack and heap?
I Googled it.
It says heap is not part of heap data structure.
And stack is a data structure.
I want to know the relation among stack, heap and hardware RAM.
Is stack and heap is a physical part of ram?
= If I consider ram is just a collection of billions of memory block. Some are used as a process called stack and some are used as a process called heap.
If this is truth then the same memory block can be used as a stack and heap in two different process or case !!!?
All these are so confusing.Is there anyone who knows about it?? I am tired of researching in Google.
7:18 it surely is
What do I have learn to understand this?
There is no mention for call stack, memory heap or event loop in this video. What's their role in this whole process?
To my knowledge, call stack works pretty similar to any other call stack. Memory heap is similar. Event loop is something that really depends on if you're using Chrome or Node.
So with just in time compilation what is the purpose of compiling to a byte code before compiling to machine code? If optimization means compiling straight to machine code why not do that all the time?
"bytecode takes a lot less memory than machine code."
Stackoverflow a/69155309 (because yt hates urls)
just love
Well - the part that really broke my brain was that gear animation on 4:42 ))) There is definitely something wrong there!))
Aside from that - a great video, thanks a lot!)
Bytecode: easy peasy
Gears broking physics laws: what tha hell!!!
does typescript help with optimizing?
Lovely presentation!! if you do not have courses on Udemy ... you should ...
Can anyone help me understand where are the registers located? on the pc? is my understanding correct?
registers are located in a machine/pc/computer
When you say "we"... I presume you mean "computers"! 😂 Seriously though, very comprehensive video... thank you 😵💫
Somebody please tell me what tool she used in the video to illustrate code executions. 😢🙏
Leaving this here to hopefully get a notification when you get an answer :v
this is pretty cool. I wish it was a little bit slower though
lots to take in
Ya I barely understood it.
Put it at x0.75 speed
i still didnt understood how JS (one programming language) is able to call c++(another programming language). can you throw some light on it?
I know how, the predefined browser API methods are defined as objects in c++ and they connected to c++ functions in js engine specific way, when they're called their corresponding c++ functions are called. When you console.log(setInterval)
it prints [native code] because there's a mechanism that JS engine developers implemented to connect the invoking of js functions to call real machine code functions.
There's a mechanism for invoking operation system functions in Java language too, through mechanism called JNI. You can also embed Python in your "c" programs.
Any links you have to understand this in deep?
This is called binding. V8 is written in C++, it has ways to bind C++ functions to JS objects. When this JS function is called it results in a underlying call to C++ code. V8 dispatches the call since it's also running on C++.
The same call can be done to different languages, but both languages must agree on a calling convention/interface. Search Foreign Function Interface.
A very charming tutor explaining things excellently
00:58 😂 😂😂😂😂😂😂😂😂😂😂😂😂
So fast for me btw. Will have to watch multiple times to understand.
principle of program language, such a nightmare
bonk
Hard for me to understand
My 3rd time watching this
So, v8 creates Virtual cpu with virtual memory?
Just take a tub of popcorn and put V8 source code on auto scroll.
Great video though.
my head hurts
I wish I could have the same topics in the kitchen with my wife while drinking coffee 😮
A❤
This is clearer at 0.75 speed.
Seems like you're joking/kidding. I wish you could explain assuming all the viewer as beginners. Anyway, great info.👍
No entendí una goma.
i love you
I would learn way more if there was only a voice teaching how this stuff works
Why are people here reducing the instructor's skill and presentation effoet only to her looks? Lol its a good vdo too surface level but nice infographics
Isnt she streaming from bathroom lol
why is she in the bathroom for this?
She was taking a dump
@@pannihto7588 This. The V8 engine eats up a lot of RAM. All that RAM has to be unloaded somewhere.
I can't help watching the speecher
So that's why modern browsers can't run on 4GB of RAM when a 3d game like WoW could run on 500MB...
you know "spaces over tabs" when you see her
What kinda gibberish was that?
Can anyone tell me what I was supposed to learn here, I was starting at the cute smart girl on the left
Lmao
SIMP
Stop being creepy dude....just stfu and learn.
Lame comment. Couldn’t even read it cuz I was distracted by the picture of an idiot on the left.
😂😂😂😂 same
I can't focus on the right.
i love this video , girl are so cute
Whats so funny i really dont get it shes literally holding herself from bursting into tears throughout the entire video?
this presentation is useless and painful for me because I cant concentrate on code my brain stuck, the reason is the the angel with charming eyes and voice on left side of the screen. I think this should be a real problem for dev guys who work with such a good programmer and beautiful hot woman.
As someone once said, if you don't know how to explains to others, your knowledge isn't useful. There're so many steps you're missing. Please learn to explain better.
The video is obviously an introduction to core principles of the V8 interpreter but assumes the watcher has basic knowledge about interpreters. As so implementation details are ignored since it wasnt the goal.
Excellent content. Though I don't know why it's a bit hard to focus