What the Browser Actually Does

Build the mental model

A browser isn't just a URL bar and a window showing a page — it's a complex piece of software doing many jobs at once.

The browser also stores some local state on your behalf. Cookies and localStorage both exist for this — this lesson only notes they exist; cookies get their own deeper lesson later.

The core component doing this work is called a browser engine — Chrome and Edge use Blink, Firefox uses Gecko, Safari uses WebKit. Engine internals sit outside this course's scope.

Browser Engine

The core software component inside a browser that parses HTML, applies CSS, executes JavaScript, and renders the page — Chrome/Edge use Blink, Firefox uses Gecko, Safari uses WebKit.

HTML + CSS + JS -> BROWSER -> RENDERED PAGE
-------------------------------------------
HTML  ---\
CSS   ----> BROWSER ---> RENDERED PAGE
JS    ---/

  Inside the browser:
  1. Request resources
  2. Parse HTML (build DOM)
  3. Apply CSS (build styles)
  4. Execute JS (run logic)
  5. Render pixels to screen

  (also: stores cookies/localStorage,
   enforces browser security rules)

Connect it to a real scenario

The code example takes page ingredients — an HTML string, a CSS rule count, a JS script count — and returns the ordered list of processing steps the browser would perform.

• Text-only page — Parse HTML, Layout, Paint (3 steps)
• Styled page — adds applying CSSOM and combining a render tree (5 steps)
• Interactive page — adds an Execute script step (6 steps)

This function is a conceptual illustration, not a precise simulation of a real engine's pipeline — the point is seeing how the step list grows as more ingredients enter the page.

• The browser's core jobs are requesting, parsing, styling, executing, and rendering
• A browser engine is the core component that performs these jobs
• Cookies/localStorage and security rules are also part of the browser's responsibilities

Try the working example

function getProcessingSteps(page) {
  const { html, cssRuleCount, jsScriptCount } = page;
  const steps = [];

  if (html) steps.push("Parse HTML into the DOM tree");
  if (cssRuleCount > 0) steps.push(`Apply ${cssRuleCount} CSS rule(s) to build styles (CSSOM)`);
  if (html && cssRuleCount > 0) steps.push("Combine DOM + CSSOM into a render tree");
  if (jsScriptCount > 0) steps.push(`Execute ${jsScriptCount} script(s)`);
  steps.push("Layout: calculate size/position of each element");
  steps.push("Paint: draw pixels to the screen");

  return steps;
}

const textOnlyPage = { html: "<p>Hello</p>", cssRuleCount: 0, jsScriptCount: 0 };
const styledPage = { html: "<p>Hello</p>", cssRuleCount: 3, jsScriptCount: 0 };
const interactivePage = { html: "<button>Click</button>", cssRuleCount: 2, jsScriptCount: 1 };

for (const [name, page] of [
  ["Text-only page", textOnlyPage],
  ["Styled page", styledPage],
  ["Interactive page", interactivePage],
]) {
  console.log(`${name}:`);
  getProcessingSteps(page).forEach((step, i) => console.log(`  ${i + 1}. ${step}`));
}

Text-only page:
  1. Parse HTML into the DOM tree
  2. Layout: calculate size/position of each element
  3. Paint: draw pixels to the screen
Styled page:
  1. Parse HTML into the DOM tree
  2. Apply 3 CSS rule(s) to build styles (CSSOM)
  3. Combine DOM + CSSOM into a render tree
  4. Layout: calculate size/position of each element
  5. Paint: draw pixels to the screen
Interactive page:
  1. Parse HTML into the DOM tree
  2. Apply 2 CSS rule(s) to build styles (CSSOM)
  3. Combine DOM + CSSOM into a render tree
  4. Execute 1 script(s)
  5. Layout: calculate size/position of each element
  6. Paint: draw pixels to the screen

MDN Web Docs — How browsers work — How the Web Works