Go4Expert (http://www.go4expert.com/)
-   Engineering Concepts (http://www.go4expert.com/articles/engineering-concepts-tutorials/)
-   -   Behind the Browser ! (http://www.go4expert.com/articles/behind-the-browser-t14135/)

Bhullarz 22Sep2008 22:09

Behind the Browser !
Hi All ! we all use browsers, different kinds of browsers, to surf the internet. But do we know what makes a browser work ? How do a browser come to know that when to show which color or when to show which kind of style of text ? We can say we give instructions by using HTML or DHTML or JAVASCRIPT/VBSCRIPT kinds of language. But how do a browser come to know which instruction relates to which language and how to handle it ? There should be something in the browser which drives it and make it work according to our instructions.

Yes, This is my topic. Behind the BROWSER, something called WEB LAYOUT ENGINE, a mechanism used to make the browser work. The use of WEB LAYOUT ENGINE is not limited to browsers only. These are used in various email clients like OUTLOOK EXPRESS, thunderbird etc. Sometimes these are part of the operating system.
Let's start with formal definition of WEB LAYOUT ENGINE(sometimes called RENDERING ENGINE):

A layout engine, or rendering engine, is software that takes marked up content (such as HTML, XML, image files, etc.) and formatting information (such as CSS, XSL, etc.) and displays the formatted content on the screen. It "paints" on the content area of a window, which is displayed on a monitor or a printer. A layout engine is typically used for web browsers, e-mail clients, or other applications that require the displaying (and editing) of web contents.

The term rendering engine can also refer to text rendering engines like Pango or Uniscribe which make multilingual texts present in proper shape, taking into account bidirectional text, combinations of "basic characters" with accents, and other intricacies of multilingual text.

For example, Gecko, the Mozilla project's open-source layout engine, is used by a variety of products derived from the Mozilla code base, including the Firefox web browser, the Thunderbird E-mail client, and Seamonkey application suite. Trident, the layout engine from Internet Explorer, is used by many applications on the Microsoft Windows platform to render HTML, as in Outlook Express, some versions of Microsoft Outlook, and the mini-browsers in Winamp and RealPlayer. Similarly, Opera Software's proprietary Presto engine is licensed to a number of other software vendors, as well as being used in Opera's own Opera web browser, and KDE's open-source KHTML engine is used both in KDE's own Konqueror web browser as well as being used, in an adapted form, as the basis for the rendering engine in Apple's Safari web browser.

List of Layout Engines
• Boxely - for AOL applications
• Cobra - Java-based, for Lobo.
• Gecko - for Firefox, Camino, Mozilla Application Suite, Netscape, and other Gecko-based browsers
• GtkHTML - for Novell Evolution and other GTK+ programs
• Gzilla - for Gzilla and Dillo
• HTMLayout - embeddable HTML/CSS rendering engine - component for Windows and Windows Mobile operating systems
• KHTML - for Konqueror
• NetFront - for Access NetFront
• NetSurf - for NetSurf
• Presto - for Opera 7 and above, Macromedia Dreamweaver MX and MX 2004 (Mac), and Adobe Creative Suite 2
• Prince XML - for Prince XML
• Robin - for The Bat!
• Tasman - for Internet Explorer 5 for Mac, Microsoft Office 2004 for Mac, and Microsoft Office 2008 for Mac.
• Trident - for Internet Explorer since version 4.0 , Internet Explorer shells, and some media players
• Tkhtml - for hv3
• WebKit - (KHTML-fork) for Safari, Arora, Midori, OmniWeb, Shiira, Sunrise, iCab since version 4, Swift (based upon Epiphany*), and Google Chrome. Epiphany is now using the Gecko engine, but they intend to drop that and begin using the WebKit engine instead of the Gecko engine in version 2.24 or version 2.26

Bhullarz 22Sep2008 22:12

TRIDENT (also known as MSHTML)
Trident (also known as MSHTML) is the name of the layout engine for the Microsoft Windows version of Internet Explorer. It was first introduced with the release of Internet Explorer version 4 in October 1997, has been steadily upgraded and remains in use today.

Trident was designed as a software component to allow software developers to easily add web browsing functionality to their own applications. It presents a COM interface for accessing and editing web pages in any COM supported environment, like C++ and .NET. For instance, a web browser control can be added to a C++ program and Trident can then be used to access the page currently displayed in the web browser and retrieve element values. Events from the web browser control can also be captured. Trident functionality becomes available by connecting the file mshtml.dll to the software project.


• Trident (IE4)
• Trident II (IE5) (improved CSS1.0 support and had sweeping changes in CSS2 rendering)
• Trident III (IE5.5) (corrected issues with CSS handling)
• Trident IV (IE6) (corrected the box-model and added "Quirks Mode" with DTD switching)
• Trident V (IE7) (Due out in Beta form along with IE7, claims to fix many CSS rendering issues and add PNG alpha support)

Trident-based applications

All versions of Internet Explorer for Windows from 4.0 onwards use Trident, and it is also used by various other web browsers and software components (see Internet Explorer shells). In Windows 98, Windows Me, and Windows 2000, it is also used for the Windows file manager/shell, Windows Explorer. The Add/Remove Programs tool in Windows 2000 and Windows XP uses Trident to render the list of installed programs and in Windows XP, it is also used for the User Accounts Control Panel, which is an HTML Application. However Trident was not used by the IE5 version for Mac, or by Internet Explorer Mobile.

Some other Trident-based applications include:

• AOL Instant Messenger 6.x, which uses Trident to render conversation and profile windows, and advertisement panels
• EA Link, incompatible with Trident V as of Internet Explorer 7 RC2
• Google Talk, which uses Trident to render chat windows and profile cards
• LimeWire, which renders the page 'New@Lime'
• Avant Browser
• TheWorld Browser
• Maxthon, which uses the Trident V engine while adding features not built into IE7
• Microsoft InfoPath
• Microsoft Encarta and related products
• Microsoft Compiled HTML Help
• Microsoft Outlook which uses Trident to render HTML Messages (prior to Outlook 2007) and the "Outlook Today" screen
• Microsoft Outlook Express, which uses Trident to render HTML Messages
• MSN Messenger, which uses it to produce Flash-based "winks" and games, and for all advertisements shown in the advertisement banner
• Netscape Browser (Netscape 8), which used Trident to render web pages in IE mode
• RealNetworks
• Souvergin
• TomeRaider
• Valve's Steam client, which uses Trident to render the "Store", "Update News", and "Community" sections
• Windows Media Player, which uses Trident to render the "Media Information" pages; other media players, such as Winamp and RealPlayer, have similar features.

Bhullarz 22Sep2008 22:14

Presto is a layout engine for the Opera web browser developed by Opera Software. After several public betas and technical previews, it was released on January 28, 2003 in Opera 7.0 for Windows; it is the browser's current layout engine. Presto replaced the Elektra engine used in versions 4–6 of Opera. Unlike Elektra, it is dynamic: the page or parts of it can be re-rendered in response to DOM and script events. Presto is only available as a part of Opera browser or related products. The source or binary (DLL) forms of the engine are not publicly available. Subsequent releases have seen a number of bugs fixed and optimisations to improve the speed of the ECMAScript ("JavaScript") engine.

JavaScript engines
Two JavaScript engines are used in combination with Presto. The "linear_b" engine is used in Opera 7.0 through 9.25. The "futhark" engine is used in Opera 9.5 and will be used in Opera 10.

Presto-based applications

Web browsers
* Opera 7 and above
* Nintendo DS Browser (based on Opera)
* Nokia 770 Browser (based on Opera)
* Sony Mylo's Browser (based on Opera)
* Wii Internet Channel Browser (based on Opera)

HTML editors
* Macromedia Dreamweaver MX and above
* Adobe Creative Suite 2

Bhullarz 22Sep2008 22:17

WebKit is an open source application framework that provides a foundation upon which to build a web browser. WebKit was originally derived by Apple Inc. from the Konqueror browser’s KHTML software library for use as the engine of Mac OS X’s Safari web browser, and has now been further developed by Apple, Nokia, Google and others. The framework is now used by Omniweb, Shiira, iCab, Adobe AIR, Google Chrome, mobile phones (including the iPhone), Nokia’s Series 60 browser and Google’s Android platform. Although WebKit is included with Trolltech’s Qt 4.4, the underlying framework for KDE,the KDE project will use its original version of KHTML for the near future.

It passes the Acid2 test, and as of March 2008, latest nightly builds of WebKit score 100/100 in the Acid3 test with pixel-perfect rendering and no timing or smoothness issues.


• WebCore
WebCore is a layout, rendering, and Document Object Model (DOM) library for HTML and SVG, developed by the WebKit project. Its complete source code is licensed under the LGPL. The WebKit framework wraps WebCore and JavaScriptCore, providing an Objective-C application programming interface to the C++-based WebCore rendering engine and JavaScriptCore script engine, allowing it to easily be referenced by applications based on the Cocoa API; later versions also include a cross-platform C++ platform abstraction, and various ports provide additional APIs.

• JavaScriptCore
JavaScriptCore is a framework that provides a JavaScript engine for WebKit implementations, and provides this type of scripting in other contexts within Mac OS X.JavaScriptCore is originally derived from KDE’s JavaScript engine (KJS) library (which is part of the KDE project) and the PCRE regular expression library. Since forking from KJS and PCRE, JavaScriptCore has been improved with many new features and greatly improved performance.JavaScriptCore is currently being rewritten by the WebKit project as SquirrelFish to turn it into a bytecode interpreter.

• Drosera
Drosera is a JavaScript debugger that was included with the nightly builds of WebKit. It was named after Drosera, a genus of carnivorous plants (i.e. bug-eaters). Drosera has been replaced by the inclusion of debugging functionality in the Web Inspector.[17]

• SunSpider
A benchmark suite that aims to measure JavaScript performance on tasks that are relevant to the current and near future use of JavaScript in the real world, such as screen drawing, encryption and text manipulation.The suite further attempts to be balanced and statistically sound. It was released by Apple's WebKit team in December 2007. It was well-received, and other browser developers also use it to compare the JavaScript performance of different browsers.

Bhullarz 22Sep2008 22:18

Gecko is the open source browser engine designed to support open Internet standards such as HTML 4, CSS 1/2, the W3C DOM, XML, JavaScript, and others.

Gecko is used in multiple browsers, including Mozilla Firefox, SeaMonkey, Camino, and others. Gecko is continuously under development at mozilla.org. Gecko has been known previously by the code names "Raptor" and "NGLayout"; the new name was chosen following a trademark infringement dispute.

Formally, a layout engine defines the placement policy for a document and places content on a page. Gecko's core is a very fast layout engine. Gecko also offers the ability to parse various document types (HTML, XML, SVG, etc), advanced rendering capabilities including compositing and transformations, and support for embedded JavaScript and plugins.

Gecko is so fast and so powerful that it's being used to create the user interface of some applications ("chrome") as well. In other words, Gecko will not only be displaying the document's content, but it will also be painting the scrollbars, toolbars, and menus on the screen as well.

Gecko is written in C++ and is cross-platform, running on operating systems including Microsoft Windows, BSDs, Linux, Mac OS X, Solaris, OS/2, AIX and OpenVMS. Its development is now overseen by the Mozilla Foundation. Licensed a tri-license of the Mozilla Public License (MPL), GNU General Public License (GPL) and GNU Lesser General Public License (LGPL), Gecko is free and open source software.

Gecko is the second most-popular layout engine on the World Wide Web, after Trident (used by Internet Explorer for Windows since version 4), and followed by WebKit (used by Safari & Google Chrome) and Presto (used by Opera).

Gecko includes the following components:

• Document parser (handles HTML and XML)
• Layout engine with content model
• Style system (handles CSS, etc.)
• JavaScript runtime (SpiderMonkey)
• Image library
• Networking library (Necko)
• Platform-specific graphics rendering and widget sets for Win32, X, and Mac
• User preferences library
• Mozilla Plug-in API (NPAPI) to support the Navigator plug-in interface
• Open Java Interface (OJI), with Sun Java 1.2 JVM
• RDF back end
• Font library
• Security library (NSS)

Bhullarz 22Sep2008 22:21

Re: Behind the Browser !
Hi all ! I have presented a few details 4 major web layout engines only. References have been taken from most of the times from WIKIPEDIA, MOZILLA FOUNDATION, WEBKIT.ORG, OPERA and few other sites also.
If you are interested to update the topic or you want to share knowledge about other web layout engines which I have missed out, you are most welcomed.

Plz give your comments too for the article..

shabbir 23Sep2008 10:09

Re: Behind the Browser !
Really nice information.

pradeep 23Sep2008 19:26

Re: Behind the Browser !
Whoa! That's quite a lot of interesting information.

Bhullarz 24Sep2008 20:31

Re: Behind the Browser !
Thanks to pradeep and shabbir for appreciation.

shabbir 2Oct2008 21:41

Re: Behind the Browser !
Nominated for article of the month for September 2008

shabbir 17Oct2008 09:15

Re: Behind the Browser !
Start Voting for article of the month for September 2008

shabbir 29Oct2008 16:41

Re: Behind the Browser !

Originally Posted by shabbir

Congrats. Winner of article of the month for September 2008

linuxswan 31Oct2008 11:27

Re: Behind the Browser !
Nice post yaar, very good information.

Also provide the information like can we see the data which is going to and from the browser specially the urls.

i.e when we visit some site it should show the links which are executing...like Proxy log which shows whom we visited. The same can we capture the urls which are flowing from the browser.

pradeep 31Oct2008 12:52

Re: Behind the Browser !
linuxswan if you use Firefox, you can use the add-on Firebug to view the browser Net activity!

Bhullarz 31Oct2008 20:18

Re: Behind the Browser !

Originally Posted by linuxswan
Nice post yaar, very good information.

Also provide the information like can we see the data which is going to and from the browser specially the urls.

i.e when we visit some site it should show the links which are executing...like Proxy log which shows whom we visited. The same can we capture the urls which are flowing from the browser.

If you really want to know that to which URLS/IPs your browser is connecting to complete your request, you should use MICROSOFT NETWORK MONITOR. It is a freeware, available on Microsoft's website. It tracks each and everything of your network and the applications which are using NETWORK. Even if you are expert enough, you can view DATA PACKETS with details also which are being transferred to/from your machine. Moreover, you can set your own filters according to applications which access internet.

Just give it a try. It's a great tool. Otherwise now a days, firewalls are coming up with network monitor which can provide you basic information that to which IPs/URLS, your machine is connected to.

oyeLucky 12Jan2009 15:16

Re: Behind the Browser !
Nice Info Man ! Where did you get all this much details?

Bhullarz 17Jan2009 09:57

Re: Behind the Browser !

Originally Posted by oyeLucky (Post 41364)
Nice Info Man ! Where did you get all this much details?

Just internet articles....

hanleyhansen 21Jan2009 19:54

Re: Behind the Browser !
Great information!! Thanks for sharing!!

All times are GMT +5.5. The time now is 21:14.