preloader we mentioned in the previous articles.
A preloader is like a parser that scans the HTML file while the main parser is processing the HTML code. Its role is to look for resources like stylesheets, scripts or images (that also need to be retrieved from a server) and request them. Hopefully, by the time the HTML is parsed, those resources are already downloaded and ready to be processed.
browser engine). Depending on the browser, JS engines can have different names and work differently.
WebAssembley. It implements ECMA-262.
Just-In-Time (JIT) compilation, a mix between
During compilation, a piece of software called
the compiler takes the code written in a high-level language and converts it into machine code, all at once. An intermediate file (called an
object file) is created and that file can run on any machine. After these steps are taken, the code can be executed (imediately after, sometimes in the future or never).
Just in time compilation is a feature of an interpreter for a given language and it tries to take advantage of both
compilation and interpretation. Whether during
pure compilation, the code is translated before it is executed, in
JIT compilation the code is translated
A very important aspect about JIT compilation is that it will compile the source code into machine code instructions of the running machine. This means that the resulting machine code is optimized for the running machine’s CPU architecture.
In super simple terms, these three processes could be resumed to:
- Compiler: translates the code
- Interpreter: runs the code
- JIT Compiler: translates while running the code
Today, the line between the terms
interpretation has become very blurry so the subject can be extensively debated. If you want to know more about these processes, you could read this article on Mozilla Hacks for starters.
Abstract Syntax Tree (AST). The code will be split into pieces that are relevant to the language (like
const keywords) and then all these pieces will build the Abstract Synta Tree.
Let's say we have a file containing a program that only does one thing, and that's to define a variable:
const age = 25;
This is how this incredibly super simple line of code would look as an Abstract Syntax Tree (I am using @babel/parser-7.16.12):
Top comments (6)
Nice articles about how a browser works. Going into detail but not too deep, well explained and with further links if someone want to go into more detail.
Really appreciate your work, thanks for writing this!
Thank you, I'm glad it helped.
Great article lots of detail.
Thank you. I hope you found it useful.
I'm glad you like it 🙏. There will be a few more articles to come.