How Browser work

#introduction

The most frequently used software is web browsers. I'll describe how they operate in this introduction. Let's examine what happens when you enter www.google.com into your browser's URL bar and wait for the Google page to load.

The browsers we will talk about?

Today's leading desktop browsers include Chrome, Internet Explorer, Firefox, Safari, and Opera. The most popular mobile browsers include Chrome, Android Browser, iPhone, Opera Mini and Opera Mobile, UC Browser, the Nokia S40/S60 browsers, and Android Browser. All of these browsers, with the exception of Opera, are built on the WebKit framework. I'll use examples from Firefox, Chrome, and Safari (which is partially open source) all of which are free to use. Around 71% of all desktop browser usage worldwide, according to StatCounter figures (as of June 2013), is made up of Chrome, Firefox, and Safari. About 54% of mobile browsing is done on the Android, iPhone, and Chrome browsers.

The browser's main functionality

The primary purpose of a browser is to show the web resource you select by making a server request for it and doing so in the browser window. A PDF, image, or other sort of content may also be used as the resource, which is often an HTML document. A URI (Uniform Resource Identifier) is used by the user to specify the resource's location.

The HTML and CSS specifications govern how the browser interprets and publishes HTML files. The W3C (World Wide Web Consortium) organization, which is the web's standards body, maintains these specifications. For many years, browsers only adhered to certain requirements and created their own extensions. That gave web authors major compatibility problems. Today The primary purpose of a browser is to show the web resource you select by making a server request for it and doing so in the browser window. A PDF, image, or other sort of content may also be used as the resource, which is often an HTML document. A URI (Uniform Resource Identifier) is used by the user to specify the resource's location.

Browser user interfaces have a lot in common with each other. Among the common user interface elements are:

1. Address bar for inserting a URI
2. Back and forward buttons
3. Back and forward buttons
4. Bookmarking options
5. Refresh and stop buttons for refreshing or stopping the loading of current documents
6. Home button that takes you to your home page

Strangely enough, the browser's user interface is not specified in any formal specification, it just comes from good practices shaped over years of experience and by browsers imitating each other. The HTML5 specification doesn't define UI elements a browser must have, but lists some common elements. Among those are the address bar, status bar and tool bar. There are, of course, features unique to a specific browser like Firefox's downloads manager.

The browser's high level structure?#

The browser's main components are:

1. 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.
2. The browser engine: marshals actions between the UI and the rendering engine.
3. 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.
4. Networking: for network calls such as HTTP requests, using different implementations for different platform behind a platform-independent interface.
5. 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.
6. JavaScript interpreter. Used to parse and execute JavaScript code.
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.

It is important to note that browsers such as Chrome run multiple instances of the rendering engine: one for each tab. Each tab runs in a separate process.