Browser engine


A browser engine is a core software component of every major web browser. The primary job of a browser engine is to transform HTML documents and other resources of a web page into an interactive visual representation on a user's device.

Name and scope

A browser engine is not a stand-alone computer program but a critical piece of a larger program, such as a web browser, from which the term is derived.
Besides "browser engine", two other terms are in common use regarding related concepts: "layout engine" and "rendering engine". In theory, layout and could be handled by separate engines. In practice, however, they are tightly coupled and rarely considered separately.
In addition to layout and rendering, a browser engine enforces the security policy between documents, handles navigation through hyperlinks and data submitted through forms, and implements the Document Object Model data structure exposed to page scripts.
Executing JavaScript code is a separate matter, however, as every major web browser uses a dedicated engine for this. The JS language was originally created for use in browsers, but it is now used elsewhere too, so the implementation of JS engines is decoupled from browser engines. In a web browser, the two engines work in concert via the shared DOM data structure.
Browser engines are used in other types of programs besides web browsers. Email clients need them to display HTML email. The Electron framework, which is powered by the two engines of the Google Chrome browser, has been used to create many applications.

Layout and rendering

The layout of a web page is typically specified by Cascading Style Sheets. Each style sheet is a series of rules which the browser engine interprets. For example, some rules specify typography details, such as font, color, and text size. The engine combines all relevant CSS rules to calculate precise graphical coordinates for the visual representation it will paint on the screen.
Some engines may begin rendering before all of a page's resources are downloaded. This can result in visual changes as more data is received, such as images being gradually filled in or a flash of unstyled content.

Notable engines

Because the Web platform is a set of open standards, there are multiple browser engine implementations.
Gecko is Mozilla's browser engine, used in its Firefox web browser, the Thunderbird email client, and the SeaMonkey internet suite. Goanna is a fork of Gecko used in the Pale Moon browser.
Apple created the WebKit engine for its Safari browser by forking the KHTML engine of the KDE project.
Google originally used WebKit for its Chrome browser but eventually forked it to create the Blink engine. All Chromium-based browsers use Blink, as do applications built with CEF, Electron, or any other framework that embeds Chromium.
Although Apple permits third-party browsers as alternatives to Safari on iOS devices, all browsers distributed through its App Store must use WebKit as their engine. For example, Opera Mini for iOS uses WebKit, whereas all other Opera variants use Blink.
Microsoft maintains its own proprietary EdgeHTML engine, which is the successor of its Trident engine. However, EdgeHTML is now only used for Universal Windows Platform apps, as the Edge browser has been remade with the Blink engine.

Timeline


  1. header
ImageSize = width:700 height:200
PlotArea = left:50 right:5 bottom:20 top:5
AlignBars = justify
DateFormat = dd/mm/yyyy
Period = from:01/01/1997 till:01/05/2020
TimeAxis = orientation:horizontal format:yyyy
Colors =
id:microsoft value:rgb
id:gecko value:rgb
id:goanna value:rgb
id:khtml value:rgb
id:webkit value:rgb
id:blink value:rgb
id:presto value:rgb
id:mgray value:rgb
id:lgray value:rgb
ScaleMajor = gridcolor:mgray unit:year increment:1 start:01/01/1997
ScaleMinor = unit:month increment:3 start:01/01/1997
BackgroundColors = bars:lgray
BarData =
bar:Trident text:Trident
bar:EdgeHTML text:Edge
bar:Gecko text:Gecko
bar:Goanna text:Goanna
bar:KHTML text:KHTML
bar:WebKit text:WebKit
bar:Blink text:Blink
bar:Presto text:Presto
PlotData=
align:center textcolor:black fontsize:8 mark: width:15 shift:
bar:Trident
from: 01/10/1997 till: 15/07/2015 color:microsoft mark:
bar:EdgeHTML
from: 12/11/2014 till: 01/05/2020 color:microsoft mark:
bar:Gecko
from: 01/05/1997 till: 01/05/2020 color:gecko mark:
bar:Goanna
from: 26/01/2016 till: 01/05/2020 color:goanna mark:
bar:KHTML
from: 04/11/1998 till: 06/06/2014 color:khtml mark:
bar:WebKit
from: 25/06/2001 till: 01/05/2020 color:webkit mark:
bar:Blink
from: 03/04/2013 till: 01/05/2020 color:blink mark:
bar:Presto
from: 28/01/2003 till: 16/03/2015 color:presto mark: