The job of the JavaScript engine is to translate the JavaScript code that we write into something that the computer can understand which is 0 and 1.
There are a lot of JavaScript engines and one of them is the V8 engine by google (written in C++) which was released in 2008. Google had a problem with the basic engines that ran google Maps slowly so they created their engine. the result was an advanced engine that ran the JavaScript code faster.
The engine contains a few parts: parser, AST, Interpreter, profiler, and compiler.
Parser: Does lexical analysis which breaks code to tokens to identify their meanings.
AST (Abstract Syntax Tree): The tokens are formed into a tree to work with. there is an online tool that demonstrates this, check it out here.
In programming, there are 2 ways to translate to machine language: Interpreting and compiling.
Interpreter: translates and reads the files line by line on the fly. easy to get up and running but it’s slow.
Profiler: Monitor and watch the code as it runs and makes notes of how the code can be optimized (how many times a specific code runs, what types are used).
Compiler: Works ahead of time to create a translation and compiles it down to a language that the machine understands. the start takes a bit of time but code run faster
Since we sent a file to the browser and need it to run right away, using an interpreter is a good idea. we don’t want the user to wait for interaction with the website. but there is a con with this approach and it’s the same issue that Google had with google maps, running a lot of JavaScript and it’s getting slower and slower. because the problem with interpreters for example is when you running the same code more than once.
With the compiler, it takes a bit of time to start because of the compilation step at the beginning but it’s smart enough to improve code to be faster before execution. it makes an optimization, it returns an optimized code.
In late 2000 came a solution that takes the best from these two worlds and it calls the JIT compiler (just in time compiler). browsers started to mix compilers to make the engine faster. The code is sent to the interpreter from AST and spits byte code (byte code is not low level like machine code) which can be interpreted by the JavaScript engine. than the profiler watches the code as it runs and makes notes on how it can optimize this code. if for example, the same line of code runs a few times, the code is passed to the compiler (jit compiler) and it will try to make optimization, it will replace the sections that can improve the byte code with an optimized machine code. so it mixes and matches things and constantly runs through that loop. this means that the execution speed of JavaScript code will be improving since the profiler and compiler are constantly making updates and changes to our byte code to be efficient as possible.
Now that you know how the engine works, you can:
- Write more optimized code. code that the compiler can take and run faster than the regular JavaScript.
- Make sure that you don’t confuse the compiler because the compiler can make mistakes and try to optimize code that it can’t. in that scenario, it will do something called deoptimization which will take longer time to revert it back to the interpreter.
The 2 main things that the engine does for us are reading the code and executing it. it means that we need a:
- place to store and write information. to store variables objects and such.
- place to run and keep track of what’s happening line by line on the code.
for these 2 we use the “call stack” and “memory heap”.
Memory Heap: Place to store and write information. like allocate memory, use memory and release memory.
Call stack: Place to keep track of where we are in the code to run the code in order.
JavaScript is a single-threaded programming language. it means that only one set of instructions can be executed at a time. the proof for that is the fact that it has only one call stack.
The issue with single-threaded is that when a function takes a long time to complete it will freeze the web page and the user won’t be able to interact with the page until the call stack is empty.
So how do we use JavaScript and do so many long-run tasks without freezing the page?
JavaScript engine does not work alone, it uses the JavaScript runtime in the browser.