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

Besides "browser engine", two other related terms are commonly used: "layout engine" and "rendering engine". In theory, layout and rendering could be handled by different engines. In practice, however, these components are tightly coupled and rarely encountered on their own outside of the browser engine.
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 exposed to scripts associated with the document.
To provide a wide range of dynamic behavior for web pages, every major browser supports JavaScript. However, JavaScript is implemented as a separate JavaScript engine, which has enabled its usage elsewhere. In a browser, the two engines are coordinated via the DOM and Web IDL bindings.
Browser engines are also used in non-browser applications. An email client needs one to display HTML email. Beginning in the 2010s, many apps have been created with the frameworks based on Google's Chromium project; each of these standalone apps functions much like a web app.

Layout and rendering

The layout of a web page is typically specified by Cascading Style Sheets. Each style sheet is a series of rules for how the page should be presented. For example, some rules specify typography details, such as font, color, and text size, while others determine the placement of images. The engine combines all relevant CSS rules to calculate precise graphical coordinates and pixel values for the visual representation it will paint on the screen.
The engine updates the visual representation in response to new events, including the user scrolling the page, content being asynchronously fetched, video playback, and canvas animations. It also may begin rendering before a page's resources are downloaded, which 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

The following chart shows the duration of active development for each engine in this section. Note that Gecko, WebKit, and Blink are still actively developed.

  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
id:gecko value:rgb
id:khtml value:rgb
id:webkit value:rgb
id:blink 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: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: width:15 shift:
bar:Gecko
from: 01/05/1997 till: 31/05/2022 color:gecko mark:
bar:Trident
from: 01/10/1997 till: 15/07/2015 color:microsoft mark:
bar:EdgeHTML
from: 12/11/2014 till: 15/12/2018 color:microsoft mark:
bar:KHTML
from: 04/11/1998 till: 15/10/2016 color:khtml mark:
bar:WebKit
from: 25/06/2001 till: 31/05/2022 color:webkit mark:
bar:Blink
from: 03/04/2013 till: 31/05/2022 color:blink mark: