Introduction

We have already discussed, how the internet works. Now, using the internet, we display our websites to the end user. It is very important to know how a website gets loaded into a browser. This will not only help you to write better codes but will also help you to debug your code efficiently. To understand how does a website work, we will discuss the client-server concept, website component files, how the browser works, and the DOM tree.

Client and Server

There are two types of computers connected to the internet, called clients and servers. A simplified diagram of how a server and a client communicate with each other is shown below:

• Servers are the devices that are directly connected to the internet and are used to store webpages, sites, apps and files. Whenever a user opens a website, it is downloaded from these servers.
• Clients are the devices that are used by a user, i.e. our personal computers, mobiles, tablets, etc. These devices have web browsing software pre-installed in it (i.e. browsers like chrome or Firefox).

Website component files

A website is made up of different types of files. These files can be categorised into two sections:

• Code Files: All the websites are built primarily from HTML, CSS and JavaScript. Although you might have seen other technologies being involved in websites development. These files too, are later rendered and converted into these primary languages itself.
• Assets: All other stuff that makes a website apart from primary language files comes into assets, i.e. images, music, video, pdfs, etc.

How the browser works

The main functionality of a browser is to present the website you choose, by requesting it from the respective server and displaying it in the browser. In given subtopic, we will discuss the structure and functionality of major browsers, i.e. Chrome, Internet Explorer and Firefox.

A browser’s high-level structure includes the following:

• User Interface: Everything that you can see on a browser, i.e. address bar, buttons, display window, etc.
• Rendering Engine: It parses HTML, XML, CSS, etc.; and displays the content accordingly on the screen.
• Networking: It performs all the network call requests, e.g. HTTP requests.
• JavaScript Interpreter: It parses and executes the JavaScript codes.
• Data storage: Every browser supports persistence layer data storage. It means, you can store your data locally on the browser as cache and it never gets deleted until the browser cache is cleared. We will later utilise this browser feature in our codes too.

Apart from the components mentioned above, there are other components that are not relevant to this article.

The DOM tree

DOM is a cross platform programming interface that treats HTML, XML and other mark-up languages in the form of a tree structure. In a DOM every tag/element is represented by an individual node. Every browser utilises a DOM structure to display a webpage.

Once the browser gets the content of a webpage from the server, it parses the XML into HTML and later converts the element of HTML to DOM nodes in a tree called “content tree”. Then the CSS is parsed and converted into a tree called “render tree”. The nodes of these trees are later displayed on the screen according to their coordinates. A generic example is shown below:

Figure 1 HTML DOM Tree Diagram

How does a website work

The learning point here is that, whatever code you write for frontend, it will be converted into the basic languages, i.e. HTML, CSS and JavaScript. And the HTML and CSS will be converted into a DOM tree structure and will be then displayed on the browser window accordingly.