We tend to measure the ability of web browser to display web pages in JavaScript performance. However, JavaScript is only one, albeit significant, part of the equation. Microsoft took the time to figure out how much share JavaScript takes of the entire time that a browser takes to access, load and display a web page.

It is not much of a secret that there are countless variables that affect your web page loading performance at any given time. Your location, connection type, connection speed, dynamics of the connection, installed hardware as well as software, and your browser are just a few of those variables that make it difficult to determine subtle performance differences between browsers and reach a verdict which one is faster and which one is slower. Often, your subjective perception may be the best way to pick the fastest browser.

Microsoft’s IE team has posted interesting findings that dive deeper into this topic and it appears that the secret to a fast browser would be a browser that dynamically adjusts its engine resources to the type of content it is accessing. In IE8’s case that would be an adjustment of 11 core subsystems. From Microsoft’s Explanation:

“Networking: The first subsystem generally encountered is networking. The networking subsystem is responsible for all communication between the client and server, including local caching of web content. The networking subsystem is generally gated on the performance of the user’s network

HTML: As HTML documents are downloaded from the server they’re passed to an HTML subsystem which parses the document, initiates additional downloads in the networking subsystem, and creates a structural representation of the document. Modern browsers also contain related subsystems which are used for XHTML, XML and SVG documents.

CSS: When CSS is encountered, whether that’s inside an HTML document or a CSS document, it’s passed to a CSS subsystem which parses the style information and creates a structural representation that can be referenced later.

Collections: HTML documents often contain metadata, for example the information described in the document head or the attributes applied to an element. The collections subsystem is responsible for storing and accessing this metadata.

JavaScript: When script is encountered, it’s passed directly to the JavaScript subsystem which is responsible for executing that script. The JavaScript subsystem is probably the most well-known of the browser subsystems thanks to the visibility it has received over the last few years.

Marshalling: Because most JavaScript engines are not directly integrated into the browser, there is a communication layer between the browser and the script engine. Passing information through this communication layer is generally referred to as marshaling.

Native OM: JavaScript interacts with the document through the Document Object Model API’s. These API’s are generally provided through a subsystem which knows how to access and manipulate the document and is the primary interaction point between the script engine and the browser.

Formatting: Once the document is constructed, the browser needs to apply the style information before it can be displayed to the user. The formatting subsystem takes the HTML document and applies styles.

Block Building: CSS is a block based layout system. After the document is styled, the next step is to construct the rectangular blocks that will be displayed to the user. This process determines things like the size of the blocks and is tightly integrated with the next stage – layout.

Layout: Now that the browser has styled the content and constructed the blocks, it can go through the process of laying out the content. The layout subsystem is responsible for this algorithmically complex process.

Rendering: The final stage of the process occurs inside the rendering subsystem where the final content is displayed to the user. This process is often referred to as “drawing to the screen” and may occur on the CPU, the GPU, or a combination of both.”

Every website uses these capabilities in a different way, making it nearly impossible to have a generic profile of browser capabilities that will always result in great performance. Microsoft first tested five news web sites that took between 1.1 and 3.7 seconds to load. Each subsystem of the browser was used differently by each website. However, Microsoft found that JavaScript (29%), marshalling (18%) and rendering (17%) make the greatest impact on browser performance overall. The company also tested 25 AJAX websites, including Facebook, Gmail and Hotmail, and noticed that rendering had the most impact (31%), followed by JavaScript (21%) formatting (14%) and layout (12%).

Microsoft indicated that its hardware-accelerated IE9 has the genes to improve performance and react to different needs to websites. However, it did not reveal details, but promised that more information will become available closer to the launch date of IE9 Beta on September 15.

You can leave a response, or trackback from your own site.