What is a browser?

If you cannot answer the following questions this post is for you.

  • What does CSS stands for?
  • What is a rendering engine in the browser?
  • What all does the browser can do?
  • Why Javascript is there?

From wikipedia

“A web browser (commonly referred to as a browser) is a software application for accessing information on the World Wide Web. Each individual web page, image, and video is identified by a distinct URL, enabling browsers to retrieve and display them on the user’s device.”

In the above definition we have many terms which I would explain in detail in a little bit. Those who come from computer science background would understand most of it. For others its relatively difficult. I will also give some insights of how the browser works and displays you the content that you want, and sometimes doesn’t work the way you want and displays you something that you do not want.

First we will dig into the definition’s terms

1. Software application : People write programs in a programming language. A bunch of programs that together solve a bigger purpose becomes a software. A software that is installed on a computer is called an application. Hence basically browser is also just another application designed to run on computers or mobiles. The browsers now a days are very complex applications and are not just limited to display some text. There are several different components of a browser which work together to give you the best experience. When it all started the browser’s task was just to fetch the Html text and render it on the browser window. You would need to download any audio, video, pdfs etc linked on the page and then use your computer’s media player or pdf viewer to play/view the files. But now you don’t need to go out of the browser.

The browser has several core components

  • Rendering engine – Part of the browser that parses the html code and renders it on the display screen. Generally written in C++.
  • Javascript engine – The most popular scripting language of the web. All browsers now a days support js code to enable complex interactions for the user
  • CSS parser – Cascading Style Sheet is used to specify how the text in the browser would get displayed, its colors, font size, location on the page etc.
  • Audio/Video Player – Big browsers now are supplied with audio/video players which might be written in some other language or may be integrated as an extension to the browser.
  • PDF viewer – PDF is a file format which cannot be read by plain notepad style application. It needs specially designed application which can decode the pdf file and display you it as a complete book.
  • More… – There can be many more extentions to the browser which makes it a complete package.

2. World Wide Web : WWW is itself a very big topic to cover. But for starters we can say that there are big server computers which are always online and interconnected via the telecom network. These computers store a large amount of data. People like us access these servers using our internet connection and retrieve data from there to our computers. It applies to every website you access whether it is Facebook, Google, a news site or anything else. Anything that is not on your computer but you can see via a browser means are using www.

3. Web page : Though its a simple term and mostly everyone would already know what does it mean. But to re-iterate, a page is an area in the browser window which shows you the final render of whatever the programmer’s have written html code for. Previously we used to have only browser windows. Remember when we had 20 Internet explorer windows open and we tried to shuffle between them using Alt-tab and with each Alt-tab switch we just lose track of what was the previous window. Then there came the concept of tab which made our Alt-Tab again back to usable. So, the takeaway here is that instead of creating several Operating system dependent windows, the browsers made themselves capable of having their own windows and called them ‘Tabs’. Every tab now can work as independent page means more versatility within the browser.

4. URL : Uniform Resource Locator is again a topic that can take a week to understand and a lot of reading. For now you can think of it as a unique address for the big server computers that we connect to get the awesome content from anywhere on the internet. I will write another post to explain how these all are managed and how URL works and what happens at each step when you type in “www.facebook.com”. And believe me there are a million steps.

5. Browsers : Though I do not like the idea of having the term that we are defining in the definition. It renders the definition useless. Still; here they want to say that the browser fetches the data from internet somehow and then displays it on the user’s device which can be anything like a mobile or a laptop or even a kindle which has a browser with very less capabilities as compared to Chrome or Firefox.

After getting an Idea about the terms and components involved in a browser’s making, lets dive in to depth

A simple program written in any language to calculate tax from your salary and various components might be somewhere around half of a KB(Kilobyte) after compilation. The current version of chrome or Firefox is around 400MB(Megabyte) which is around 8 million times the size of your tax calculation’s program. And the browser’s code is also highly optimized and compressed. You can understand that the browser is not just a bunch of 100-200 programs written by some 10 developers which used to be the case when the browsers first came into existence, instead now browsers are a set of more than 1000’s of individual programs developed over a long period of time by 1000’s of developers and developed in such a way that they can interact between themselves perfectly.

The most important part of the browser is the rendering engine. The browser has a set of core programs which parse the Html code fetched from anywhere in the internet and creates a tree kind of data structure of nodes that the browser maintains internally. So whenever there is a change on the page, such as someone liking your post and the counter increases by 1, the browser reads the whole background structure, accesses that exact point where the likes are displayed, reads the current value and then updates the likes text to another number. You might also observed that sometimes the posts are not refreshed, likes are not updated or something like this on some other website that it seems, the web page has stopped updating, so then you press F5 to refresh the browser and then everything starts working again. This generally happens when the code running in the browser goes into error and thereby the browser is unable to parse and read the new updates automatically, but after a full refresh, the error goes away and it starts updating fine. Doing all this requires a lot of programs and the set of these programs are generally called browser rendering engine. There are many engines which have been developed over the last 2 decades but the most popular ones are Webkit(used in chrome and safari), Gecko(used in Firefox). You can take any one of them and start developing your own browser. Soon you would realize that what you are doing has already been done and people are already familiar with the browsers that they are using and so you should stop creating your own. But then the question comes why did chrome came into existence if Firefox and IE were already there. The answer lies in the fact that it gave the users something that the other browsers were not providing at that time plus the advertising and support that google empowered it with. For instance the chrome had every tab run in its own separate environment means when one of the tabs freezes, the others are still in operation and user can interact with them, but while in IE and Firefox if any tab gets frozen, the whole browser gets frozen. Though with the latest updated in previous months, Firefox has also implemented this and now multi-tabs are independent. Similarly if you need your own browser to rule the internet, come up with something that solves an existing problem and spend millions to advertise and support it, or wait to get acquired by some giant company. Or if you don’t have capacity to do all this, I would suggest to just learn how the engine works and probably write websites which utilize their power and create wonderful content which users like to interact with.

The second most important part of a browser is Javascript engine. I will be doing several posts about Javascript and its history but here I would explain its existence. As we now know that the browser has a rendering engine which maintains the background structure of all the text and images that you see on the page, there comes the need of a way to have the Html code writers to manipulate that background structure. Though the browser themselves are capable of doing that, but to expand this power to the Html content writers, a small scripting language was created by a developer at Netscape named Brendon. In simple terms, he was asked to create a scripting language for the Html content writers who were not programmers can easily learn and use to manipulate the background structure on the go without learning the browser’s rendering engine internals. So he created Livescript which was later renamed to Javascript to show its relation to Java which was getting popular at that time. There is nothing common between java and Javascript apart from some syntax and keywords which generally are common in all languages. Initially JS was used to create interaction on a web page such as on click of an arrow, the image changes and you can see the next on the sequence. That’s why you see code like this below.

// run the code which is written in myScript
<element onclick=”myScript”>

// change the url of the browser on click of some element which can be a text or an image
<element onclick=”function(){ window.location = ‘www.google.com’}”>

However, with time people started using JS to write complex interactions, such as moving an image, creating beautiful buttons etc., transforming images, resizing images and a lots of things were not possible by writing just plain Html.

As stated before, google used Webkit as a rendering engine, while created there own Javascript engine called V8 which promised a performance boost and proved it too. Similarly Firefox uses a different engine called Spidermonkey. You can also use the Js engine yourself; implement it the way you like it. Somebody took this advice seriously and extracted the engine just to work by itself creating another popular framework called Node.js which is highly popular to develop web applications worldwide. Now a days JS has become a full fledged programming language with its various nuances that makes every developer to scratch his head while writing JS programs. I would be writing about all these in later posts.

The third pillar of a browser is CSS parser. CSS stands for Cascading Style Sheet. You understand these terms only when you become an experienced developer. Till then forget the terms and try to understand where does CSS fits in the browser. As mentioned before, browser reads the Html code and renders it on the desktop screen. In that same Html code you can also write the description of the colors, fonts, sizes etc that you want the browser to render each text. For e.g. render the footer text in red color, while all other text in black. The browser somehow must know that this description is not the part of Html and should be treated as decoration information. So what you do is write this code somewhere inside the Html file in a special tag which is already agreed upon by the browsers’ developers. Soon with large websites such as facebook or bbc, you would be writing too much of this kind of information, that your Html content would start growing to be 1000 lines of code. To rescue yourself from this situation browser developers said that you can write this look and feel information in a separate file and just link it to the Html content. They used to call it stylesheet as it tells the browser to style the page. They will download it for you and parse it separately and then apply it to the Html content. Hence the famous <link> tag we see in the html pages. They also told us to write that info in a certain format which they would understand. The format was designed in a way that you can write your colors and sizes using special syntax in hierarchical manner. That’s why it is called cascading stylesheet. After reading the above text you must have an idea what basically CSS does.

With all this knowledge you need to do a lot of hands-on to properly understand how Browsers work. I will be posting a lot of articles on this which would help you gain insight into the browser’s world.

 

2 Comments

  1. Sean says:

    I dont think this details in depth for any topics you mentioned.

    1. Amit Upadhyay says:

      Yes, you are right. For experienced people this is a kind of general overview and not in-depth discussion. This post is just a starting point for beginners. Will soon write several new posts for every web-related technologies. Thanks for your convern.

Leave a Reply

Your email address will not be published. Required fields are marked *