How A Web Page Works

Have you ever wondered how your web page gets built by your browser and the steps that are taken to convert your HTML, CSS, and JavaScript code into a fully fledged website that can handle events and to be interactive? Well in this article I will try my best to explain all of this to you which will help you to optimize your websites and applications for better speed and performance.

What is a Web Browser?

Yes, I hear you saying "come on, we all know what a web browser is, give us something more useful!". Well, everyone including my mom knows what a web browser is but do you as a developer really understand the mechanics it uses to get you your webpage? Your browser is just a program that gets files from the server you request (when you search something, etc.) or your site requests (to load assets, etc.) from a server. The browser knows what to exactly to display by using it's engine. Every browser got it's own browser engine. Chrome's browser engine is Blink, while Firefox's is Gecko.

The Lifecycle of a website

The lifecycle of a website starts when a user enters a new website. The first thing the browser does when you click or visit a link is it forms a request that is sent to a server that processes your request and then creates a response that's most times HTML, CSS, and JavaScript. Then when our browser receives that response and goes through two steps to render the web page correctly:

• Building Page
• Handling Events but it doesn't stop there, it keeps repeating these steps as long as you are interacting with the site and ends only when you close the website or you shift to another tab.

Page building Phase

Let's explore how your browser builds your web page because that's the first thing it does as soon as it gets the information it needs from the server. It's purpose is to set up what you see on the web page which is done in two states:

1. Parsing HTML and generating the DOM (Document Object Model)
2. Executing the JavaScript Code The browser can switch between two states. If it encounter a script tag the browser pauses the rendering of the HTML and executes the code inside of the script tag then gets back to parsing HTML and DOM construction and stops when it doesn't find any more HTML to build or JavaScript to run.

Note: That's why people tend to put their script tags in the end of their body tag so all the HTML been parsed before executing the JavaScript code.

Parsing HTML and generating the DOM

HTML is like the skeleton of web pages so when the browser receives it, it parses it one HTML element at a time and builds the structural representation of these HTML elements where every HTML element is represented as a node (A tree like structure) aka the DOM.

Each box is a node element in your DOM

As you can now probably realize why it was named Document Object Model. The first top element is the document object and they are structured really well like a model. Every element can either have or be a sibling or a child or a parent. For example the head element got the title as a node child and the title got a text node inside of it while the body got 3 children and the anchor and heading tag got one child. Every element got a parent except the root HTML element.

Note: The document is not an element so it's not the parent of the HTML element. The document is just an object which generates the tree like structure for your page.

Executing the JavaScript code

When a browser sees a script tag it uses another engine for executing that code, and just like browser engines there is a different JavaScript engines. For Chrome and Opera it's the "V8 engine", for Firefox it's "SpiderMonkey", and for Internet Explorer it's "Chakra".
The browser provides a global object that you can use to interact with the browser, represent the page you are on and contain the DOM. For the browser it's the window object, while for Node.JS it's the global object. The window object contains the DOM to access, modify, add elements in our web page.

Event Handling

You probably heard of the word GUI before. Which stands for Graphical User Interface. The GUI is a form of user interface that reacts to events done by the user with event handling to convey information.
The process of event handling:

• The browser checks if there is an event on the top of the event queue. (Event queue is like a line of events that gets executed from top to bottom)
• If no events are available, then the browser repeats the process
• If there’s an event at the top of the event queue, then the browser takes it and executes the callback function to it.

Note: Only one event can be executed at a time since JavaScript is a synchronous (Code is executed one at a time) programming language. While events are asynchronous (Code is executed along with each other at the same time).

So these are the two phases of the lifecycle of any web page or application.

Wrap up

If you are wondering how this will be useful for you then thinking again because this information is gonna help you a lot with performance for your sites and applications and make it more responsive.

If you enjoyed the blog and learned anything make sure to follow me for more blogs soon. Have a great day and goodbye! 👋