Welcome to my blog about the structure of web browsers! Whether you're a web design veteran or just starting out, the structure of web browsers can be a tricky subject to wrap your head around. But don't worry – I'm here to make it fun and easy for you! Follow me for more blogs and I'll help you understand the essentials of web browser structure, like how different browsers communicate with websites and how they interact with the user. So grab your favorite beverage, get comfy, and let's get started on this journey into the world of web browsers!

The structure and components of a web browser

User Interface

The user interface includes the address bar, buttons (e.g., Back, Forward, Refresh), menus, etc.

It includes every visible part of the web browser except the area in which the web page is displayed.

Browser Engine

Provides a high-level interface for querying and manipulating the rendering engine.

Acts as a middleman between the user interface and the rendering engine.

Communicates with the data storage component.

Rendering Engine

A core component of web browsers.

Its function is to create a visual representation of web content (e.g, a HTML or XML document) to be displayed on an output device.

The rendering of content happens according to the formatting rules specified.

Networking Component

The networking component is responsible for handling network communication, including:

• HTTP requests
• WebSocket API
• WebRTC

It provides a platform-independent interface, behind which platform specific APIs are used.

Further information:

• WebSockets: https://websockets.spec.whatwg.org/
• WebRTC
  • https://webrtc.org/
  • WebRTC 1.0: Real-time Communication Between Browsers (W3C Recommendation, 26 January 2021) https://www.w3.org/TR/webrtc/

JavaScript Engine

The JavaScript engine is responsible for executing JavaScript code.

Major JavaScript engines:

• SpiderMonkey (written in: C/C++; license: Mozilla Public License 2.0) https://spidermonkey.dev/
  • The JavaScript engine of the Mozilla Project.
• V8 (written in: C++; license: New BSD License) https://v8.dev/ https://chromium.googlesource.com/v8/v8.git
  • The JavaScript engine of Chromium.
• JavaScriptCore (written in: C++; license: LGPLv2)
  • https://developer.apple.com/documentation/javascriptcore
  • https://trac.webkit.org/wiki/JavaScriptCore

UI Back-end

The UI back-end is responsible for drawing in the web browser.

It is used both for displaying user interface elements and the web page.

It provides a platform-independent interface, behind which platform specific APIs are used.

Data storage

Data storage is responsible for persisting data locally, it is used for:

• HTTP cookies
• HTTP caching
• Indexed Database API (IndexedDB)
• Web Storage API

Further information:

• HTTP cookies:

  • Adam Barth, HTTP State Management Mechanism, RFC 6265, April 2011. https://www.rfc-editor.org/rfc/rfc6265
• HTTP caching:
  • Roy T. Fielding (ed.), Mark Nottingham (ed.), Julian F. Reschke (ed.), HTTP Caching, RFC 9111, June 2022. https://www.rfc-editor.org/rfc/rfc9111
• Indexed Database API (IndexedDB):
  • Indexed Database API 3.0 (W3C Working Draft, 15 September 2022) https://www.w3.org/TR/IndexedDB/
• Web Storage API:
  • HTML Living Standard – Web storage https://html.spec.whatwg.org/#webstorage

Major Rendering Engines

• WebKit
• Blink
• Gecko

WebKit

Website: https://webkit.org/

• Developer: Apple
• License: LGPLv2/Simplified BSD License
• Written in: C++
• WebKit-based software:
  • Safari https://www.apple.com/safari/
  • Google Chrome for iOS https://www.google.com/chrome/
  • Firefox for iOS https://www.mozilla.org/firefox/browsers/mobile/
  • GNOME Web https://wiki.gnome.org/Apps/Web

Blink

Website: https://www.chromium.org/blink/

• Developer: Chromium Project (Google)
• License: Simplified BSD License/New BSD License/LGPLv2.1
• Written in: C++
• Originally, Blink was born as a fork of the WebCore component of WebKit.
• Blink-based software:
  • Chromium https://www.chromium.org/Home
  • Google Chrome, Google Chrome for Android https://www.google.com/chrome/
  • Chromium-based Microsoft Edge https://www.microsoft.com/edge
  • Opera https://www.opera.com/
  • Vivaldi https://vivaldi.com/

Gecko

Website: https://wiki.mozilla.org/Gecko:Home_Page

• Developer: Mozilla Project
• License: Mozilla Public License 2.0
• Written in: C, C++, JavaScript, Rust
• Gecko-based software:
  • Firefox https://www.mozilla.org/firefox/
  • Firefox for Android https://www.mozilla.org/firefox/browsers/mobile/
  • SeaMonkey https://www.seamonkey-project.org/

Major Desktop Browsers

• Chromium, Google Chrome
• Firefox
• Opera
• Safari
• Microsoft Edge

Chromium

Website: https://www.chromium.org/Home/

• Developer: Chromium Project (Google)
• License: New BSD License
  • See: https://chromium.googlesource.com/chromium/src/+/masterLICENSE
• Written in: C, C++, JavaScript
• Platform: Linux, macOS, Windows
• Rendering engine: Blink
• JavaScript engine: V8
• Technical information: chrome://system

Google Chrome

Website: https://www.google.com/chrome/

