Understanding the Web Browser: An Introduction to the Technologies and Processes Involved in Web Navigation

You type an address, hit Enter, and within seconds a full page appears on screen. Behind that simple experience is a chain of processes worth understanding, especially if you build what ends up rendered there.

From URL to request

The browser first resolves the domain to an IP address via DNS, then opens a connection to the server (usually over HTTPS). The server responds with HTML, which is the starting point for everything that follows.

Building the DOM

The browser parses the HTML and builds the DOM (Document Object Model), a tree representation of the page. In parallel, it processes stylesheets (CSS) and builds the CSSOM. Both trees combine to form the render tree, which determines what gets painted and how.

Running JavaScript

When the browser hits a <script> tag, it can pause HTML parsing to download and run the code, unless defer or async is used:

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

defer lets HTML parsing continue while the script downloads, running it only once the DOM is ready. It's the recommended default for most application scripts.

Painting and compositing

With the render tree ready, the browser computes layout (where each element goes) and finally paints pixels to the screen. Later changes — animations, scrolling, interactions — can trigger partial recalculations of this process, which is where the well-known "jank" comes from when a page feels slow.

Why it matters if you build software

Knowing that the browser processes HTML, CSS, and JS in distinct phases explains why resource loading order directly affects perceived performance, and why techniques like lazy loading or code splitting have a real impact on user experience.