How JavaScript Works in Browser

To write clean, bug-free JavaScript, you need a solid mental model of what happens behind the scenes when a browser downloads, parses, and executes your code.

1. The Browser Execution Architecture

Every modern web browser contains two primary components for web pages:

1. 1
   The Rendering Engine (e.g. Blink in Chrome, Gecko in Firefox, WebKit in Safari): Parses HTML into the DOM (Document Object Model) and CSS into the CSSOM (CSS Object Model).
2. 2
   The JavaScript Engine (e.g. V8 in Chrome & Node.js, SpiderMonkey in Firefox, JavaScriptCore in Safari): Reads, compiles, and executes JavaScript code.

+-----------------------------------------------------------------------------+
|                          JAVASCRIPT RUNTIME ENVIRONMENT                     |
+-----------------------------------------------------------------------------+
|   [ Call Stack ]                      [ Memory Heap ]                       |
|   Tracks function execution           Stores variables, objects, &          |
|   frames (LIFO)                       allocated memory data                 |
+-----------------------------------------------------------------------------+
|   [ Web APIs ] (Provided by the Browser, NOT JavaScript itself!)            |
|   DOM Events, setTimeout(), fetch(), LocalStorage, console.log              |
+-----------------------------------------------------------------------------+
|   [ Callback Queue ]                  [ Event Loop ]                        |
|   Holds finished async tasks          Continuously checks if Call Stack is  |
|   ready to execute                    empty; pushes callbacks to Stack!     |
+-----------------------------------------------------------------------------+

2. The Three Pillars of the JS Runtime

1. The Call Stack

JavaScript is a single-threaded programming language, meaning it has only one call stack and can execute only one task at a time.

• When you invoke a function, a new execution frame is pushed onto the stack.
• When the function finishes and returns, its frame is popped off the top of the stack.

2. The Memory Heap

An unstructured pool of computer RAM where objects, arrays, and functions are allocated and stored. Unused memory is automatically freed by the engine's Garbage Collector.

3. The Event Loop & Web APIs

If JavaScript is single-threaded, how can it fetch data from an API without freezing the entire browser screen?

• Heavy asynchronous tasks (fetch, setTimeout, DOM click events) are delegated to the browser's Web APIs.
• When the timer or network request completes, the Web API pushes the callback into the Callback Queue.
• The Event Loop constantly monitors: "Is the Call Stack currently empty?" As soon as the call stack is clear, the Event Loop takes the first task from the queue and pushes it onto the Call Stack!

3. How JavaScript is Linked to HTML Documents

There are three ways to embed JavaScript into an HTML page:

A. External Script (Recommended Best Practice)

Separate your logic into a .js file:

B. Internal Script Tag

Inside an HTML <script> block:

C. Inline HTML Event Attribute (Deprecated / Avoid)

4. Modern Script Loading: defer vs async

Where should you place <script> tags in your HTML?

The Modern Solution: Use defer in the <head>!

• defer: Downloads JavaScript in the background while HTML parsing continues. Executes scripts only after the full HTML document is parsed, preserving script execution order.
• async: Downloads in the background, but interrupts HTML parsing and executes immediately as soon as download completes (great for independent analytics scripts like Google Analytics).