Web browsers are our digital passports to the vast universe of the internet. Their simplicity is deceptive: beneath their user-friendly interfaces lies a world of intricate processes that transform clicks into the web pages we interact with every day. In this edition of ‘Building Blocks’, let’s unravel the inner workings of web browsers, shedding light on the mechanisms that power our online experiences.
What are web browsers?
Fundamentally, the browser is an application that people use to send and receive messages via the internet. In other words, the browser is a program that runs on your device, with its purpose being to fetch information in different formats from the internet and show it on the device.
It also does the reverse, receiving your input (say, a click), translating it to code, and transmitting it to some other machine across the internet.
How were browsers born?
Let’s take a step back in time. In the early 1990s, the internet was a fledgling entity, largely text-based and navigated through little pieces of code typed out and transmitted to machines somewhere else, waiting for them to respond.
Then, in 1990, the English computer scientist Tim Berners-Lee introduced the concept of the World Wide Web, and with it came the first web browser, also named ‘WorldWideWeb’. It didn’t just display web pages; it also allowed users to edit them.
The next watershed moment was the debut of the Mosaic browser in 1993. Developed by a team at the U.S. National Center for Supercomputing Applications, it introduced the concept of displaying images alongside text, revolutionising the way we interacted with the web. This is when the internet became visually engaging.
Netscape Navigator burst onto the scene a year later and rapidly became the most popular browser of its time. It brought feature innovations like bookmarks and a user-friendly URL bar, simplifying navigation and making the web more accessible.
Then, the late 1990s witnessed a fierce battle among browser developers – a period dubbed the ‘Browser Wars’. Microsoft’s Internet Explorer (IE) and Netscape Navigator were the primary contenders. This competition spurred rapid innovation, with each browser striving to outperform the other in terms of speed, features, and compatibility.
By 2000, IE had emerged as the dominant browser, due in large part to its integration with the Windows operating system. But this period of monopoly also caused development and innovation to stagnate.
This monotony was broken in 2004 or 2005, in the next turning point in the history of browsers: the emergence of Mozilla Firefox. Developed by a community of volunteers and based on open-source principles, Firefox introduced ground-breaking new features like tabbed browsing and pop-up blocking, and also allowed users to ‘extend’ their personal browsers with add-ons.
Firefox’s arrival reinvigorated competition and set new standards for user-friendly browsing.
In 2008, Google launched Chrome, which swiftly gained in popularity for its speed and minimalist design. Like browsers past, Chrome’s success also revitalised the browser market and encouraged innovation across the board.
Other browsers, like Mozilla Firefox, Apple’s Safari, and Microsoft Edge (as a successor to Internet Explorer) also evolved, providing users with a range of choices tailored to their preferences.
What’s inside a browser?
Modern web browsers have multiple core components, each of which is a complex technology in itself. They also rely on several others, plus standards that say how the internet should work.
1. Request and response – When you enter a website’s address (in the form of the Uniform Resource Locator, or URL) into your browser’s address bar or when you click a link, you set in motion a sequence of digital communication. The browser sends a request to a server, asking for the contents of the specific web page you’re interested in.
This request travels through a network of servers, like dispatching a letter through a series of post offices. Upon reaching the server, the request is received and processed. The server then formulates a response containing the information (or data) required to construct the web page. This response embarks on its journey back to your browser, carrying the digital blueprint for the page you requested.
2. Deconstructing the response – The response from the server is not a singular entity. Instead, it is an amalgam of various files. Typically, these files have information encoded in three languages: HTML, CSS, and JavaScript. Each set of information plays a pivotal role in shaping the final presentation of the web page.
HTML, short for Hypertext Markup Language, provides the architectural blueprint of a webpage. Similar to the skeletal framework of a building, made with iron bars, bricks, and cement, HTML defines the structure of the page, outlining elements like headings, paragraphs, images, and links. As the cornerstone of web content, HTML is the foundation on which browsers construct the visual layout.
Imagine CSS, or Cascading Style Sheets, to be the interior designer of the digital world. This information imparts style and aesthetics to the HTML structure by controlling attributes like colour schemes, fonts, spacing, and positioning. CSS ensures that the webpage comes into its unique visual identity.
JavaScript is the dynamic engine, making web pages interactive and responsive. Analogous to the electrical system in a building, JavaScript breathes life into static content. It allows interactive elements like pop-ups, forms, animations, and real-time updates, creating an engaging user experience. It also allows the browser to run some scripts and perform simple tasks on a page instead of waiting to receive instructions from a distant server.
3. Rendering – With HTML, CSS, and JavaScript in hand, a browser begins the process of rendering. This involves deciphering the HTML to understand the structural arrangement, applying CSS for stylistic finesse, and executing JavaScript to infuse interactivity. (You can deconstruct the final result on a webpage by right-clicking on the page and selecting ‘Inspect’.)
This process is remarkably swift, assembling the final webpage and presenting it to the user in a cohesive and visually appealing manner in much less than a second, depending on the amount of data. Rendering engines are in themselves a key piece of technology that enable screens to display graphics.
4. Managing data – Browsers serve as adept custodians of your digital footprint, so they also implement instruments like cookies and cache to enhance your online experience.
Cookies are small snippets of data stored on your computer by websites you visit. Think of them as digital post-it notes. They retain information such as login status, site preferences, and shopping cart contents. This allows you to navigate seamlessly, without having to re-login to a site when you close and reopen it in a short span of time.
Comparable to short-term memory, the cache is a repository of frequently accessed files. When you revisit a webpage, the browser checks its cache to see if it already has a copy of the required files. If so, it retrieves them from the cache rather than re-downloading them from the server. This accelerates page loading times and conserves bandwidth.
5. Security – Web browsers are also sentinels that guard your digital sanctuary. They use an array of security measures to protect your data as they fly between your computer to various servers, via the internet, and even when they’re stored on your computer itself. They do this by using encryption protocols, such as HTTPS, to create secure ‘tunnels’ for data exchange shielding the information from prying eyes. Browsers also use warning systems to alert you about potentially malicious websites, preventing inadvertent exposure to threats.
What next for browsing?
As technology hurtles forward, web browsers evolve in tandem. They are embracing cutting-edge technologies like WebAssembly, a format that enables near-native performance within the browser environment. Support for virtual reality (VR) and augmented reality (AR) experiences is also on the horizon, promising immersive online interactions. Additionally, privacy features are being bolstered, providing users with greater control over their digital footprint.
In sum, web browsers are the unsung heroes of our digital endeavours, translating code into the dynamic web pages that form the backbone of our online experiences. By unravelling the intricate tapestry of processes that underlie their operation, we gain a newfound appreciation for the seamless magic they conjure with every click.
The next time you open your browser, remember that behind the scenes, a symphony of digital choreography is unfolding to bring you the online world to your fingertips. Happy browsing!
Varun Vohra is a co-founder of Vaaree.com, a curated marketplace for home products, and a developer and tech-entrepreneur with 14 years of experience.
