Browser engine: Difference between revisions

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

A browser engine is not a stand-alone computer program but a critical piece of a larger program, such as a web browser, from which the term is derived. (The word "engine" is an analogy to the engine of a car.)

Besides "browser engine", two other terms are in common use regarding related concepts: "layout engine" and "rendering engine".^[1]^[2]^[3] In theory, layout and rendering (or "painting") could be handled by separate engines. In practice, however, they are tightly coupled and rarely considered separately.

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) data structure exposed to page scripts.

Executing JavaScript (JS) code is a separate matter, however, as every major web browser uses a dedicated engine for this. The JS language was originally created for use in browsers, but it is now used elsewhere, too, so the implementation of JS engines is decoupled from browser engines. In a web browser, the two engines work in concert via the shared DOM data structure.

Browser engines are used in other types of programs besides web browsers. Email clients need them to display HTML email. The Electron framework, which is powered by the two engines of the Google Chrome browser, has been used to create many applications.

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 which the browser engine interprets. For example, some rules specify typography details, such as font, color, and text size. The engine combines all relevant CSS rules to calculate precise graphical coordinates for the visual representation it will paint on the screen.^[1]

Some engines may begin rendering before all of 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.

Notable engines

Apple created the WebKit engine for its Safari browser by forking the KHTML engine of the KDE project.^[4] All browsers for iOS must use WebKit as their engine.^[5]
Google originally used WebKit for its Chrome browser but eventually forked it to create the Blink engine.^[6] 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, MSHTML and EdgeHTML. MSHTML is used in the Internet Explorer browser. EdgeHTML was the original engine of the Edge browser, but that was remade with the Blink engine.^[7] EdgeHTML is still used in some Universal Windows Platform apps.^[8]
Mozilla develops the Gecko engine for its Firefox browser, the Thunderbird email client, and the SeaMonkey internet suite.^[2]

Timeline

Only the duration of active development is shown, which is when relevant new Web standards continue to be added to the engine.

References

^ ^a ^b "Behind the scenes of modern web browsers". Tali Garsiel. Retrieved 2018-04-21.
^ ^a ^b "Gecko". Mozilla. Archived from the original on June 4, 2014. Retrieved 2018-04-21.
^ "Introducing Goanna". M.C. Straver. 2015-06-22. Retrieved 2018-04-21.
^ Paul Festa (2003-01-14). "Apple snub stings Mozilla". CNET Networks. Archived from the original on 2012-10-25. Retrieved 2017-02-16.
^ "Open-sourcing Chrome on iOS!". 2017. Retrieved 26 April 2021.
^ Bright, Peter (April 3, 2013). "Google going its own way, forking WebKit rendering engine". Ars Technica. Conde Nast. Retrieved March 9, 2017.
^ Mackie, Kurt (10 December 2018). "Microsoft Edge Browser To Get New Rendering Engine but EdgeHTML Continues". Redmond Mag. Retrieved 21 December 2019.
^ Mendelevich, Alan (2021-05-14), You Think You Can Forget About the “Legacy” Microsoft Edge? Not So Fast!, Medium

[behindscene-1] "Behind the scenes of modern web browsers". Tali Garsiel. Retrieved 2018-04-21.

[Gecko-2] "Gecko". Mozilla. Archived from the original on June 4, 2014. Retrieved 2018-04-21.

[Goanna-3] "Introducing Goanna". M.C. Straver. 2015-06-22. Retrieved 2018-04-21.

[4] Paul Festa (2003-01-14). "Apple snub stings Mozilla". CNET Networks. Archived from the original on 2012-10-25. Retrieved 2017-02-16.

[5] "Open-sourcing Chrome on iOS!". 2017. Retrieved 26 April 2021.

[6] Bright, Peter (April 3, 2013). "Google going its own way, forking WebKit rendering engine". Ars Technica. Conde Nast. Retrieved March 9, 2017.

[7] Mackie, Kurt (10 December 2018). "Microsoft Edge Browser To Get New Rendering Engine but EdgeHTML Continues". Redmond Mag. Retrieved 21 December 2019.

[8] Mendelevich, Alan (2021-05-14), You Think You Can Forget About the “Legacy” Microsoft Edge? Not So Fast!, Medium

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

@@ Line 1: / Line 1: @@
 {{Short description|Software}}
 {{Distinguish|JavaScript engine}}
+A '''browser engine''' ([[#Name and scope|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.
-{{refimprove|date=July 2022}}
-A '''browser engine''' ([[#Name and scope|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.{{fact|date=July 2022}}
 ==Name and scope==
-A browser engine is not a stand-alone [[computer program]] but a critical piece of a larger program, such as a [[web browser]], from which the term is derived. The term describes a specific type of "[[software engine]]", where the general concept is an analogy to the [[engine]] of machines such as a car.{{fact|date=July 2022}}
+A browser engine is not a stand-alone [[computer program]] but a critical piece of a larger program, such as a [[web browser]], from which the term is derived. (The word "[[software engine|engine]]" is an analogy to the engine of a car.)
-Besides "browser engine", two other terms in common use regarding related concepts are "layout engine" and "rendering engine".<ref name=behindscene>{{cite web|url=http://taligarsiel.com/Projects/howbrowserswork1.htm |first=Tali |last=Garsiel |date=2011-06-04 |title=Behind the scenes of modern web browsers |publisher=Tali Garsiel |access-date=2018-04-21 }}</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=2014-06-04 |title=Gecko |publisher=Mozilla |access-date=2018-04-21 }}</ref><ref name="Goanna">{{cite web |url = https://forum.palemoon.org/viewtopic.php?f=1&t=8607|title=Introducing Goanna|publisher=M.C. Straver |first=M.C. |last=Straver |date=2015-06-21 |access-date=2018-04-21 }}</ref>
-In theory, [[layout (computing)|layout]] and [[wikt:rendering|rendering]] (or "painting") could be handled by separate engines. In practice, however, they are tightly [[coupling (computer programming)|coupled]] and rarely considered separately.{{fact|date=July 2022}}
+Besides "browser engine", two other terms are in common use regarding related concepts: "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=2018-04-21}}</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=June 4, 2014|title=Gecko|publisher=Mozilla|access-date=2018-04-21}}</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=2015-06-22|access-date=2018-04-21}}</ref> In theory, [[layout (computing)|layout]] and [[wikt:rendering|rendering]] (or "painting") could be handled by separate engines. In practice, however, they are tightly [[coupling (computer programming)|coupled]] and rarely considered separately.
-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]] (DOM) [[data structure]] exposed to page [[scripting language|scripts]].{{fact|date=July 2022}}
+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]] (DOM) [[data structure]] exposed to page [[scripting language|scripts]].
-Executing [[JavaScript]] (JS) code is a separate matter, however, as every major web browser uses a [[JavaScript engine|dedicated engine]] for this. The JS language was originally created for use in browsers, but it is now used elsewhere, too, so the implementation of JS engines is decoupled from browser engines. In a web browser, the two engines work in concert via the shared DOM data structure.{{fact|date=July 2022}}
+Executing [[JavaScript]] (JS) code is a separate matter, however, as every major web browser uses a [[JavaScript engine|dedicated engine]] for this. The JS language was originally created for use in browsers, but it is now used elsewhere, too, so the implementation of JS engines is decoupled from browser engines. In a web browser, the two engines work in concert via the shared DOM data structure.
-Browser engines are used in other types of programs besides web browsers. [[Email client]]s need them to display [[HTML email]]. The [[Electron (software framework)|Electron framework]], which is powered by the two engines of the [[Google Chrome]] browser, has been used to create many [[Application software|applications]].{{fact|date=July 2022}}
+Browser engines are used in other types of programs besides web browsers. [[Email client]]s need them to display [[HTML email]]. The [[Electron (software framework)|Electron framework]], which is powered by the two engines of the [[Google Chrome]] browser, has been used to create many [[Application software|applications]].
 ==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 which the browser engine interprets. For example, some rules specify [[Web typography|typography]] details, such as [[font]], color, and text size. 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/>
-Some engines may begin rendering before all of 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]].{{fact|date=July 2022}}
+Some engines may begin rendering before all of 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]].
-==Notable browser engines==
+==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=2003-01-14 |archive-date=2012-10-25 |access-date=2017-02-16 |author-link=Paul Festa |url-status=dead }}</ref> All browsers for [[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 |access-date=26 April 2021}}</ref>
-===Apple (WebKit)===
+* [[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 own 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=April 3, 2013 |access-date=March 9, 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<!--incl. Qt WebEngine which doesn't need to be mentioned here--> [[software framework|framework]] that embeds Chromium.
-[[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 |first=Paul |last=Festa |publisher=[[CNET Networks]] |date=2003-01-14 |archive-date=2012-10-25 |access-date=2017-02-16 |author-link=Paul Festa |url-status=dead }}</ref>
+* [[Microsoft]] has two [[proprietary software|proprietary]] engines, [[MSHTML]] and [[EdgeHTML]]. MSHTML is used in the [[Internet Explorer]] browser. EdgeHTML was the original engine of the [[Microsoft Edge|Edge]] browser, but that 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> EdgeHTML is still used in some [[Universal Windows Platform apps]].<ref>{{citation|url=https://blog.ailon.org/you-think-you-can-forget-about-the-legacy-microsoft-edge-not-so-fast-28ce91270a22|title=You Think You Can Forget About the “Legacy” Microsoft Edge? Not So Fast!|publisher=[[Medium (website)|Medium]]|first=Alan|last=Mendelevich|date=2021-05-14}}</ref>
+* [[Mozilla]] develops the [[Gecko (software)|Gecko]] engine for its [[Firefox]] browser, the [[Mozilla Thunderbird|Thunderbird]] email client, and the [[SeaMonkey]] [[internet suite]].<ref name="Gecko"/>
+===Timeline===
-All browsers for [[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 |access-date=26 April 2021}}</ref>
+Only the duration of active [[software development|development]] is shown, which is when relevant new [[Web standards]] continue to be added to the engine.
-===Google (WebKit; Blink)===
-[[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 own 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=2013-04-03 |access-date=2017-03-09 }}</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<!--incl. Qt WebEngine which doesn't need to be mentioned here--> [[software framework|framework]] that embeds Chromium.{{fact|date=July 2022}}
-===Microsoft (MSHTML; EdgeHTML; Blink)===
-[[Microsoft]] has two [[proprietary software|proprietary]] engines, [[MSHTML]] and [[EdgeHTML]]. MSHTML is used in the [[Internet Explorer]] browser. EdgeHTML was the original engine of the [[Microsoft Edge|Edge]] browser, but that 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=2018-12-10 |access-date=2019-12-21}}</ref>
-EdgeHTML is still used in some [[Universal Windows Platform apps]].<ref>{{citation|url=https://blog.ailon.org/you-think-you-can-forget-about-the-legacy-microsoft-edge-not-so-fast-28ce91270a22|title=You Think You Can Forget About the “Legacy” Microsoft Edge? Not So Fast!|publisher=[[Medium (website)|Medium]]|first=Alan|last=Mendelevich|date=2021-05-14}}</ref>
-===Mozilla (Gecko)===
-[[Mozilla]] develops the [[Gecko (software)|Gecko]] engine for its [[Firefox]] browser, the [[Mozilla Thunderbird|Thunderbird]] [[email client]], and the [[SeaMonkey]] [[Internet suite]].<ref name="Gecko"/>
-==Engine development timeline==
-The following timeline illustrates the comparative development life cycles for the most significant browser engines. Only the duration of active [[software development|development]] is shown, which is when relevant new [[Web standards]] continue to be added to the engine.{{fact|date=July 2022}}
 <timeline>
@@ Line 98: / Line 84: @@
 </timeline>
-==See also==
-*[[Engine]]
-*[[Software engine]]
 ==References==
-{{Reflist|1}}
+{{Reflist}}
-==Bibliography==
-==External links==
 {{Browser engines}}

Browser engines
Major (comparison)	Blink Gecko WebKit
Experimental	Flow LibWeb Servo
Maintained	Goanna MSHTML NetSurf
Discontinued	EdgeHTML KHTML Mariner Presto Tasman Tkhtml

Langbahn Team – Weltmeisterschaft