Software:Browser engine

Short description: Core software component of every major web browser

A browser engine (also known as a layout engine or rendering 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 rather a critical piece of a larger program, such as a web browser, from which the term is derived. The word "engine" is an analogy to the engine of a car.

Besides "browser engine", two other terms are in everyday use regarding related concepts: "layout engine" and "rendering engine". In theory, layout and rendering (or "painting") could be handled by different engines. In practice, however, a given browser engine's rendering and layout components are tightly coupled and rarely encountered on their own outside the browser engine, unlike the case with browsers' scripting engines.

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 (DOM) exposed to scripts associated with the document.

Every significant web browser supports JavaScript (JS) to enable a wide range of interactive behavior specified by the publisher, however, JS support is treated as a separate concern. Although JS was initially created as a simple language for use on web pages, it is a general-purpose programming language, and most development teams working on browser engines decouple development of the browser engine from the development of the JavaScript engine that enables the browser to provide support for the language. Browsers have sophisticated methods of coordinating their engines.

Browser engines are used in other types of programs besides web browsers. For example, an email client might rely on a browser engine for displaying HTML email. The Electron framework, powered by Blink and V8 from Google's Chromium project, enables software developers to use technologies first created for the web platform—such as HTML, CSS, JavaScript, and the DOM—to create graphical desktop applications. Programmer familiarity with browser-based development has resulted in Electron and other cross-platform, browser engine-based application frameworks often being used in lieu of traditional GUI toolkits.

Layout, style, and rendering

The layout of a web page is typically specified by Cascading Style Sheets (CSS). Each style sheet is a series of rules which the browser engine interprets to determine how the document should be presented. For example, a published web page might use CSS to specify rules to style typography details, such as font, color, and text size. The engine combines all relevant CSS rules to calculate the concrete graphical coordinates for the visual representation it will paint on the screen.

Some engines may begin rendering before 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

Further information: Software:Comparison of browser engines

• Apple created the WebKit engine for its Safari browser by forking the KHTML engine of the KDE project. All browsers for iOS must use WebKit as their engine.
• 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.
• Microsoft has two proprietary engines, Trident and EdgeHTML. Trident is used in the Internet Explorer browser. EdgeHTML was the original engine of the Edge browser, but that was remade with the Blink engine. EdgeHTML is still used in some UWP apps.
• Mozilla develops the Gecko engine for its Firefox browser and the Thunderbird email client.

Timeline

Only the duration of active development is shown, which is when relevant new Web standards continue to be added to the engine.

<timeline>

1. header

ImageSize = width:750 height:170 PlotArea = left:80 right:5 bottom:20 top:5 AlignBars = justify DateFormat = dd/mm/yyyy Period = from:01/01/1997 till:31/05/2022 TimeAxis = orientation:horizontal format:yyyy

Colors =

 id:microsoft     value:rgb(0.3, 0.5, 1)
 id:gecko       value:rgb(1, 0, 0)
 id:khtml       value:rgb(0.3,0.3,0.3)
 id:webkit      value:rgb(0.3, 0.36, 0.36)
 id:blink       value:rgb(0.3, 0.39, 0.39)
 id:mgray       value:rgb(0.5, 0.5, 0.5)
 id:lgray       value:rgb(0.75, 0.75, 0.75)

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:Gecko           text:Gecko
 bar:Trident          text:Trident
 bar:EdgeHTML        text:EdgeHTML
 bar:KHTML           text:KHTML
 bar:WebKit          text:WebKit
 bar:Blink           text:Blink

PlotData=

 align:center textcolor:black fontsize:8 mark:(line,black) width:15 shift:(0,-4)

 bar:Gecko
 from: 01/05/1997  till: 31/05/2022    color:gecko mark:(line,white)

 bar:Trident
 from: 01/10/1997  till: 15/07/2015    color:microsoft mark:(line,white)

 bar:EdgeHTML
 from: 12/11/2014  till: 15/12/2018    color:microsoft mark:(line,white)

 bar:KHTML
 from: 04/11/1998  till: 15/10/2016    color:khtml mark:(line,white)

 bar:WebKit
 from: 25/06/2001  till: 31/05/2022    color:webkit mark:(line,white)

 bar:Blink
 from: 03/04/2013  till: 31/05/2022    color:blink mark:(line,white)

</timeline>

See also

• Comparison of browser engines