Understanding the V8 JavaScript Engine

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

[@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.

[@arik_dev]

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.

[@kelkiiii]

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

[@user-lu7dm2fg2x]

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!

[@satadrubhatt]

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

[@VincentJenks]

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!

[@AndreGreeff]

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.

[@cingizhemidov6990]

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

[@benoitleger-derville6986]

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

[@ryanpark3523]

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

[@VincentDegrave]

Great way of explaining the internals. Thanks!

[@josephwong2832]

nice visuals and explanations

[@daniel7007]

The best explanation i have ever seen!!!

[@omjoshi1748]

Thanks for the explaintion.

[@rossli8621]

This is such a great video!!!

[@pengdu7751]

beautiful talk.

[@yashmishra1024]

This was really helpful

[@codeChuck]

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.

[@ddey239]

This is awesome

[@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.

[@OliviaGraceDev]

very helpful explanation!

[@muratwes23]

most amazing video ever

[@DevsLikeUs]

Awesome talk

[@gorkemokur]

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

[@dubola5777]

Thank you!

[@manojhk7469]

high level of explanation

[@systemdeadlock]

Nailed it!

[@achillesglacia7700]

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.

[@conea6891]

Nice, I like it.

[@fsjay]

Amazing

[@igorf243]

Awesome, thx.

[@paulsery5878]

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

[@elvispalace]

just love

[@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 ?

[@roycreativedesigner4608]

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

[@MinorMood]

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]

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

[@yuxiangchen520]

it's very good.

[@samferrer]

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

[@alain_laroche]

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

[@blyfo]

Hey, did you manage to find them?

[@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?

[@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.

[@friggindoc]

A very charming tutor explaining things excellently

[@jao4991]

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

[@FantascapeRS]

lots to take in

[@filippians413]

Ya I barely understood it.

[@francesko1763]

Put it at x0.75 speed

[@danielkrajnik3817]

7:18 it surely is

[@subtlespace]

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

[@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.

[@liamconverse8950]

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]

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

[@Patryk-wm9fs]

you know "spaces over tabs" when you see her

[@vnm_8945]

does typescript help with optimizing?

[@shahtaz9385]

What do I have learn to understand this?

[@vishwateja2801]

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

[@abdulrahmantahir3033]

registers are located in a machine/pc/computer

[@Sunil_KumarDas]

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

[@54peace]

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

[@samarthkeskar8546]

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

[@tubbystubby]

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

[@praveenseela9259]

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]

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]

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]

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.

[@xKreesherZ]

bonk

[@phamhoa5590]

principle of program language, such a nightmare

[@sumitbopate5010]

A❤

[@bild96]

Hard for me to understand

[@dennystreet2454]

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

[@TheWhateverChannell]

my head hurts

[@1Eagler]

So, v8 creates Virtual cpu with virtual memory?

[@SweepAndZone]

My 3rd time watching this

[@punchthedog]

This is clearer at 0.75 speed.

[@JimmyKama]

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

[@BrunoSouza-wy2et]

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

[@captainpissof9632]

why is she in the bathroom for this?

[@pannihto7588]

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.

[@Plesiosaur-ig2si]

i love you

[@0xhhhhff]

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

[@user-ug7qq8oi9u]

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

[@sebastiansaiz9173]

No entendí una goma.

[@bobfarker4001]

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

[@bd8063]

Isnt she streaming from bathroom lol

[@homyeeking997]

I can't help watching the speecher

[@waseemakram8778]

What kinda gibberish was that?

[@energy-tunes]

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

[@barrydunn7190]

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]

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

[@mattmcmahon8311]

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

[@fatimanura6359]

😂😂😂😂 same

[@shagging8727]

I can't focus on the right.

[@shohanshohag987]

i love this video , girl are so cute

[@user-nu1si5ys5c]

Excellent content. Though I don't know why it's a bit hard to focus

[@mikem.8702]

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]

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.