Understanding the V8 JavaScript Engine

Рет қаралды 93,153

Күн бұрын

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

Пікірлер: 105

@ahmedhamdy5882 Ай бұрын

I just love these moments of learning when I feel so stupid and my mind feels like oh, we've some work to do.

@kelkiiii 2 жыл бұрын

These infographics are really great. Excited to keep studying this. Gonna use this as a resource frequently. Very well-done.

@arik_dev 2 жыл бұрын

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.

@user-lu7dm2fg2x 4 ай бұрын

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!

@AndreGreeff 2 ай бұрын

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.

@satadrubhatt 3 жыл бұрын

Thanks for the talk and explaining in details. Always liked the visual articles. Kudos

@VincentJenks 11 ай бұрын

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!

@benoitleger-derville6986 2 ай бұрын

This is exactly the video and explanation I've always wanted to see. Thank you.

@cingizhemidov6990 5 ай бұрын

best info-graphics and explanation I have seen on this very important topic. Thank you

@VincentDegrave Ай бұрын

Great way of explaining the internals. Thanks!

@ryanpark3523 2 жыл бұрын

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 !!

@gorkemokur 3 жыл бұрын

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 =)

@codeChuck 2 ай бұрын

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.

@daniel7007 Жыл бұрын

The best explanation i have ever seen!!!

@mumblic Жыл бұрын

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.

@rossli8621 Жыл бұрын

This is such a great video!!!

@josephwong2832 2 жыл бұрын

nice visuals and explanations

@nacimallouani4799 Ай бұрын

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 ?

@paulsery5878 Жыл бұрын

Very helpful! Where does Chromium load scripts before byte stream decoding?

@roycreativedesigner4608 2 ай бұрын

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

@OliviaGraceDev 3 ай бұрын

very helpful explanation!

@omjoshi1748 2 жыл бұрын

Thanks for the explaintion.

@achillesglacia7700 3 ай бұрын

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.

@pengdu7751 2 жыл бұрын

beautiful talk.

@yashmishra1024 3 жыл бұрын

This was really helpful

@muratwes23 2 жыл бұрын

most amazing video ever

@ddey239 3 жыл бұрын

This is awesome

@DavidAlsh Жыл бұрын

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?

@DevsLikeUs 3 жыл бұрын

Awesome talk

@manojhk7469 Ай бұрын

high level of explanation

@RaviPrakash-qj2lz Жыл бұрын

There is no mention for call stack, memory heap or event loop in this video. What's their role in this whole process?

@gFamWeb Жыл бұрын

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.

@dubola5777 3 жыл бұрын

Thank you!

@vnm_8945 2 ай бұрын

does typescript help with optimizing?

@liamconverse8950 2 жыл бұрын

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?

@abdelrahmankhalil 4 ай бұрын

"bytecode takes a lot less memory than machine code." Stackoverflow a/69155309 (because yt hates urls)

@alain_laroche 2 жыл бұрын

This is amazing! Does anyone knows where to find all the others ressources she is talking about?

@blyfo 7 ай бұрын

Hey, did you manage to find them?

@LostInTheMysteriousWorld Жыл бұрын

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.

@systemdeadlock Жыл бұрын

Nailed it!

@MinorMood 3 жыл бұрын

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!)

@hankchinaski6533 3 жыл бұрын

Bytecode: easy peasy Gears broking physics laws: what tha hell!!!

@shahtaz9385 Жыл бұрын

What do I have learn to understand this?

@igorf243 2 жыл бұрын

Awesome, thx.

@samferrer 3 жыл бұрын

Lovely presentation!! if you do not have courses on Udemy ... you should ...

@conea6891 3 жыл бұрын

Nice, I like it.

@yuxiangchen520 3 жыл бұрын

it's very good.

@fsjay 2 жыл бұрын

Amazing

@danielkrajnik3817 3 жыл бұрын

7:18 it surely is

@elvispalace 8 ай бұрын

just love

@subtlespace 7 ай бұрын

When you say "we"... I presume you mean "computers"! 😂 Seriously though, very comprehensive video... thank you 😵‍💫

@friggindoc Жыл бұрын

A very charming tutor explaining things excellently

@praveenseela9259 2 жыл бұрын

i still didnt understood how JS (one programming language) is able to call c++(another programming language). can you throw some light on it?

@SirusStarTV 2 жыл бұрын

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.

@SirusStarTV 2 жыл бұрын

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.

@praveenseela9259 2 жыл бұрын

Any links you have to understand this in deep?

@heraldo623 Жыл бұрын

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.

@vishwateja2801 9 ай бұрын

Can anyone help me understand where are the registers located? on the pc? is my understanding correct?

@abdulrahmantahir3033 2 ай бұрын

registers are located in a machine/pc/computer

@drapala97 3 жыл бұрын

this is pretty cool. I wish it was a little bit slower though

@FantascapeRS 2 жыл бұрын

lots to take in

@filippians413 Жыл бұрын

Ya I barely understood it.

@francesko1763 Жыл бұрын

Put it at x0.75 speed

@54peace 5 ай бұрын

Somebody please tell me what tool she used in the video to illustrate code executions. 😢🙏

@ricardomejias7957 Ай бұрын

Leaving this here to hopefully get a notification when you get an answer :v

@Patryk-wm9fs Ай бұрын

you know "spaces over tabs" when you see her

@Sunil_KumarDas 2 жыл бұрын

So fast for me btw. Will have to watch multiple times to understand.

@samarthkeskar8546 3 жыл бұрын

00:58 😂 😂😂😂😂😂😂😂😂😂😂😂😂

@phamhoa5590 3 жыл бұрын

principle of program language, such a nightmare

@dennystreet2454 4 ай бұрын

I wish I could have the same topics in the kitchen with my wife while drinking coffee 😮

@1Eagler 3 жыл бұрын

So, v8 creates Virtual cpu with virtual memory?

@tubbystubby 8 ай бұрын

Just take a tub of popcorn and put V8 source code on auto scroll. Great video though.

@bild96 3 жыл бұрын

Hard for me to understand

@TheWhateverChannell 2 жыл бұрын

my head hurts

@xKreesherZ 3 жыл бұрын

bonk

@sumitbopate5010 Ай бұрын

A❤

@SweepAndZone 2 ай бұрын

My 3rd time watching this

@JimmyKama Жыл бұрын

Seems like you're joking/kidding. I wish you could explain assuming all the viewer as beginners. Anyway, great info.👍

@sebastiansaiz9173 Жыл бұрын

No entendí una goma.

@captainpissof9632 3 жыл бұрын

why is she in the bathroom for this?

@pannihto7588 3 жыл бұрын

She was taking a dump

@chudchadanstud Жыл бұрын

@@pannihto7588 This. The V8 engine eats up a lot of RAM. All that RAM has to be unloaded somewhere.

@punchthedog 2 жыл бұрын

This is clearer at 0.75 speed.

@BrunoSouza-wy2et 2 жыл бұрын

I would learn way more if there was only a voice teaching how this stuff works

@user-ug7qq8oi9u 5 ай бұрын

actually if i understand all of this content, im at leat junior level... right?

@Plesiosaur-ig2si 3 жыл бұрын

i love you

@bobfarker4001 10 ай бұрын

So that's why modern browsers can't run on 4GB of RAM when a 3d game like WoW could run on 500MB...

@bd8063 2 жыл бұрын

Isnt she streaming from bathroom lol

@0xhhhhff 3 ай бұрын

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

@homyeeking997 2 жыл бұрын

I can't help watching the speecher

@waseemakram8778 2 жыл бұрын

What kinda gibberish was that?

@energy-tunes 3 ай бұрын

Whats so funny i really dont get it shes literally holding herself from bursting into tears throughout the entire video?

@shohanshohag987 2 жыл бұрын

i love this video , girl are so cute

@shagging8727 2 жыл бұрын

I can't focus on the right.

@barrydunn7190 3 жыл бұрын

Can anyone tell me what I was supposed to learn here, I was starting at the cute smart girl on the left

@proviptk Жыл бұрын

Lmao

@dan_bev Жыл бұрын

SIMP

@bboyakers 7 ай бұрын

Stop being creepy dude....just stfu and learn.

@mattmcmahon8311 5 ай бұрын

Lame comment. Couldn’t even read it cuz I was distracted by the picture of an idiot on the left.

@fatimanura6359 3 ай бұрын

😂😂😂😂 same

@mikem.8702 2 жыл бұрын

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.

@heraldo623 Жыл бұрын

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.

@davidgrig4608 2 жыл бұрын

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.