Document Object Model

VISUALIZATION

Every index.html you create when opened in browser, your browser creates a DOM. You can inspect element, make changes in the inspect panel, and see live changes on the page but it won’t make changes in your original index.html. So, that’s why “View Source” ≠ “Inspect Element”. The elements tab of Inspect Element in Dev Tools is showing the visualization of DOM tree and View Source Page shows your HTML source view, the original index.html file you wrote. Thus, DOM is the family tree of hierarchy of node.

STORAGE

The index.html get parsed by the browser engine Chrome (Blink engine) or Firefox (Gecko), the browser’s HTML parser reads text character by character and break down the HTML text into tokens representing start tags <p>, end tags </p> and their contents Hello. The parser has tree builder that takes tokens and turns them into nodes. Start tag <p> get turned into a new element node*,* object of type HTMLParagraphElement , wrapped with Hello as child node object of type Text.

let para = document.querySelector("p");

console.log(para.nodeName); // "P"

console.log(para.nodeType); // 1 (ELEMENT_NODE)

console.log(para.textContent); // "Hello"

In chrome, console.dir() can give the live DOM object tree in console of Dev Tools. These objects aren’t raw JS, they are C++ objects (fast) inside the browser engine. The browser exposes bindings to JS so you can access them as document.body, node.textContent. Hence, DOM is live in-memory data structure in RAM that browser builds it automatically from HTML and JS can read/write.

PROGRAMMING INTERFACE (DOM API)

index.html file get stored as bytes on disk. Unicode UTF-8 (Uniform Transformation Code) Format which is character encoding backward compatible with ASCII that tells the browser how to convert bytes. DOM API is a set of objects, methods and properties that your JS can use to interact ( Creating, Adding, Removing Nodes; Accessing / Traversing Nodes; Reading / Modifying Content; CSS& Style; Handle Events ) with the DOM tree manipulation. It doesn’t run automatically but needs to be called by JS code document.createElement("div");, CSS style p.style.color = "red";, User Interaction Events.

RENDERING

DOM is structure not visuals. CSSOM tree builds a Render Tree

When the HTML parser encounters tags pointing to external resources, it may need to pause parsing or fetch in the background, depending on the resource type:

1️⃣ Fetching external resources

When the HTML parser encounters tags pointing to external resources, it may need to pause parsing or fetch in the background, depending on the resource type:

CSS (<link> or <style>)

• When the parser sees a CSS file (<link rel="stylesheet" href="style.css">), it starts downloading it in the background.

• Rendering is blocked until the CSS is loaded and applied.

  • Why? Because the browser needs styles to calculate layout and paint correctly.

• Parsing the rest of the HTML can continue in modern browsers, but visual rendering of styled content waits.

---

JavaScript (<script> tag)

JavaScript is different because it can manipulate the DOM while parsing.

• By default:

    <script src="script.js"></script>
  

  • Browser pauses HTML parsing until the script is downloaded and executed.

  • Why? Because the script might do things like document.write() or modify DOM before the rest of HTML is parsed.

---

2️⃣ Attributes to control JS loading

defer

<script src="script.js" defer></script>

• Script is downloaded in the background.

• Execution is delayed until HTML parsing is complete.

• Multiple deferred scripts execute in the order they appear in HTML.

• Best for scripts that don’t need to run immediately but depend on the DOM being fully built.

async

<script src="script.js" async></script>

• Script is downloaded in the background.

• Executed as soon as it finishes downloading, which could be during or after parsing.

• Execution order is not guaranteed if multiple async scripts exist.

• Best for independent scripts (analytics, ads, trackers) that don’t rely on DOM order.

---

3️⃣ Preloading resources

Modern browsers try to be smart:

• They look ahead in HTML to see upcoming resources and download them early (speculative preloading).

• This speeds up page load but behavior varies across browsers.

To make resource priority explicit, you can use:

<link href="style.css" rel="preload" as="style">

• Tells the browser: “This resource is important; fetch it early.”

• Doesn’t automatically apply the CSS — it just fetches it earlier so it can be applied later with a normal <link> tag.

REFERENCES

https://web.dev/articles/howbrowserswork#introduction

https://starkie.dev/blog/how-a-browser-renders-a-web-page