How JavaScript Works in the Browser Explained

// When the browser encounters this in HTML:
// <script src="app.js"></script>
 
// Step 1: The browser fetches app.js from the server (network request)
// Step 2: The HTML parser PAUSES while the script loads and executes
// Step 3: The JavaScript engine receives the raw source code text
// Step 4: The engine parses the text into an Abstract Syntax Tree (AST)
 
// For example, this source code:
const greeting = "Hello, World!";
 
// Gets parsed into an AST structure (simplified):
// {
//   type: "VariableDeclaration",
//   kind: "const",
//   declarations: [{
//     id: { type: "Identifier", name: "greeting" },
//     init: { type: "StringLiteral", value: "Hello, World!" }
//   }]
// }
 
// Step 5: The engine compiles the AST into executable bytecode
// Step 6: Hot code paths are further compiled into optimized machine code

<!-- Default: Blocks HTML parsing -->
<script src="app.js"></script>
 
<!-- defer: Downloads in parallel, executes after parsing -->
<script src="app.js" defer></script>
 
<!-- async: Downloads in parallel, executes immediately when ready -->
<script src="analytics.js" async></script>
 
<!-- Module scripts are deferred by default -->
<script type="module" src="app.js"></script>

// How JIT compilation works (conceptual):
 
// 1. First encounter: The engine interprets the function (fast startup, slow execution)
function calculateTotal(items) {
  let total = 0;
  for (const item of items) {
    total += item.price * item.quantity;
  }
  return total;
}
 
// 2. After many calls: The engine notices this function is "hot" (frequently called)
// 3. The JIT compiler optimizes it based on observed types:
//    - "items is always an array of objects"
//    - "price and quantity are always numbers"
//    - "the loop runs many iterations"
// 4. The optimized machine code runs MUCH faster than interpreted code
 
// 5. If assumptions break (e.g., someone passes a string as price),
//    the engine "deoptimizes" back to interpreted mode
calculateTotal([{ price: "ten", quantity: 2 }]); // triggers deoptimization

// Visualizing the call stack
 
function multiply(a, b) {
  return a * b;          // Stack: [multiply]
}
 
function calculateTax(price, rate) {
  const tax = multiply(price, rate);  // Stack: [calculateTax, multiply]
  return tax;            // Stack: [calculateTax]
}
 
function processOrder(item) {
  const subtotal = item.price;        // Stack: [processOrder]
  const tax = calculateTax(subtotal, 0.08);  // Stack: [processOrder, calculateTax]
  const total = subtotal + tax;       // Stack: [processOrder]
  return total;
}
 
// Call stack at deepest point:
// 3. multiply(price, rate)      <-- currently executing
// 2. calculateTax(subtotal, 0.08)
// 1. processOrder(item)
// 0. (global execution context)
 
const result = processOrder({ price: 100 });
// result: 108

// PROBLEM: Long-running synchronous code blocks the UI
 
function findPrimeNumbers(limit) {
  const primes = [];
  for (let i = 2; i <= limit; i++) {
    let isPrime = true;
    for (let j = 2; j <= Math.sqrt(i); j++) {
      if (i % j === 0) {
        isPrime = false;
        break;
      }
    }
    if (isPrime) primes.push(i);
  }
  return primes;
}
 
// This blocks the main thread for several seconds!
// During this time: no clicks register, no animations run, the page freezes
const primes = findPrimeNumbers(10_000_000);
 
// SOLUTION: Break work into chunks or use Web Workers
// (covered in the Web APIs section below)

// These are NOT part of the JavaScript language specification
// They are Web APIs provided by the browser environment
 
// DOM API: Interact with the HTML document
const heading = document.querySelector("h1");
heading.textContent = "Updated by JavaScript";
heading.style.color = "blue";
 
// Fetch API: Make network requests
const response = await fetch("https://api.example.com/data");
const data = await response.json();
 
// Timer APIs: Schedule code to run later
setTimeout(() => console.log("Runs after 1 second"), 1000);
setInterval(() => console.log("Runs every 2 seconds"), 2000);
 
