What Really Happens After You Type a URL and Press Enter?

Typing a URL and pressing Enter feels simple. A page appears and we move on.

But inside the browser, a carefully ordered process starts running. This process turns a domain name into pixels on your screen.

This article explains that journey step by step, focusing on understanding the flow instead of memorizing terms.

A Simple Question to Start With

What happens after I type a URL and press Enter?

Answering this one question explains how browsers work from start to finish.

Step 1: Finding the Server Using DNS

When you press Enter, the browser does not immediately download the website.

First, it needs to know where the website is located.

Computers do not understand names like example.com. They communicate using IP addresses.

So the browser performs DNS resolution to convert the domain name into an IP address.

This same DNS process happens every time you visit a website. I’ve explained it in detail here:

https://ashwingudepu.hashnode.dev/how-dns-resolution-works

Once DNS resolution is complete, the browser knows which server to contact.

Step 2: Sending a Request to the Server

After DNS, the browser sends an HTTP request to the server.

In simple terms, the browser is saying:

“Send me the files needed to display this website.”

This is the same type of request you send using curl.

A Simple curl Example

curl https://example.com

What this does:

• Sends an HTTP request

• Receives a response from the server

• Shows the raw response as text

Browser vs curl

curl helps us understand how servers communicate. The browser continues far beyond this step.

If you want to learn curl from scratch:

https://ashwingudepu.hashnode.dev/getting-started-with-curl

Step 3: What the Server Sends Back

The server usually responds with:

• An HTML file

• CSS files

• JavaScript files

• Images and fonts

At this point, nothing is visible on the screen.

The browser has files, not a webpage.

What a Browser Actually Is

A browser is not just a tool that opens websites.

A browser:

• Fetches files from the internet

• Understands HTML, CSS, and JavaScript

• Builds structure and layout

• Draws pixels on the screen

• Responds to user actions

It works as a group of components, each handling a specific task.

Main Parts of a Browser

At a high level, a browser consists of:

• User Interface

• Browser Engine

• Rendering Engine

• JavaScript Engine

• Networking and storage systems

Each part has a clear responsibility.

User Interface in Detail

The User Interface includes:

• Address bar

• Tabs

• Back and forward buttons

• Reload button

• Bookmark button

The UI does not understand HTML, CSS, or JavaScript. Its job is to capture user actions and pass instructions to the browser engine.

Browser Engine and Rendering Engine

These two are different and often confused.

Browser Engine

The browser engine acts as the coordinator.

• Connects the UI with internal components

• Manages navigation

• Controls page loading

• Coordinates rendering and JavaScript execution

Rendering Engine

The rendering engine handles everything visual.

• Parses HTML and CSS

• Builds page structure

• Calculates layout

• Paints content on the screen

A Quick Detour: What is "Parsing"?

Before we look at HTML, we need to understand parsing.

Parsing means turning a string of text into a structure the computer understands. Imagine a simple math problem:

2 + 3

To you, the meaning is obvious. But to a computer reading text, it is just a list of characters: '2', ' ', '+', ' ', '3'.

A parser breaks this down into a tree structure:

• Root Node: Operation (Add)

• Child Node 1: Value (2)

Child Node 2: Value (3)

Once it is a tree, the computer can solve it. Browsers do this same thing. They take the string of HTML text and parse it into a tree structure called the DOM.

HTML Parsing and DOM Creation

HTML arrives as plain text.

The browser does not display this text directly. Instead, it reads HTML line by line and tag by tag.

While reading HTML:

• Opening tags create elements

• Closing tags end elements

• Nested tags form parent-child relationships

As this process continues, the browser builds the DOM (Document Object Model).

The DOM:

• Is a tree structure

• Represents the page’s structure

• Exists entirely in memory

Each HTML element becomes a node in this tree. JavaScript later uses this DOM to read and modify the page.

CSS Parsing and CSSOM Creation

CSS is parsed separately from HTML.

The browser reads selectors, properties, and values to create the CSSOM (CSS Object Model).

This step is critical:

• The DOM defines what elements exist

• The CSSOM defines how those elements should look

Combining DOM and CSSOM

Once both structures are ready, the browser combines them.

DOM plus CSSOM creates the Render Tree.

The render tree:

• Includes only visible elements

• Applies final computed styles

Elements with display: none are excluded.

Layout (Reflow)

Before drawing anything, the browser calculates layout.

This step is called layout, also known as reflow.

Reflow calculates:

• Width and height

• Positions on the page

• Spacing and alignment

• Line wrapping

Reflow answers one question:

“Where does everything go?”

Painting and Display

After layout, the browser paints the page.

Painting is where:

• Text is drawn

• Colors are applied

• Backgrounds and borders appear

• Images are rendered

Once painting is complete, everything is sent to the screen and the page becomes visible.

Reflow vs Repaint

Think of it this way:

• Repaint: You change the color of a wall. The wall stays in the same place.

• Reflow: You knock down the wall and build a new room. You have to measure everything again.

JavaScript Engine vs Browser Engine

These two are not the same.

Browser Engine

• Coordinates the entire browser

• Connects UI, networking, rendering, and JavaScript

JavaScript Engine

• Executes JavaScript code

• Handles logic and events

• Does not render or paint

JavaScript requests changes. The browser engine decides how to apply them.

Final Thoughts

You do not need to remember every term in this article.

What matters is understanding the flow.

A browser takes files from the internet, turns them into structure, applies styles, calculates layout, and finally paints pixels on the screen.

Once this flow is clear, performance issues, layout bugs, and rendering behavior start making sense naturally.