Browser engine

Revision as of 15:40, 28 May 2025 by imported>Cutlass (Reverted edits by 176.88.177.209 (talk) (AV))
(diff) ← Previous revision | Latest revision (diff) | Newer revision → (diff)

Template:Short description Template:Distinguish Template:Use dmy dates

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 scopeEdit

Besides "browser engine", two other related terms are commonly used: "layout engine" and "rendering engine".<ref name=behindscene>{{#invoke:citation/CS1|citation |CitationClass=web }}</ref><ref name="Gecko">{{#invoke:citation/CS1|citation |CitationClass=web }}</ref><ref name="Goanna">{{#invoke:citation/CS1|citation |CitationClass=web }}</ref> In theory, layout and rendering (or "painting") 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.<ref name=behindscene/><ref name="howBlinkWorks"/>

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.<ref name=behindscene/><ref name="howBlinkWorks">{{#invoke:citation/CS1|citation |CitationClass=web }}</ref>

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.<ref name="howBlinkWorks"/>

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. (Two examples are Spotify and Slack.)<ref>{{#invoke:citation/CS1|citation |CitationClass=web }}</ref><ref>Template:Cite news</ref>

Layout and renderingEdit

The layout of a web page is typically specified by Cascading Style Sheets (CSS). 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 for the visual representation it will paint on the screen.<ref name=behindscene/><ref name="howBlinkWorks"/>

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.<ref>{{#invoke:citation/CS1|citation |CitationClass=web }}</ref>

Notable enginesEdit

Template:Further

|CitationClass=web }}</ref> Apple mandates that all browsers on iOS must use WebKit as their engine.<ref>{{#invoke:citation/CS1|citation |CitationClass=web }}</ref> (In 2024, the mandate was removed for the European Union, but it is still enforced elsewhere.<ref>{{#invoke:citation/CS1|citation |CitationClass=web }}</ref>)

  • Google originally used WebKit for its Chrome browser but eventually forked it to create the Blink engine.<ref>{{#invoke:citation/CS1|citation

|CitationClass=web }}</ref> All Chromium-based browsers use Blink, as do applications built with CEF, Electron, or any other framework that embeds Chromium.

|CitationClass=web }}</ref> The new, Chromium-based Edge was remade with the Blink engine.<ref>{{#invoke:citation/CS1|citation |CitationClass=web }}</ref>

Development timelinesEdit

This figure shows for various browser engines the duration of its active development, the period when relevant new web standards continue to be added to it.

<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 alsoEdit

ReferencesEdit

Template:Reflist

Template:Browser engines