Browser engine explained

Browser engine explained

A web browser, as a standalone computer program, is usually consisted of 3 parts:

  • Rendering engine, AKA browser engine, AKA layout engine is responsible for parsing the HTML document into a DOM tree, render(paint) it into a viewable format to show to the user.
  • Javascript engine parses, executes, and controls the javascript code.
  • The browser process: manage browser tabs, network requests, configuration, extension, file IO, etc.

Why browser engine is often referred to rather than the standalone web browser program?

First, the browser engine and javascript engine are almost isolated from what they are responsible for.
Second, besides web browser, browser engine and javascript engine are embedded in various applications/frameworks such as email clients to display HTML email, electron, or nwjs frameworks to display the UI of desktop apps, react native for mobile apps, WebView in Android and iOS, etc.

List of web browsers and their browser engines.

Source https://en.wikipedia.org/wiki/Browser_engine

First of all, all browsers distributed in the iOS App Store must use WebCore from the WebKit engine. WebKit is a project maintained by Apple which includes WebCore as the rendering engine and JavascriptCore as the Javascript engine. WebKit is similar to Chromium, except that Chromium also includes related components such as the Chromium browser, Chromium OS, etc.

  • Firefox uses Gecko. Firefox had an experimental Servo (hence, the birth of the StackOverflow most loved Rust programming language) engine started from 2012 until 2020 before transferring it to the Linux Foundation. Portions of Servo were integrated into Gecko.
  • Konqueror (KDE default browser) uses KHTML.
  • Safari uses WebCore. WebCore is a fork of KHTML.
  • Chrome uses Blink, previously it used WebCore. Blink is a fork of WebCore.
  • Internet Explorer uses Trident.
  • Edge uses Blink, previously it used EdgeHTML. EdgeHTML is a successor of Trident.
  • Opera uses Blink, previously it used Presto. Presto is proprietary software (so, closed-source) of Opera Software. But its source code was leaked on Github on February 11, 2016.
  • Electron (previously named Atom Shell)  which powers many desktop applications like Atom, Visual Studio Code, ... uses Blink.
  • nwjs (previously named node-webkit), a desktop app framework, similar to Electron, uses Blink.

List of browsers and frameworks and their javascript engines.

First of all, all browsers distributed in the iOS App Store must use the JavscriptCore engine from the WebKit engine.

  • Firefox uses SpiderMonkey. The experimental Servo engine comes with mozjs. Mozjs is a folk of SpiderMonkey.
  • Chrome uses v8.
  • Konqueror uses KJS.
  • Safari uses JavascriptCore. JavascriptCore is a folk of KJS. In 2008, Apple introduced new javascript engines named SquirrelFish (marketed term Nitro), SquirrelFish Extreme (abbreviated SFX, market term Nitro Extreme). Eventually, they all refer to the same engine, named JavascriptCore. From WebKit document:
JavaScriptCore is often referred with different names, such as ​SquirrelFish and ​SquirrelFish Extreme. Within the context of Safari, Nitro and Nitro Extreme (the marketing terms from Apple) are also commonly used. However, the name of the project and the library is always JavaScriptCore.
  • Internet Explorer uses Chakra.
  • Edge uses v8, previously it used Chakra.
  • React Native uses JavascriptCore by default, v8 in some cases. Developers can opt-in to use Hermes.
  • Electron, and, nwjs, uses NodeJS (nodejs uses v8 internally).
  • Javagator (developed and stopped before release, by Netscape) uses Rhino. Rhino is a Javascript engine written in Java.

Other frameworks with their Javascript runtime.

What is a javascript runtime?

Above, I introduced javascript engines which are usually embedded in a browser or in a client application. And they, the javascript engines, are not available to be used as a standalone application. For example, to run a single javascript file. They need a wrapper, and the wrapper is called a Javascript runtime.

There are several javascript runtimes available.

Buy Me A Coffee