Introduction:
Browsers have become an integral part of our daily routine as developers. However, have you ever wondered about the complex mechanisms that allow browsers to display pages that contain HTML, CSS, and JavaScript? If not, worry not! This article delves into the internal mechanisms of a browser, unraveling what it is, how it operates, and much more.
So without delaying further, Let's START!
What is a Browser?
A browser, which was formerly thought to be just another piece of software, has evolved into a powerful creature. Its importance is comparable to that of an operating system. Understanding its internal structure is critical, especially for web developers who rely on it.
A browser is a software application used to locate, retrieve, and display content on the World Wide Web, including Web pages, images, videos, and other files.
As a client/server model, the browser is the client run on a computer that contacts the Web server and requests information. The Web server sends the information back to the Web browser which displays the results on the computer or other Internet-enabled device that supports a browser.
Let's take a look at some of its Components...
To truly understand a browser's inner workings, let's break it down into its essential components:
The user interface: this includes the address bar, back/forward button, bookmarking menu, etc. Every part of the browser display except the window where you see the requested page.
The browser engine: marshals actions between the UI and the rendering engine.
The rendering engine: responsible for displaying requested content. For example, if the requested content is HTML, the rendering engine parses HTML and CSS and displays the parsed content on the screen.
Networking: for network calls such as HTTP requests, using different implementations for different platforms behind a platform-independent interface.
UI backend: used for drawing basic widgets like combo boxes and windows. This backend exposes a generic interface that is not platform-specific. Underneath it uses operating system user interface methods.
JavaScript interpreter. Used to parse and execute JavaScript code.
Data storage. This is a persistence layer. The browser may need to save all sorts of data locally, such as cookies. Browsers also support storage mechanisms such as localStorage, IndexedDB, WebSQL, and FileSystem.
What is the Internet?
The internet is basically a network composed of devices that exchange data (information) with one another.
Each of these machines on the internet is identified and identified by a unique number known as an IP Address. The following is an example of an IP Address: 168.212.226.204
What is the Web?
The Web is a subset of the Internet.
Like every other computer network out there, the Web is made up of two main components: the web browser client and the web server.
The client makes data requests, and the server delivers its information. The client and server form an agreement known as the Application Programming Interface (API) to support this interaction.
However, the data must be arranged and displayed in a way that end-users with diverse technical backgrounds can understand. This is where the development of websites, as well as HTML, CSS, JavaScript, and other related ideas, come in handy.
Understanding HTML: The Building Block of the Web
While developers often jest about HTML, acknowledging its power is essential. HTML, not being a programming language, possesses the remarkable ability to seamlessly integrate with browsers and render pixels. This is made possible through the Rendering Engine, which converts HTML code into a NodeList, often parsed in the form of C++.
How HTML Works:
HTML consists of a series of elements, which you use to enclose, wrap, or mark up different parts of content to make it appear or act in a certain way. These elements are made up of tags (an opening and a closing tag), an element may contain a data item a piece of text an image, or even nothing. A typical element includes an opening tag with some attribute, enclosed text content, and a closing tag. below is an image breakdown of an element.
The process of loading and displaying HTML involves several steps, Let's take a look at that...
Loading the File: The first step for any browser to work is to load the file. The job of a browser is to display the data and give the ability to interact with that data. When the Browser loads any file, It gets that as a raw byte code.
Character Encoding: After getting the Raw Bytes, the browser converts the byte code into Characters based on the specific character encoding (example: UTF-8). This process is called Character Encoding.
Tokenization: Next, like other programming languages, HTML creates tokens out of the Characters. It helps the web browser to understand and process the content effectively.
Object Creation: After the Tokenization it's required to put a structure around it. Here it creates Huge objects out of the tokens and stores a lot of information about these tokens.
Relation Establishment: Every token has its objects and they are scattered and very hard to manage. That's where the importance of building relationships was felt. Then Relationships between elements, such as parent-child or sibling connections, are established.
NodeList Creation: Now we know the relationship between the Objects, the next step is creating a Node/NodeList according to the relationship.
DOM Generation: Now, a DOM tree is generated, representing the structured hierarchy of web page elements.
CSS
When a browser receives an HTML file, it doesn't stop there.
If HTML represents the building blocks of a website, CSS is a way to shape and enhance those blocks.
CSS is a style sheet language used to specify the way different parts of a webpage appear to users. In other words, it’s a way to add some style and additional formatting to what you’ve already built with HTML.
Why do we need CSS?
The picture on the left-hand side is mixed with HTML and CSS, however, the picture on the right-hand side is only HTML. Look at the difference.
CSS brings style to your web pages by interacting with HTML elements using syntax. Elements are the individual HTML components of a web page.
CSS is a list of rules that can assign different properties to HTML tags, either specified to single tags, multiple tags, an entire document, or multiple documents. It exists because, as design elements like fonts and colors were developed, web designers had a lot of trouble adapting HTML to these new features.
In essence, CSS is fundamental for crafting engaging, user-friendly, and visually coherent websites.
JavaScript: The Key to Interactivity
JavaScript is the most complex of the three front-end languages discussed in this article, building on top of both HTML and CSS. If you’re trying to compare the languages, think of it like this: While HTML creates the basic structure for a website, CSS adds style to that structure, then JavaScript takes all of that work and makes it interactive and more functionally complex.
JavaScript is a scripting language used to create and control dynamic website content, i.e. anything that moves, refreshes, or otherwise changes on your screen without requiring you to manually reload a web page.
JavaScript is used to make the web look alive by adding motion to it. To be more precise, it’s a programming language that lets you implement complex and beautiful things/designs on web pages. When you notice a web page doing more than just sit there and gawk at you, you can bet that the web page is using JavaScript.
Feature of JavaScript:
Scripting language and not Java: In fact, JavaScript has nothing to do with Java. Then why is it called “Java” Script? When JavaScript was first released it was called Mocha, it was later renamed to LiveScript and then to JavaScript when Netscape (founded JavaScript) and Sun did a license agreement.
Object-based scripting language that supports polymorphism, encapsulation, and to some extent inheritance as well.
Interpreted language: It doesn’t have to be compiled like Java and C which require a compiler.
JavaScript runs in a browser: You can run it on Google Chrome, Internet Explorer, Safari, etc. JavaScript can execute not only in the browser but also on the server and any device that has a JavaScript Engine.
Conclusion:
Understanding the inner workings of browsers reveals the magic underlying every web page we interact with.