Abrowser engine (also known as alayout engine orrendering engine) is a core software component of every majorweb browser. The primary job of a browser engine is to transformHTML documents and other resources of aweb page into an interactive visual representation on auser's device.
Besides "browserengine", two other related terms are commonly used: "layout engine" and "rendering engine".[1][2][3] In theory,layout andrendering (or "painting") could be handled by different engines. In practice, however, thesecomponents are tightlycoupled and rarely encountered on their own outside of the browser engine.[1][4]
In addition to layout and rendering, a browser engine enforces thesecurity policy between documents, handles navigation throughhyperlinks and data submitted throughforms, and implements thedocument object model (DOM) exposed toscripts associated with the document.[1][4]
To provide awide range of dynamic behavior forweb pages, every major browser supportsJavaScript. However, JavaScript isimplemented as a separateJavaScript engine, which has enabled its usageelsewhere. In a browser, the two engines are coordinated via the DOM andWeb IDL bindings.[4]
Browser engines are also used in non-browserapplications. Anemail client needs one to displayHTML email. Beginning in the 2010s, many apps have been created withthe frameworks based onGoogle'sChromium project; each of these standalone apps functions much like aweb app. (Two examples areSpotify andSlack.)[5][6]
Thelayout of aweb page is typically specified byCascading Style Sheets (CSS). Each style sheet is a series of rules for how the page should be presented. For example, some rules specifytypography details, such asfont, color, and text size, while others determine the placement of images. The engine combines all relevant CSS rules to calculate precise graphical coordinates andpixel 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 beingasynchronouslyfetched, video playback, andcanvas 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 aflash of unstyled content.[7]
The following chart shows the duration of active development (when relevant newweb standards continue to be added) for each engine in this section. Note that Gecko, WebKit, and Blink are still actively developed.
Here are the sources to the great Chromium Embedded Framework that is used by the Spotify Desktop client.
Due to constraints of the iOS platform, all browsers must be built on top of the WebKit rendering engine.