imported>Augmented Seventh: Interceptor: Reverting non-constructive edits by ~2026-27966-83

2026-05-10T21:54:48Z

Interceptor: Reverting non-constructive edits by ~2026-27966-83

New page

{{Short description|Core software component of every major web browser}}
{{Distinguish|JavaScript engine}}
{{Use dmy dates|date=December 2024}}

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 (computing)|user]]'s device.

==Name and scope==

Besides "browser [[software engine|engine]]", two other related terms are commonly used: "layout engine" and "rendering engine".<ref name=behindscene>{{cite web |url=http://taligarsiel.com/Projects/howbrowserswork1.htm |title=Behind the scenes of modern web browsers |publisher=Tali Garsiel |access-date=21 April 2018}}</ref><ref name="Gecko">{{cite web |url=https://developer.mozilla.org/docs/Mozilla/Gecko |archive-url=https://wayback.archive-it.org/all/20140604004321/https://developer.mozilla.org/en-US/docs/Mozilla/Gecko |url-status=dead |archive-date=4 June 2014 |title=Gecko |publisher=Mozilla |access-date=21 April 2018}}</ref><ref name="Goanna">{{cite web |url=https://forum.palemoon.org/viewtopic.php?f=1&t=8607 |title=Introducing Goanna |publisher=M.C. Straver |date=22 June 2015 |access-date=21 April 2018}}</ref> In theory, [[layout (computing)|layout]] and [[rendering (computer graphics)|rendering]] (or "painting") could be handled by different engines. In practice, however, these [[software component|components]] are tightly [[coupling (computer programming)|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 [[Content Security Policy|security policy]] between documents, handles navigation through [[hyperlink]]s and data submitted through [[form (HTML)|form]]s, and implements the [[Document Object Model|document object model]] (DOM) exposed to [[scripting language|scripts]] associated with the document.<ref name=behindscene/><ref name="howBlinkWorks">{{cite web |title=How Blink Works |url=https://docs.google.com/document/d/1aitSOucL0VHZa9Z2vbRJSyAIsAz24kX8LFByQ5xQnUg |access-date=12 March 2024}}</ref>

To provide a [[JavaScript#Examples of scripted behavior|wide range]] of dynamic behavior for [[web page]]s, every major browser supports [[JavaScript]]. However, JavaScript is [[programming language implementation|implemented]] as a separate [[JavaScript engine]], which has enabled its usage [[JavaScript#Other 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 [[application software|application]]s. An [[email client]] needs one to display [[HTML email]]. Beginning in the 2010s, many apps have been created with [[Chromium (web browser)#Use in app frameworks|the frameworks]] based on [[Google]]'s [[Chromium (web browser)|Chromium]] project; each of these standalone apps functions much like a [[web application|web app]]. (Two examples are [[Spotify]] and [[Slack (software)|Slack]].)<ref>{{cite web |title=Open Source - Spotify |url=https://www.spotify.com/us/opensource/ |quote=Here are the sources to the great Chromium Embedded Framework that is used by the Spotify Desktop client. |access-date=1 December 2023}}</ref><ref>{{cite news |last1=Betts |first1=Anaïs |title=Building Hybrid Applications with Electron |newspaper=Slack Engineering |date=25 October 2016 |url=https://slack.engineering/building-hybrid-applications-with-electron/ |publisher=Slack |access-date=1 December 2023}}</ref>

==Layout and rendering==

The [[layout (computing)|layout]] of a [[web page]] is typically specified by [[CSS|Cascading Style Sheets]] (CSS). Each style sheet is a series of rules for how the page should be presented. For example, some rules specify [[Web typography|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.<ref name=behindscene/><ref name="howBlinkWorks"/>

The engine updates the visual representation in response to new events, including the user scrolling the page, content being [[Ajax (programming)|asynchronously]] [[XMLHttpRequest|fetched]], video playback, and [[Canvas element|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]].<ref>{{Cite web |first=Ryan |last=Boudreaux |date=October 18, 2013|title=How to prevent Flash of Unstyled Content on your websites |url=https://www.techrepublic.com/blog/web-designer/how-to-prevent-flash-of-unstyled-content-on-your-websites/ |access-date=2021-10-09 |website=TechRepublic |language=en |archive-date=2021-03-05 |archive-url=https://web.archive.org/web/20210305133101/https://www.techrepublic.com/blog/web-designer/how-to-prevent-flash-of-unstyled-content-on-your-websites/ |url-status=live }}</ref>

==Notable engines==
{{Further|Comparison of browser engines}}

* [[Apple Inc.|Apple]] created the [[WebKit]] engine for its [[Safari (web browser)|Safari]] browser by [[Fork (software development)|forking]] the [[KHTML]] engine of the [[KDE]] project.<ref>{{cite web|url=http://news.cnet.com/2100-1023-980492.html |archive-url=https://web.archive.org/web/20121025015655/http://news.cnet.com/2100-1023-980492.html |title=Apple snub stings Mozilla |author=Paul Festa |publisher=[[CNET Networks]] |date=14 January 2003 |archive-date=25 October 2012 |access-date=16 February 2017 |author-link=Paul Festa |url-status=dead }}</ref> Apple mandates that all browsers on [[iOS]] must use WebKit as their engine.<ref>{{cite web |title=Open-sourcing Chrome on iOS! |year=2017 |url= https://blog.chromium.org/2017/01/open-sourcing-chrome-on-ios.html |quote=Due to constraints of the iOS platform, all browsers must be built on top of the WebKit rendering engine. |access-date=26 April 2021}}</ref> (In 2024, the mandate was removed for the [[European Union]], but it is still enforced elsewhere.<ref>{{cite web|url=https://www.macrumors.com/2024/10/24/ios-18-2-eu-third-party-browser-web-apps/ |title=iOS 18.2 to Allow Third-Party Browser Web Apps With Custom Engines in EU |date=24 October 2024 |work=MacRumors |author=Tim Hardwick}}</ref>)
* [[Google]] originally used WebKit for its [[Google Chrome|Chrome]] browser but eventually forked it to create the [[Blink (browser engine)|Blink]] engine.<ref>{{cite web |first=Peter |last=Bright |title=Google going its way, forking WebKit rendering engine |url=https://arstechnica.com/information-technology/2013/04/google-going-its-own-way-forking-webkit-rendering-engine/ |website=[[Ars Technica]] |publisher=[[Conde Nast]] |date=3 April 2013 |access-date=9 March 2017}}</ref> All [[Chromium (web browser)|Chromium]]-based browsers use Blink, as do [[application software|applications]] built with [[Chromium Embedded Framework|CEF]], [[Electron (software framework)|Electron]], or any other [[software framework|framework]] that embeds Chromium.
* [[Microsoft]] has two [[proprietary software|proprietary]] engines, [[Trident (software)|Trident]] and [[EdgeHTML]]. Trident, also called MSHTML, is used in the [[Internet Explorer]] browser. EdgeHTML, being a fork of Trident, was the original engine of the Edge browser (now called [[Edge Legacy]]); it's still found in some [[Universal Windows Platform apps|UWP apps]].<ref>{{cite web |last=Mendelevich |first=Alan |date=14 May 2021 |title=You Think You Can Forget About the "Legacy" Microsoft Edge? Not So Fast! |url=https://blog.ailon.org/you-think-you-can-forget-about-the-legacy-microsoft-edge-not-so-fast-28ce91270a22}}</ref> The new, [[Microsoft Edge|Chromium-based Edge]] was remade with the Blink engine.<ref>{{cite web |last1=Mackie |first1=Kurt |title=Microsoft Edge Browser To Get New Rendering Engine but EdgeHTML Continues |url=https://redmondmag.com/articles/2018/12/10/edgehtml-continues.aspx |website=Redmond Mag |date=10 December 2018 |access-date=21 December 2019}}</ref>
* [[Mozilla]] develops the [[Gecko (software)|Gecko]] engine for its [[Firefox]] browser and the [[Mozilla Thunderbird|Thunderbird]] email client.<ref name="Gecko"/>

The following chart shows the duration of active development (when relevant new [[web standards]] continue to be added) for each engine in this section. Note that Gecko, WebKit, and Blink are still actively developed.

<timeline>
# 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]]

==References==
{{Reflist}}

{{Browser engines}}

[[Category:Browser engines]]

Browser engine - Revision history

imported>Augmented Seventh: Interceptor: Reverting non-constructive edits by ~2026-27966-83