• Developer: Google
• License: proprietary (see: chrome://terms)
• Written in: C, C++, JavaScript
• Platform: Linux, macOS, Windows
• Rendering engine: Blink
• JavaScript engine: V8
• Technical information: chrome://system
• Developer edition: https://www.google.com/intl/en/chrome/dev/

NOTE: Google Chrome is based on Chromium.

Chromium and Google Chrome

Differences between the two browsers:

• Different logos.
• They are equipped with a different set of audio and video codecs.
• User data are stored in different directories.
• Chromium: ~/.cache/chromium, ~/.config/chromium
• Google Chrome: ~/.cache/google-chrome, ~/.config/google-chrome
• Operating system distributions may modify the source code of Chromium, packaging also depends on the distribution.
• See: The Difference between Google Chrome and Chromiumon Linux
  • https://chromium.googlesource.com/chromium/src/+/master/docs/chromium_browser_vs_google_chrome.md

Firefox

Website: https://www.mozilla.org/firefox/

• Developer: Mozilla Project
• License: Mozilla Public License 2.0 (see: about:license)
• Written in: C, C++, JavaScript, Rust
• Platform: Linux, macOS, Windows
• Rendering engine: Gecko
• JavaScript engine: SpiderMonkey
• Technical information: about:support
• Developer edition: Firefox Developer Edition
  • https://www.mozilla.org/firefox/developer/

Opera

Website: https://www.opera.com/

• Developer: Opera Software
• License: proprietary
  • See: https://www.opera.com/eula/computers
• Written in: C++
• Platform: Linux, macOS, Windows
• Rendering engine: Blink
• JavaScript engine: V8
• Technical information: opera://system
• Developer edition: Opera developer
  • opera.com/computer/beta

Safari

Website: https://www.apple.com/safari/

• Developer: Apple
• License: proprietary
• Written in: C++, Objective-C
• Platform: macOS
• Rendering engine: WebKit
• JavaScript engine: JavaScriptCore
• Developer edition: Safari Technology Preview
  • https://developer.apple.com/safari/technology-preview/

Microsoft Edge

Website: https://www.microsoft.com/edge

• Developer: Microsoft
• License: proprietary (see: edge://terms)
• Platform: Linux (2020–), macOS (2019–), Windows
• Rendering engine: EdgeHTML (–2019), Blink (2019–)
• JavaScript engine: Chakra (–2019), V8 (2019–)
• Chromium-based Edge:
  • Announcement:
    • Joe Belfiore. Introducing Microsoft Edge Beta: Be one of the first to try it now. August 20, 2019. https://blogs.windows.com/windowsexperience/2019/08/20/introducing-microsoft-edge-beta-be-one-of-the-first-to-try-it-now/
  • Written in: C, C++, JavaScript

Browser Add-ons

A browser add-on is a software module for customizing the appearance or behavior of a web browser.

• Types of add-ons: extensions, language packs, themes, plugins

Browser Extensions

A browser extension is a browser add-on that alters the behavior of a web browser, i.e., adds new functionality or modifies existing functionality.

Headless Browsers

A headless browser is a web browser without a graphical user interface.

• It can be controlled programmatically.

Possible applications:

• Automated testing of web applications
• Automating interaction with web pages
• Taking screenshots of web pages
• Web scraping

See: https://en.wikipedia.org/wiki/Headless_browser

The Chromium, Google Chrome, and Firefox browsers can run in headless mode.

• Chromium, Google Chrome:
  • See:
    • Eric Bidelman. Getting Started with Headless Chrome. April 2017. https://developers.google.com/web/updates/2017/04/headless-chrome
    • https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md
• Firefox:
  • See: Using Headless Mode in Firefox https://hacks.mozilla.org/2017/12/using-headless-mode-in-firefox/

Taking a screenshot with Google Chrome (output is written to the file screenshot.png):

google-chrome --headless --screenshot \
--window-size=1920,1080 https://www.w3.org/

Free and open source headless browsers:

• HtmlUnit (written in: Java; license: Apache License 2.0) https://htmlunit.sourceforge.io/ https://github.com/HtmlUnit/htmlunit
  • Provides a way to simulate a browser for testing purposes and is intended to be used within another testing framework such as JUnit.
• Puppeteer (written in: JavaScript; license: Apache License 2.0) https://pptr.dev/ https://github.com/puppeteer/puppeteer
  • Headless Chrome Node.js API.

See: HeadlessBrowsers https://github.com/dhamaniasad/HeadlessBrowsers

The about URI Scheme

The about URI scheme is widely used by Web browsers to designate access to their internal resources, such as settings, application information, or hidden built-in functionality (e.g., Easter eggs).

• See: S. Moonesamy (ed.), The "about" URI Scheme, RFC 6694, August 2012. https://www.rfc-editor.org/rfc/rfc6694

Example:

• The about:blank URI references a blank page.

Some browsers map about URIs to their own equivalents replacing the scheme name (i.e., about) with their name (such as chrome, opera, or edge).

• For example, Chromium and Google Chrome uses the URI chrome://about instead of about:about.
• An exception is about:blank, that is left unchanged.

Browser support:

Chromium, Google Chrome:

• about is mapped to chrome://.
• The list of Chrome URIs: chrome://about
  • Examples: chrome://bookmarks, chrome://dino, chrome://history, ...

Firefox:

• The list of about URIs: about:about
  • Examples: about:cache, about:downloads, about:mozilla, ...

Opera: Supports a subset of chrome URIs and a few additional ones, but the scheme name is replaced with opera.

Safari: Only about:blank is recognized.

Chromium-based Edge:

• about is mapped to edge://.
• The list of Edge URIs: edge://about
  • Examples: edge://downloads, edge://flags, edge://history/all, edge://history/today, edge://history/yesterday, ...

Conclusion

Well there you have it, the structure of web browsers is a complex but fascinating topic. Now that you know a bit more about the inner workings of browsers, why not follow me for more laughs and laughs about web browsers? That way, you'll be in the know about all the latest developments and news in the world of web browsers. See you next time!