Brian LePore (POWRSURG)’s personal Web siteWhat’s in a browser?
Published on 24 May 2009 at 10:58 pm.
Filed under Web stuff.
As the Internet becomes more and more engraved into our everyday lives, if you are going to do business over the Web, you should educate yourself on what goes into a browser and how those features can effect your overall business decisions. For the purpose of this article I shall cover the two features that are most influential to the development cycle for a Web site — the layout engine and the JavaScript engine.
The Layout Engine
The term layout engine (sometimes referred to as the rendering engine) is the part of the browser that formats what is placed on a Web page. In technical terms, it is the part of the browser that takes content that has been written in (X)HTML/XML and uses CSS to apply style (e.g. make header green or separate content into two or three columns) to said content. The purpose of separating content from presentation is that to reduce the size of Web pages (which will decrease the loading time of a page) and to decrease development/maintenance time.
Layout engines are not exclusive to Web browsers. Layout engines are commonly used by Internet-capable applications such as E-mail clients, Instant Messengers, and other applications that need to display Web content. While there are numerous Layout engines, the following are the most prevalent layout engines in use and a list of many key applications that use these engines.
| Layout Engine | Used by |
|---|---|
| Trident | Microsoft Internet Exploder, Microsoft Explorer, Microsoft Outlook Express, Microsoft Outlook 2003 and below, Windows Media Player, AOL Instant Messenger, MSN Messenger, Winamp, and RealPlayer |
| Gecko | Mozilla Firefox, Netscape, Mozilla Seamonkey, Mozilla Thunderbird, Nvu, Camino, Flock, and Epiphany |
| WebKit | Safari, Google Chrome, the iPhone, the iPod touch, the Android mobile phone system, the Palm Pre, and Blackberry OS 4.6+ |
| Presto | Opera, Opera Mini, Opera Mobile, Nintendo Wii, Nintendo DS, and Nokia 770 |
The JavaScript Engine
The JavaScript engine portion of the Web browser is the portion that applies the behavior to a Web page. A behavior would be some action that occurs on a Web page as a result of an action by the user. For example, replacing the main image in a photo gallery when the user clicks on or moves their mouse over a thumb nail image, or when a WYSIWYG editor is applied to a form input box.
Because of the push of Web applications inside the browser, the JavaScript engine is primarily maintained by the core developers behind the Web browser. For example, you’ll notice that both Safari and Google Chrome use WebKit as their layout engine, but Safari uses the SquirelFish JavaScript engine, while Google Chrome uses the V8 JavaScript engine. For completeness, here is a list of JavaScript engines and their primary Web browsers.
| JavaScript Engine | Used by | Note |
|---|---|---|
| JScript | Microsoft Internet Explorer | |
| SpiderMonkey | Mozilla Firefox | pre-version 3.5 |
| TraceMonkey | Mozilla Firefox | version 3.5+ |
| Rhino | Java | Java version of SpiderMonkey |
| SquirrelFish | Safari | |
| V8 | Google Chrome | |
| Linear B | Opera | versions 7 – 9.5 |
| Futhark | Opera | versions 9.5 – 10 |
| Carakan | Opera | versions 10+ |
Market Share
As you can see from the above, there are a lot of different possibilities that can affect development. Because of this developers tend to create a support graph indicating what browsers are actively tested. This support graph is typically based off of market share — the percentage of use a product has in the market. Some developers go the extra mile to forcibly block browsers that do not meet said criteria. This is typically a short sighted process because you are artificially reducing your potential client base. For example, developers that allowed Safari were actively blocking Google Chrome for a time being, despite both browsers using the same layout engine.
When developing your personal support chart you need to take in to account what market you want to push your product currently, and where you want to be in the future. For example, Opera has less than 1% market share in North America, but makes up 36.14% market share in Russia.