Browser engine: Difference between revisions
Jump to navigation
Jump to search
imported>Cutlass m Reverted edits by 176.88.177.209 (talk) (AV) |
imported>LizardJr8 m Reverted 1 edit by ~2025-34295-00 (talk) to last revision by Augmented Seventh |
||
| (One intermediate revision by one other user not shown) | |||
| Line 3: | Line 3: | ||
{{Use dmy dates|date=December 2024}} | {{Use dmy dates|date=December 2024}} | ||
A '''browser engine''' (also known as a '''layout engine''' or '''rendering engine''') is a core | 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== | ==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 [[ | 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> | 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 [[ | 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 [[ | 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== | ==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 for the visual representation it will paint on the screen.<ref name=behindscene/><ref name="howBlinkWorks"/> | 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== | ==Notable engines== | ||
| Line 29: | Line 29: | ||
* [[Mozilla]] develops the [[Gecko (software)|Gecko]] engine for its [[Firefox]] browser and the [[Mozilla Thunderbird|Thunderbird]] email client.<ref name="Gecko"/> | * [[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> | <timeline> | ||
Latest revision as of 17:57, 17 November 2025
Template:Short description Script error: No such module "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 scope
Besides "browser engine", two other related terms are commonly used: "layout engine" and "rendering engine".[1][2][3] 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.[1][4]
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.[1][4]
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.[4]
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.)[5][6]
Layout and rendering
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 and pixel values for the visual representation it will paint on the screen.[1][4]
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.[7]
Notable engines
Script error: No such module "labelled list hatnote".
- Apple created the WebKit engine for its Safari browser by forking the KHTML engine of the KDE project.[8] Apple mandates that all browsers on iOS must use WebKit as their engine.[9] (In 2024, the mandate was removed for the European Union, but it is still enforced elsewhere.[10])
- Google originally used WebKit for its Chrome browser but eventually forked it to create the Blink engine.[11] 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.[12] The new, Chromium-based Edge was remade with the Blink engine.[13]
- Mozilla develops the Gecko engine for its Firefox browser and the Thunderbird email client.[2]
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
References
<templatestyles src="Reflist/styles.css" />
- ↑ a b c d Script error: No such module "citation/CS1".
- ↑ a b Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
- ↑ a b c d Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
Script error: No such module "Check for unknown parameters".
Script error: No such module "Navbox".