What is a browser?
Published: 2023-01-18 04:55:09

## What is a web Browser

In most devices you have, be it a phone (android or mac), a tablet or a laptop, you will find a web browser installed. A web browser is a `software` we use to browse the internet. There are 5 major browsers: `Chrome, Internet Explorer, Firefox, Safari` and `Opera`. (maybe 4, excluding IE).

The browser’s main functionality is to fetch and display resources we request from the internet like Facebook or youtube. Resources can also be a simple image, pdf file or even a JSON file. 

Each browser has a few main components common to each other:

### 1) User Interface

- This are GUI (`Graphical User Interface`) users interact with. Stuff like the address bar, back/forward buttons, bookmarking menu etc..

### 2) Browser Engine

- Think of this as the `controller.` It comprises of a few other engines (`rendering engine` & `javascript engine`) to render and style the webpage you see upon receiving the response of your request

### 3) Rendering engine

- Responsible for the layout of the webpage. If the requested content was a `HTML` & `CSS` file, the `rendering engine` would know to parse the response with `HTML` & `CSS` and displays the result to the user. This is where the DOM (`document object model`) is constructed & styling is made.

### 4) Javascript Engine

- Most response comes with some `javascript` code to create dynamic components or to fetch additional content from the web. The `javasript engine` is responsible for interpreting  and executing the javascript code. The primary difference between a Rendering engine and a JavaScript engine lies around the dependency with browser. The rendering engine is tightly coupled with browser engine, on the other hand, a JavaScript engine can be worked upon even without a browser.

### 5) Networking

- The networking component is responsible for making `HTTP` requests. Read more here [**https://hpbn.co/primer-on-browser-networking/**](https://hpbn.co/primer-on-browser-networking/)

### 6) **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.

### 7) 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

## The Rendering Engine

The rendering engine’s main purpose is to render (parse & display) the requested & received content to the user on the browser.

Different browsers use different rendering engines: Internet Explorer uses Trident, Firefox uses Gecko, Safari uses WebKit. Chrome and Opera (from version 15) use Blink, a fork of WebKit.

WebKit is an open source rendering engine which started as an engine for the Linux platform and was modified by Apple to support Mac and Windows. See [webkit.org](http://webkit.org/) for more details.

The rendering engine will start getting the contents of the requested document from the networking layer. This will usually be done in 8kB chunks.

After that, this is the basic flow of the rendering engine:

1) Parsing HTML to construct DOM tree

2) Render tree construction

3) Layout of the render tree

4) Painting the render tree