loading...
Cover image for 🚀⚙️ JavaScript Visualized: the JavaScript Engine

🚀⚙️ JavaScript Visualized: the JavaScript Engine

lydiahallie profile image Lydia Hallie Updated on ・5 min read

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. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

| Note: This post is mainly based on the V8 engine used by Node.js and Chromium-based browsers.


The HTML parser encounters a script tag with a source. Code from this source gets loaded from either the network, cache, or an installed service worker. The response is the requested script as a stream of bytes, which the byte stream decoder takes care of! The byte stream decoder decodes the stream of bytes as it’s being downloaded.

Alt Text


The byte stream decoder creates tokens from the decoded stream of bytes. For example, 0066 decodes to f, 0075 to u, 006e to n, 0063 to c, 0074 to t, 0069 to i, 006f to o, and 006e to n followed by a white space. Seems like you wrote function! This is a reserved keyword in JavaScript, a token gets created, and sent to the parser (and pre-parser, which I didn't cover in the gifs but will explain later). The same happens for the rest of the byte stream.

Alt Text


The engine uses two parsers: the pre-parser, and the parser. In order to reduce the time it takes to load up a website, the engine tries to avoid parsing code that's not necessary right away. The preparser handles code that may be used later on, while the parser handles the code that’s needed immediately! If a certain function will only get invoked after a user clicks a button, it's not necessary that this code is compiled immediately just to load up a website. If the user eventually ends up clicking the button and requiring that piece of code, it gets sent to the parser.

The parser creates nodes based on the tokens it receives from the byte stream decoder. With these nodes, it creates an Abstract Syntax Tree, or AST. 🌳

Alt Text


Next, it's time for the interpreter! The interpreter which walks through the AST, and generates byte code based on the information that the AST contains. Once the byte code has been generated fully, the AST is deleted, clearing up memory space. Finally, we have something that a machine can work with! 🎉

Alt Text


Although byte code is fast, it can be faster. As this bytecode runs, information is being generated. It can detect whether certain behavior happens often, and the types of the data that’s been used. Maybe you've been invoking a function dozens of times: it's time to optimize this so it'll run even faster! 🏃🏽‍♀️

The byte code, together with the generated type feedback, is sent to an optimizing compiler. The optimizing compiler takes the byte code and type feedback, and generates highly optimized machine code from these. 🚀

Alt Text


JavaScript is a dynamically typed language, meaning that the types of data can change constantly. It would be extremely slow if the JavaScript engine had to check each time which data type a certain value has.

In order to reduce the time it takes to interpret the code, optimized machine code only handles the cases the engine has seen before while running the bytecode. If we repeatedly used a certain piece of code that returned the same data type over and over, the optimized machine code can simply be re-used in order to speed things up. However, since JavaScript is dynamically typed, it can happen that the same piece of code suddenly returns a different type of data. If that happens, the machine code gets de-optimized, and the engine falls back to interpreting the generated byte code.

Say a certain function is invoked a 100 times and has always returned the same value so far. It will assume that it will also return this value the 101st time you invoke it.

Let’s say that we have the following function sum, that’s (so far) always been called with numerical values as arguments each time:

This returns the number 3! The next time we invoke it, it will assume that we’re invoking it again with two numerical values.

If that’s true, no dynamic lookup is required, and it can just re-use the optimized machine code. Else, if the assumption was incorrect, it will revert back to the original byte code instead of the optimized machine code.

For example, the next time we invoke it, we pass a string instead of a number. Since JavaScript is dynamically typed, we can do this without any errors!

This means that the number 2 will get coerced into a string, and the function will return the string "12" instead. It goes back to executing the interpreted bytecode and updates the type feedback.


I hope this post was useful to you! 😊 Of course, there are many parts to the engine that I haven't covered in this post (JS heap, call stack, etc.) which I might cover later! I definitely encourage you to start to doing some research yourself if you're interested in the internals of JavaScript, V8 is open source and has some great documentation on how it works under the hood! 🤖

V8 Docs || V8 Github || Chrome University 2018: Life Of A Script


Feel free to reach out to me! Twitter || Instagram || GitHub || LinkedIn

FAQ: I use Keynote to make the animations and screen record it lol. Feel free to translate this blog to your language, and thanks so much for doing so! Just keep a reference to the original article and let me know if you've translated it please! 😊

Discussion

pic
Editor guide
Collapse
htetlynnhtun profile image
Htet Lynn Htun

Although you didn't cover the whole story of it, this is a decent explanation of how JavaScript engine works. All those gifs are amazing. They help my brain to solidify the theories. Thank you so much. I'm looking forward to your upcoming posts.

Collapse
lydiahallie profile image
Collapse
luismartinezs profile image
Luis Martinez Suarez

Agreed with the GIFs thing. They help heaps to understand what is going on. GIFs for the win!

Collapse
jonnyplatt profile image
Jonny Platt

Lovely animations! Thanks for a really clear article

Collapse
murroughfoley profile image
Murrough Foley

The Gifs really pull the article together. Great stuff.

Collapse
nqcm profile image
TheNiqabiCoderMum

Thanks for the informative post. Your animations are superb! I am interested to know which software did you use to create your animations?

Collapse
sbinlondon profile image
Kate Beard (she/her)

This is amazing!! I wish I'd had this at my coding bootcamp last year. I don't think it would have all sunk in at first but seeing it laid out visually would have helped things click at certain points as we learned more. I'm sharing it with them right now so future cohorts will be able to use this resource 🙌🙌🙌

Collapse
lydiahallie profile image
Lydia Hallie Author

Thanks!! 😃 Hope it’ll help them!

Collapse
jdmedlock profile image
Jim Medlock

This is brilliant and a great place to start for anyone exploring how JS works its magic. I know this had to have taken a lot of time and effort to create. Thank you for your efforts!!!!

Collapse
lydiahallie profile image
Lydia Hallie Author

Thanks so much 😃

Collapse
ziizium profile image
Habdul Hazeez

This might not be important but,i just want you to know that this post was featured in the December 17th, 2019 edition of esnextnews curated by Dr Axel Rauschmayer and Johannes Weber.

Congrats!

Collapse
lsaufnay profile image
Ludovic Saufnay

Thanks you for all explanation. I've been looking for this information for a long time ^^.
But with what tool do you make these wonderful gifs ? :)

Collapse
lydiahallie profile image
Lydia Hallie Author

I use Keynote!

Collapse
eugeniolentini profile image
Eugenio Lentini

Apple Keynote? really? I did not know it was good to do that :-)

Thread Thread
lydiahallie profile image
Lydia Hallie Author

Haha yeah you can export it to animated gifs :)

Collapse
lsaufnay profile image
Ludovic Saufnay

Thank you very much ! :D

Collapse
imthenachoman profile image
IMTheNachoMan

I'm gonna call you a TV series cause you've left me hangin' on a cliff. Great, great write-up and, I think I speak for everyone when I say we want more. Neh, we need more. For example, regarding "Say a certain function is invoked a 100 times...", I'm curious what the magic number is and how it was determined. Is it always 100 or does the compiler determine at run-time? And, armed with that information, how can we write more efficient JavaScript code?

Collapse
captainlee profile image
Dong-Hwi Lee

Thanks for the great and easy-to-understand article on JavaScript Engine internals. The animations are amazing!

I've translated your article in Korean:
betterweb.or.kr/blog/%eb%88%88%ec%...

Collapse
lydiahallie profile image
Collapse
supunkavinda profile image
01010011 01110101 01110000

Nice post. Very comprehensive. I shared it on our JS group

Collapse
adnandevio profile image
adnandevio

Thank you Lydia for this amazing explanation!
I am a language without a compiler but I have an engine (called sometimes a compiler). This engine is a place where 4 of my sons are playing. The first one called "Byte Stream Decoder" which creates tokens. These tokens are sent to the second one called "Parser" which creates nodes. These nodes are parts of the third one called "Abstract Syntax Tree". The last one called "Interpreter" ends the game by climbing the tree and getting the disk containing Byte Code. I forgot, I have also a daughter called "Inline Caching" which takes care of this disk and try to optimise it. I am JAVASCRIPT!

Collapse
meatboy profile image
Meat Boy

Stunning visualizations!

Collapse
lydiahallie profile image
Collapse
hellaren profile image
Anton

Hello Lydia, do you mind to share what tools you've used to create such visualizations?
I was thinking about such animations for some meetups I conduct from time to time.

I would really appreciate it, thank you!

Collapse
daniel13rady profile image
Daniel Brady

Thanks for the overview!

Question for you and the group: at what point in this process are scopes and lookup tables created for the various variable bindings and the values the hold? 🤔

Since variable bindings and their declared values need to make it into the byte code, I would think this happens prior to running the interpreter. And it seems like that process would require access to either the raw tokens created by the byte stream decoder, or the AST generated by the parser, because the code needs to be 'crawled' in a meaningful way so as to identify the bindings that have been declared.

Can anyone clarify for me?

Collapse
datelligence profile image
datelligence

Thanks, it's a good intro to the V8 which sometimes we see as a distant complex obscure thing.

Collapse
heikokanzler profile image
Heiko Kanzler 🇪🇺

Thank you Lydia, that was for me, as an Java developer, the exact amount of information and lovely illustration needed to get an overview how the Javascript engine works.

Collapse
mattishii26 profile image
Matthew Ishii

Very good job on this article! You broke it down to really easy to understand bits!

This brought up a question, and assuming I am understanding this correctly. There are parser nodes that signify a group of tokens that represent a single parser. For example, a single parser contains tokens about a single function.

With that said, what is faster? Having your JS code that is all in a single parser with more tokens or more parser's with less tokens?

I'd assume it depends on the case of how many parser's there are, because you could theoretically search for parser's in O(nlogn), with O(n) tokens, but at some point, if there are so many parser's, a single parser with more tokens would make sense.

Collapse
baeharam profile image
baeharam

Thanks for the great article! I translated into korean and here is the link

Collapse
bboydflo profile image
Florin Cosmin

One question I had in mind while reading this post was why not ship the pre-parser and parser to the world so devs can generate a more optimized version directly in their build system, and send that to the browser? Then I remembered about wasm which I guess it kinds of does exactly that, but more general and doesn't support javascript.

Collapse
yoshcode profile image
Aljosha Novakovic

Great post!! Very detailed, and I like your writing style. I appreciate the examples, like when you brought up a function being run 100 times and then getting passed through the optimizing compiler, I wish more writers would use that with programming explainers. Looking forward to reading more of your posts.

Collapse
jose31canizar profile image
José Daniel Cañizares

In reference to your inline caching example, if you had a function that was called every other time with different data types (“sum” could be called with numbers, then strings, then numbers again repeatedly), wouldn’t the performance of having to update the type feedback be nullified? If so, how is this handled in the V8 engine? Thanks!

Collapse
gmoraitis profile image
George Moraitis

Lydia hi!

This is a very good project.I always wanted see a some kind of visual presentation for programming languages.I am new to programming and i have many questions in general but this helped me a lot.I hope to continue doing this for javascript or for another language.
Thanks.

Collapse
salhernandez profile image
Salvador Hernandez

The visualizations make it so easy to understand! What tool did you use for that?

Collapse
alissonzampietro profile image
Collapse
markmckenna profile image
Mark McKenna

Awesome! Love it.

Collapse
friedrichwilken profile image
Friedrich

This is so beautiful.

Collapse
shiftyp profile image
Ryan Lynch (he/him)

This is really engaging and well thought out. Great job! 💯

Collapse
pretaporter profile image
Maksim

What tool are you using for animations?

Collapse
jrop profile image
Jonathan Apodaca

In another comment thread, she states that she is using Apple Keynote

Collapse
paulryan7 profile image
Paul Ryan

Wow! This is really cool. I did a talk on this subject before, but your gifs do such a great job (wish I had seen them when I was learning) !

Collapse
edwinboon profile image
Edwin Boon

Great article! Thanks for the explanation

Collapse
dominicduffin1 profile image
Dominic Duffin

Your visualisations are amazing!

Collapse
tiengdung90 profile image