// Storage APIs: Persist data locally
localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme");
 
// Console API: Developer debugging
console.log("Standard log");
console.warn("Warning message");
console.error("Error message");
console.table([{ name: "Alice", age: 30 }, { name: "Bob", age: 25 }]);

// Event loop priority demonstration
 
console.log("1: Synchronous - runs first");
 
setTimeout(() => {
  console.log("4: Macrotask - runs last");
}, 0);
 
Promise.resolve().then(() => {
  console.log("3: Microtask - runs after all synchronous code");
});
 
console.log("2: Synchronous - runs second");
 
// Output (always in this order):
// 1: Synchronous - runs first
// 2: Synchronous - runs second
// 3: Microtask - runs after all synchronous code
// 4: Macrotask - runs last
 
// Even though setTimeout has a 0ms delay, it goes to the macrotask queue
// Promises use the microtask queue, which has higher priority

// Complete async flow: fetch() request lifecycle
 
async function loadUserProfile(userId) {
  console.log("A: Start function (call stack)");
 
  // 1. fetch() is called on the call stack
  // 2. The browser's network thread handles the HTTP request
  // 3. JavaScript continues executing (does not wait here without await)
  const response = await fetch(`/api/users/${userId}`);
  // 4. When the response arrives, a microtask is queued
  // 5. The event loop picks up the microtask and resumes here
 
  console.log("B: Response received (resumed from microtask)");
 
  const user = await response.json();
  // 6. JSON parsing happens, another microtask is queued when done
  // 7. The event loop picks it up and resumes here
 
  console.log("C: Data parsed (resumed from microtask)");
 
  // 8. DOM update happens synchronously on the call stack
  document.getElementById("username").textContent = user.name;
 
  console.log("D: DOM updated (call stack)");
 
  // 9. After this function returns, the browser can repaint the screen
  return user;
}

// Creating elements and building DOM structure
const article = document.createElement("article");
article.className = "blog-post";
article.setAttribute("data-id", "42");
 
const title = document.createElement("h2");
title.textContent = "Understanding the Browser";
 
const body = document.createElement("p");
body.textContent = "JavaScript interacts with the DOM through Web APIs.";
 
article.appendChild(title);
article.appendChild(body);
document.getElementById("content").appendChild(article);
 
// Event handling: The browser queues events as macrotasks
document.getElementById("submitBtn").addEventListener("click", (event) => {
  event.preventDefault();
 
  // This callback runs when the event loop processes the click macrotask
  const formData = new FormData(event.target.closest("form"));
  const name = formData.get("name");
  const email = formData.get("email");
 
  // DOM updates are synchronous within this callback
  document.getElementById("status").textContent = "Submitting...";
 
  // But the fetch is async (handled by the browser's network thread)
  submitForm({ name, email });
});

// BAD: Causes layout recalculation on every iteration
const list = document.getElementById("itemList");
for (let i = 0; i < 1000; i++) {
  const li = document.createElement("li");
  li.textContent = `Item ${i}`;
  list.appendChild(li); // triggers layout on each append
}
 
// GOOD: Batch with DocumentFragment
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const li = document.createElement("li");
  li.textContent = `Item ${i}`;
  fragment.appendChild(li); // no layout trigger (fragment is in memory)
}
list.appendChild(fragment); // single layout recalculation

// Debounce: Only execute after the user stops triggering the event
function debounce(callback, delay) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => callback.apply(this, args), delay);
  };
}
 
// Throttle: Execute at most once per interval
function throttle(callback, interval) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime >= interval) {
      lastTime = now;
      callback.apply(this, args);
    }
  };
}
 
// Usage
const handleSearch = debounce((event) => {
  fetchSearchResults(event.target.value);
}, 300);
 
const handleScroll = throttle(() => {
  updateScrollPosition();
}, 100);
 
document.getElementById("searchInput").addEventListener("input", handleSearch);
window.addEventListener("scroll", handleScroll);