One step

What happens when you type a URL in a browser?

Mamta Gupta's photo
Mamta Gupta
·

3 min read

How Web works?

Let's understand in brief the browser functionality

URL Structure: A URL, short for a uniform resource locator is a web address pointing to a specific website, a web page, or a document on the internet.

What happens when you type a URL into your browser?

A web browser takes you anywhere on the internet, letting you see text, images and video from anywhere in the world.

NOTE: When you type a URL into your browser and press enter. End to end, the process involves the browser, your computer’s operating system, your internet service provider, the server where you host the site, and the services running on that server. It involves all browser components.

Browser components:

Let's have a brief explanation of them:

  • User Interface (UI): screen where you see those menus, back/ forward buttons etc.

  • Browser Engine: Marshals action between UI and rendering engine

  • Rendering Engine: Displays the content(html+css etc)

  • Networking: HTTP requests with different implementations

  • Javascript Interpreter: Parse & execute JS code

  • UI Backend: Draws the basic widgets, and exposes generic interfaces that are not platform specific. - Data Persistence: Storage area used by cookies, localStorage, IndexDB etc.

The rendering engine

The responsibility of the rendering engine is well… Rendering, that is display of the requested contents on the browser screen. By default, the rendering engine can display HTML and XML documents and images. It can display other types of data via plug-ins or extensions; for example, displaying PDF documents using a PDF viewer plug-in. However, in this chapter we will focus on the main use case: displaying HTML and images that are formatted using CSS.The rendering engine - Main flow(Parsing HTML & CSS)

Parsing HTML & CSS

  • Firstly, render engine starts parsing the html document. Converts element to DOM nodes in a tree called the "content tree"

  • The engine will parse the style data, both in external CSS files and in style elements. Styling information together with visual instructions in the HTML will be used to create another tree: the render tree.

Tree construction

Parsing a document means translating it to a structure the code can use. The result of parsing is usually a tree of nodes that represent the structure of the document. This is called a parse tree or a syntax tree. For example, parsing the expression 2 + 3 - 1 could return below tree:

Layout

  • Once the browser has received the response from the server, it inspects the response headers for information on how to render the resource.

  • The Content-Type header above tells the browser it received an HTML resource in the response body. Lucky for us, the browser knows what to do with HTML!

  • The first GET request returns HTML, the structure of the page. But if you inspect the HTML of the page (or any web page) with your browser’s dev tools, you’ll see it references other Javascript, CSS, image resources and requests additional data in order to render the web page as designed.

  • As the browser is parsing and rendering the HTML, it is making additional requests to get Javascript, CSS, images, and data. It can do much of this in parallel

Summary:

  • You type a URL in your browser and press Enter

  • The browser looks up IP address for the domain

  • The browser initiates TCP connection with the server

  • The browser sends the HTTP request to the server

  • The server processes request and send back a response

  • The browser renders the content

Appendix

Please refer the below documentation to get more depth on how proficiently browser does find IP, send request get response and parse then display.