JS Internals

Javascript is weird. Some people love it, others hate it. It has a lot of unique mechanisms which are not present and have no counterparts in other popular languages. Code execution order, for instance, which might be sometimes unintuitive, definitely stands out.

Understanding the browser environment, what it is composed of and how it works will make you more confident in writing JavaScript and well-prepared for potential issues that might happen.

In this piece, I’ll try to shed some light on what is happening under the hood of the Chrome browser. We’ll take a look at:

V8 Javascript Engine — compilation steps, heap and memory management, and call stack.
Browser runtime — concurrency models, event loops, and blocking and non-blocking code.
JavaScript Engine:

The most popular JavaScript engine is V8 which is written in C++ and used by Chromium-based browsers such as Chrome, Opera, and even Edge.

Basically, the engine is a program that translates your JavaScript into machine code and executes the result on a computer’s central processing unit (CPU).
Browser Runtime
So V8 can execute JavaScript according to the standard, synchronously, using a single call stack. But there is not much we can do with it. We need to render the UI. We need to handle user interactions with the UI. Moreover, we need to handle user interactions while making network requests. But how do we achieve concurrency when all our code is synchronous? It’s possible thanks to the browser engine.

The browser engine is responsible for rendering pages with HTML and CSS. In Chrome it’s called Blink. It’s a fork of WebCore which is a layout, rendering, and Document Object Model (DOM) library. Blink is implemented in C++ and exposes Web APIs like DOM elements and events, XMLHttpRequest, fetch, setTimeout, setInterval and so on, which are accessible via JavaScript.