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.
- 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.
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:
- Parsing HTML and generating the DOM (Document Object Model)
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.
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.
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.
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.
So these are the two phases of the lifecycle of any web page or application.
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! 👋