How the browser turns code into pixels

Try it: What the parser really builds

HTML

<main class="tool">
  <header class="head">
    <h1>HTML → DOM</h1>
    <span class="pill" id="count">0 elements</span>
  </header>
  <div class="cols">
    <label class="pane">
      <span class="label">HTML source (what you wrote)</span>
      <textarea id="src" spellcheck="false"><ul><li>Pen<li>Notebook</ul>
<table><tr><td>Total<td>₹240</table>
<p>Hello <b>Ralfiz</p></textarea>
    </label>
    <section class="pane">
      <span class="label">DOM tree (what the parser built)</span>
      <ul class="tree" id="tree"></ul>
    </section>
  </div>
</main>

CSS

body { margin: 0; background: #f4f5fa; }
.tool { padding: 16px; display: grid; gap: 12px; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.head h1 { font-size: 18px; margin: 0; }
.pill { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #eef2ff; color: #4338ca; }
.cols { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pane { display: grid; grid-template-rows: auto 1fr; gap: 8px; background: #fff; border: 1px solid #e6e8ef;
  border-radius: 12px; padding: 12px; min-height: 280px; }
.label { font-size: 12px; font-weight: 600; color: #667085; text-transform: uppercase; letter-spacing: .04em; }
textarea { font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; border: 1px solid #e6e8ef;
  border-radius: 8px; padding: 10px; resize: vertical; background: #fbfbfd; color: #1f2328; }
textarea:focus { outline: none; border-color: #818cf8; box-shadow: 0 0 0 3px #e0e7ff; }
.tree { list-style: none; margin: 0; padding: 0; font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow: auto; max-height: 300px; }
.node { white-space: nowrap; border-left: 1px dashed transparent; }
.node.el { color: #7c3aed; }
.node.txt { color: #0f766e; }
.node.new { background: #fef9c3; border-radius: 4px; }

JavaScript

const input = document.querySelector('#src');
const tree = document.querySelector('#tree');
const count = document.querySelector('#count');

function row(depth, label, kind) {
  const li = document.createElement('li');
  li.className = 'node ' + kind;
  li.style.paddingLeft = depth * 16 + 'px';
  li.textContent = label;
  return li;
}

function walk(node, depth, rows) {
  if (node.nodeType === Node.ELEMENT_NODE) {
    const tag = node.tagName.toLowerCase();
    const r = row(depth, '<' + tag + '>', 'el');
    if (tag === 'tbody' && !input.value.includes('<tbody')) r.classList.add('new');
    rows.push(r);
  } else if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {
    rows.push(row(depth, '"' + node.textContent.trim() + '"', 'txt'));
  }
  for (const child of node.childNodes) walk(child, depth + 1, rows);
}

function render() {
  // DOMParser builds an inert document: no scripts run and no images load.
  const doc = new DOMParser().parseFromString(input.value, 'text/html');
  const rows = [];
  walk(doc.body, 0, rows);
  tree.replaceChildren(...rows);
  const n = doc.body.querySelectorAll('*').length;
  count.textContent = n + ' elements';
  return n;
}

input.addEventListener('input', render);
console.log('Parsed', render(), 'elements. Highlighted: nodes the parser added.');

Edit the HTML on the left. The tree shows the DOM the parser built: notice the tbody you never wrote and the closed tags it fixed for you.

Try it: Which stages does a change trigger?

HTML

<main class="lab">
  <header>
    <h1>Rendering pipeline</h1>
    <p>Pick a change. The chips show the stages the browser must run again.</p>
  </header>
  <ol class="stages" id="stages">
    <li data-stage="style">Style</li>
    <li data-stage="layout">Layout</li>
    <li data-stage="paint">Paint</li>
    <li data-stage="composite">Composite</li>
  </ol>
  <div class="stage-area"><div class="box" id="box">Ralfiz</div></div>
  <div class="controls" id="controls">
    <button data-change="width">Change width</button>
    <button data-change="color">Change colour</button>
    <button data-change="transform">Move with transform</button>
    <button data-change="reset" class="ghost">Reset</button>
  </div>
  <p class="why" id="why">Nothing changed yet.</p>
</main>

CSS

body { margin: 0; background: #f4f5fa; color: #1f2328; }
.lab { padding: 16px; display: grid; gap: 12px; }
h1 { font-size: 18px; margin: 0; }
header p { margin: 4px 0 0; color: #667085; font-size: 14px; }
.stages { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; counter-reset: s; }
.stages li { counter-increment: s; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  background: #fff; border: 1px solid #e6e8ef; color: #98a2b3; transition: all .2s; }
.stages li::before { content: counter(s) '. '; }
.stages li.on { background: #4f46e5; border-color: #4f46e5; color: #fff; box-shadow: 0 4px 12px rgba(79,70,229,.3); }
.stage-area { background: #fff; border: 1px solid #e6e8ef; border-radius: 12px; padding: 24px 16px; overflow: hidden; }
.box { width: 120px; height: 64px; border-radius: 12px; display: grid; place-items: center; color: #fff;
  font-weight: 700; background: #6366f1; transition: transform .35s ease, background-color .35s ease; }
.controls { display: flex; flex-wrap: wrap; gap: 8px; }
button { font: inherit; font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid #4f46e5; background: #4f46e5; color: #fff; }
button:hover { background: #4338ca; }
button.ghost { background: #fff; color: #344054; border-color: #d0d5dd; }
button:focus-visible { outline: 3px solid #c7d2fe; outline-offset: 2px; }
.why { margin: 0; font-size: 14px; color: #475467; min-height: 1.5em; }

JavaScript

const box = document.querySelector('#box');
const why = document.querySelector('#why');
const chips = document.querySelectorAll('#stages li');

// Typical costs in Chromium, Firefox and Safari (engines can optimise further).
const changes = {
  width: { stages: ['style', 'layout', 'paint', 'composite'],
    apply: () => { box.style.width = box.style.width === '220px' ? '160px' : '220px'; },
    text: 'Width changes geometry, so layout runs, then paint and composite.' },
  color: { stages: ['style', 'paint', 'composite'],
    apply: () => { box.style.backgroundColor = box.style.backgroundColor ? '' : '#db2777'; },
    text: 'Colour does not move anything: no layout, but the pixels must be repainted.' },
  transform: { stages: ['style', 'composite'],
    apply: () => { box.style.transform = box.style.transform ? '' : 'translateX(120px) rotate(-4deg)'; },
    text: 'transform moves an already painted layer: usually composite only.' },
  reset: { stages: [], apply: () => box.removeAttribute('style'), text: 'Back to the start.' },
};

document.querySelector('#controls').addEventListener('click', (event) => {
  const btn = event.target.closest('button');
  if (!btn) return;
  const change = changes[btn.dataset.change];
  change.apply();
  chips.forEach((chip) => chip.classList.toggle('on', change.stages.includes(chip.dataset.stage)));
  why.textContent = change.text;
  console.log(btn.dataset.change, '→', change.stages.join(' → ') || 'nothing');
});
document.querySelector('[data-change="width"]').click();

Click each change. Geometry changes redo layout, paint and composite; colour skips layout; transform can usually skip straight to composite.

Try it: When does my script run?

JavaScript

console.log('1. script runs, readyState =', document.readyState);

document.addEventListener('DOMContentLoaded', () => {
  console.log('2. DOMContentLoaded, readyState =', document.readyState);
});

window.addEventListener('load', () => {
  console.log('3. load, readyState =', document.readyState);
});

console.log('   (still inside the script: listeners are only registered)');

The script runs while the page is still loading. DOMContentLoaded fires when parsing is done, load when every resource has arrived.