Browser engine

Besides "browser engine", two other related terms are commonly used: "layout engine" and "rendering engine".{{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}}{{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}}{{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}} 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.

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.{{cite web |title=How Blink Works |url=https://docs.google.com/document/d/1aitSOucL0VHZa9Z2vbRJSyAIsAz24kX8LFByQ5xQnUg |access-date=12 March 2024}}

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. (Two examples are Spotify and Slack.){{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}}{{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}}

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.

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.{{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 }}

{{Further|Comparison of browser engines}}

• Apple created the WebKit engine for its Safari browser by forking the KHTML engine of the KDE project.{{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 }} Apple mandates that all browsers on iOS must use WebKit as their engine.{{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}} (In 2024, the mandate was removed for the European Union, but it is still enforced elsewhere.{{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}})
• Google originally used WebKit for its Chrome browser but eventually forked it to create the Blink engine.{{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}} 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, 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 UWP apps.{{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}} The new, Chromium-based Edge was remade with the Blink engine.{{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}}
• Mozilla develops the Gecko engine for its Firefox browser and the Thunderbird email client.

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.

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)

• Comparison of browser engines

{{Reflist}}

{{Browser engines}}

Category:Browser engines