How do Web Browsers work? Do we need the only Web Browser to access the Internet?

Web browsers have become an integral part of our daily lives, allowing us to access information, connect with others, and explore the vast realm of the internet.

A web browser or frequently called a browser is an application software that is installed on a computer to provide access to the World Wide Web. All you have to do is simply type the URL (Uniform Resource Locator) of a webpage in the address bar and the browser will bring the web page on your screen. But, do you ever think that - how does it work on the web platform?

In this article, we will demystify the inner workings of web browsers and shed light on the fundamental processes that enable them to function.

What is Web Browser?

The browser’s main functionality is to fetch the files from the server and to display them on the screen. It basically displays HTML files containing images, PDF, videos, flashes, etc in an ordered layout. A browser is a group of structured codes that perform plenty of tasks to display a webpage on the screen. These codes are separated into different components according to their tasks performed.

Browsers are existing in the computers since the early spread up of the internet. The first ever browser was named ‘World Wide Web’ created by Tim Berners-Lee on a Next computer in December 1990. It was presented to the number of people at CERN (European Organization for Nuclear Research) in March 1991.

Structure of a Browser

Primary components of a browser are:

• Networking - Performs implements of HTTP request and response.
• User Interface - This consists of a forward and back button, bookmarks, address bar etc. along with the window that displays the requested page.
• User Interface backend - It can be used for painting basic images like windows or combo box. The backend exposes only a generic platform independent interface. Beneath it, user interface methods are used by the operating system.
• Browser engine - It commands action between the rendering engine and the user interface.
• Rendering engine - The main function of the rendering engine is to display the content that is requested. For example, if an HTML content is requested, the engine parses CSS and HTML and when the content is parsed, it is displayed on the screen.
• JS Interpreter - JavaScript and all other types of scripting are parsed and executed by the inbuilt interpreter.
• Data Storage - All types of data, like cookies, are saved locally by the browser. Storage mechanisms like WebSQL, FileSystem, localStorage are also supported by the browser.

Some Important Terms

Internet connection

Allows you to send and receive data on the web.

TCP/IP

Transmission Control Protocol and Internet Protocol are communication protocols that define how data should travel across the web.

DNS

Domain Name Servers are like an address book for websites. When you type a web address in your browser, the browser looks at the DNS to find the website's real address before it can retrieve the website. The browser needs to find out which server the website lives on, so it can send HTTP messages to the right place.

HTTP

Hypertext Transfer Protocol is an application protocol that defines a language for clients and servers to speak to each other.

Component files

A website is made up of many different files. These files come in two main types:

• Code files - Websites are built primarily from HTML, CSS, and JavaScript, though you'll meet other technologies a bit later.
• Assets - This is a collective name for all the other stuff that makes up a website, such as images, music, video, Word documents, and PDFs.

Rendering

The entire process followed by a browser from fetching the webpage to displaying it on the screen is called Rendering.

What happens exactly under the hood?

1. User Interface and Rendering Engine:

The user interface is the visible part of the web browser that allows users to interact with websites and navigate the internet. It includes elements like the address bar, back/forward buttons, bookmarks, and tabs. At the core of the browser is the rendering engine, responsible for interpreting and rendering web content. The most widely used rendering engines include Blink (used by Chrome and Opera), Gecko (used by Firefox), and WebKit (used by Safari).

2. Requesting and Retrieving Web Pages:

When you enter a URL or click on a link, the browser initiates a request to the web server hosting the desired web page. This request follows the Hypertext Transfer Protocol (HTTP) or its secure variant, HTTPS. The browser sends a request message containing the URL, and the server responds with the requested web page's data.

3. HTML Parsing and Document Object Model (DOM):

Once the browser receives the web page's data, it goes through a process called HTML parsing. The parsing engine breaks down the HTML markup into a structured representation known as the Document Object Model (DOM). The DOM creates a hierarchical structure of elements, such as headings, paragraphs, images, and links, which the browser can understand and manipulate.

4. CSS Parsing and Rendering:

After parsing the HTML, the browser proceeds to parse the accompanying Cascading Style Sheets (CSS). CSS defines the visual appearance and layout of the web page, including elements such as fonts, colors, spacing, and positioning. The rendering engine applies the CSS rules to the corresponding HTML elements, determining how they should be displayed on the screen.

5. Rendering and Layout:

With the HTML and CSS parsed, the rendering engine performs layout calculations to determine the size and position of each element on the web page. It calculates the flow of content, considering factors such as text wrapping, alignment, and responsive design. The rendering engine then renders the web page by painting each element on the screen.

6. JavaScript Execution:

Web browsers also support client-side scripting through JavaScript. When encountering JavaScript code embedded in the web page or linked externally, the browser's JavaScript engine interprets and executes the code. JavaScript enables dynamic and interactive functionality on the web page, allowing for actions such as form validation, animations, and AJAX requests.

7. Networking and Resource Loading:

Web pages often include additional resources, such as images, stylesheets, scripts, and multimedia files. The browser's networking component handles the retrieval of these resources by sending separate requests to the server and receiving the corresponding responses. These resources are then integrated into the web page, enhancing its visual and interactive elements.

8. Caching and Performance Optimization:

To improve performance and reduce network traffic, web browsers employ caching mechanisms. They store copies of web page resources locally, allowing subsequent visits to the same page to load faster by retrieving the resources from the cache instead of the server. Additionally, modern browsers utilize techniques like prefetching, compression, and minification to optimize performance further.

List of Popular web Browsers

Do you need a browser to access the Internet?

With your web browser out of action or otherwise unusable, you might have feared an end to your web usage. But in truth, the World Wide Web is only one aspect of the internet, and you don’t even need a browser to get online. Sure, it makes it easier to engage with social networks and online stores, but these aside, other tools can overcome the lack of a browser, even if it’s just to download the files to install a new one.

Although it is much more difficult and cumbersome, it is still possible to connect to certain sections of websites without using a browser.

Using FTP

File Transfer Protocol is not used much by average users today, but it was very common in the age before the Web. You can connect to a server, look around in its file system, and download any files you might want. The Mozilla FTP server may not be accessible, Most operating systems come with a command line FTP tool, but you can also just type an ftp:// address into your file manager's address bar.

Checking email with a Mailbox

Install a mailbox program. If you have a stable Internet connection and a working email account, you can use a third-party mailbox program to access your email without using a browser. Any email account should do Microsoft, Google, Yahoo! – anything that would access through a browser.

File downloading

Use an instant-messaging service. Like text messages but they don't cost money. It's also possible to send files over instant messaging, though you still need to know who to contact. If you use Linux, then you might have an IM client like Pidgin or Thunderbird already installed. On Windows, you're probably out of luck.

Use BitTorrent to download files. BitTorrent is a peer-to-peer file-sharing program. Instead of a way of communicating with a central server, BitTorrent reaches out to your peers (people just like you!). It's a great way to download files quickly. Although it has earned its reputation as a piracy tool, there are many files that can be legally torrented, including some browsers. You'll need to find it first, though - which might be hard without a browser.

Try using Telnet to download files. Despite its name, telnet has nothing to do with telephone lines. It's just a simple, two-way text communications protocol, mostly used for command-line applications. While it's technically possible to download stuff over telnet, it's not common to actually do this.

The Network News Transfer Protocol (NNTP) is an application protocol that moves Usenet news articles-net news-between news servers. People also use it to read and post articles by end user client applications.

Use non-browser tools to download files and access limited sites. There are many non-browser tools that use the Web. Some file explorers will download files if given a Web address.

Conclusion:

Web browsers are sophisticated software applications that combine multiple components and processes to enable seamless web browsing. From rendering HTML and CSS to executing JavaScript and handling network requests, browsers work diligently behind the scenes to deliver the web content we interact with daily.

Understanding the inner workings of web browsers provides valuable insights into the technology that powers our online experiences and helps us appreciate the complexity and ingenuity involved in their design and development.