Category: Uncategorized

In addition to some dubious implementation of standards one of the main criticisms of Internet Explorer was that it lagged behind other browsers in many speed tests.

But no longer! Microsoft has invested a large amount of time in making the latest release of IE run as fast as they can.

As a consultancy we (Readify– shameless plug!) are often called in to assist with investigating and fixing poorly performing applications. A sensible approach for a performance engagement is to establish a performance base line so any improvements can be measured and then if possible break the problem down into smaller components.

The Microsoft team took a similar approach to find out where bottle necks in Internet Explorer were by analysing data from a number of (unrevealed) real world sites. Web browsers are complex beasts made up of several smaller components all of which can be tweaked.   Jason Weber (Lead Program Manager, Internet Explorer perf team) suggests that browsers generally consist of the following components:

• Network (client/server communication)
• Html Parsing
• CSS Parsing
• Collections (an odd choice for meta data processing)
• JavaScript engine (what is says on the tin!)
• Marshalling (browser & script engine communication)
• Native OM (script engine & browser communication)
• Formatting (applying of styles to document)
• Block building (construction of blocks of text)
• Layout (composition of page)
• Display (displaying content to users)

The team found that the split of work changed quite dramatically between static  sites (Figure 1.1) and sites that made heavy use of ajax requests (Figure 1.2). Note I have taken these graphs from  http://blogs.msdn.com/b/ie/archive/2010/08/30/performance-profiling-how-different-web-sites-use-browser-subsystems.aspx).

As you can see from Figure 1.1 about a third of a time loading an ajax heavy page is spent on rendering subsystems – making this subsystem an obvious target for optimization.

So what could be done to improve this?

One change the team felt could give a big improvement was to work directly with windows display api’s at as low a level as possible and remove any unnecessary areas of abstraction. By removing unnecessary calls rendering and composition would be more efficient.

Previous versions of Internet Explorer utilized the GDI+ libraries. Internet Explorer 9 (only available on Windows Vista and Windows 7) utilizes the Direct X libraries. It is important to note that the GDI+ libraries did perform hardware acceleration to some degree but the DirectX libraries make much greater use of GPU devices.

Direct X is the name for a collection of APIs mainly concerned with multimedia & in particular graphics. You have probably come across these libraries if you have installed a game in the last 10 years or so!

Internet Explorer 9 utilizes two DirectX libraries; Direct 2D (concerned with images and shapes) and Direct Write (text) . It is important to note that both of these are built on top of Direct3D libraries. DirectX is optimized to use the GPU if available.

Microsoft divides page rendering into 3 stages all of which can benefit from hardware acceleration – different libraries are used at different stages:

• Content Rendering (Direct 2d & Direct write)
• Page composition (Direct 3d)
• Desktop composition (Desktop Window Manager – part of Windows Vista/7)

In Internet Explorer 9 all of these stages can be hardware accelerated. This means that graphical calculations are performed quicker and more efficiently on the GPU. The offloading of work to the GPU also frees up resources that would normally be occupied for rendering to do other tasks.

In addition to performance benefits the DirectX libraries render text, images and animation smoother due to better handling of sub-pixels and per-primitive antialiasing (please refer to http://msdn.microsoft.com/en-us/library/dd370987(v=vs.85).aspx for more information).

But what will be accelerated?  Well it depends – it could be none, some or everything!

As a rough guide IE9 will use hardware acceleration for the following items:

• Text
• Vector graphics
• Images
• Backgrounds
• Borders
• Video
• Flash (from version 10.2)

Internet Explorer 9 gives you the option to turn off hardware rendering. This option is available by going to Internet Options/Advanced and checking the Use Software Instead of GPU rendering option. This could be useful if you are experiencing rendering issues with an unsupported GPU or for  experimentation. Note if by sheer bad luck you are using a machine with unsupported device this option will be greyed out (time for a new machine!).

Microsoft initially claimed that they were the only browser to have a fully hardware accelerated pipeline. This wasn’t strictly true however as recent versions of Firefox also support this (via an abstraction they refer to as “layers” between the browser and DirectX libraries). Recent versions of Chrome also support hardware acceleration to some degree.

Dean Hachamovitch, Corporate Vice President, Internet Explorer at Microsoft stated:

“Native implementations are just better for developers, consumers, and businesses. They keep Web sites from falling behind applications in performance and other important ways. While using cross-platform, non-native compatibility layers makes browser development easier, they don’t necessarily make a better browser.” http://blogs.msdn.com/b/ie/archive/2011/04/12/native-html5-first-ie10-platform-preview-available-for-download.aspx

Robert O’Callaha from Mozilla however argues “but an extra abstraction layer need not hurt performance — if you do it right” http://weblogs.mozillazine.org/roc/archives/2010/09/

So who is right?

Well in order to look at this lets conduct a completely unscientific couple of tests on my XPS 16 laptop (ATI mobility Radeon HD4670 GPU).

I am going to use the Fish tank demo from the IE site for this (http://ie.microsoft.com/testdrive/performance/fishietank/) with 500 fish & examine the frames per second rate. This demo utilizes Canvas and Javascript to display a number of fish swimming about an aquarium and gives a rate that in can render each frame. Its difficult to test just the graphical subsystems and this “benchmark” makes heavy use of Javascript.

Below are the results from my tests:

• IE9 hardware – 60FPS
• IE9 Software – 5FPS
• IE 10 preview – 4FPS
• Chrome  11.0.696.65 – 5FPS
• Chrome 11.0.696.65 hardware acceleration enabled * 7fps
• Firefox 4 – 4fps
• Safari 5.05 – crashed
• Opera 11.10- 5fps

*Chrome has this off by default as experimental but can be enabled with about:flags option

As you can see Internet Explorer performs very well in these tests. It is also interesting to note the big differences between hardware and software acceleration performance.

Its important to note that this test was developed by Microsoft and optimized for tasks they know the browser is very good at. A number of Firefox developers commented that you would be better using WebGL for this task which isn’t yet supported by IE.

To wrap up hardware acceleration is being implemented in all major browsers. At first glance you may question how important this feature is given the vast majority of the web and its related services are text based. However as we have seen rendering subsystems play a major part in a pages load time and various demos we have seen lately show just what is achievable with the next generation of web technologies such as SVG, CSS3 and various Html 5 features.

Further reading

http://blogs.msdn.com/b/ie/archive/2010/09/10/the-architecture-of-full-hardware-acceleration-of-all-web-page-content.aspx
http://blogs.msdn.com/b/ie/archive/2010/08/30/performance-profiling-how-different-web-sites-use-browser-subsystems.aspx
http://channel9.msdn.com/Blogs/Charles/IE-9-Surfing-on-the-GPU-with-D2D
http://blogs.msdn.com/b/directx/archive/2009/09/29/comparing-direct2d-and-gdi.aspx
http://blogs.msdn.com/b/ie/archive/2011/04/01/getting-the-most-from-ie9-and-your-gpu.aspx
http://msdn.microsoft.com/en-us/library/dd370987(v=vs.85).aspx
http://en.wikipedia.org/wiki/Internet_Explorer_9
http://weblogs.mozillazine.org/roc/archives/2010/09/

I was originally awarded MVP C# for the last 2 years due (I suspect) to my books coverage of the CLR and Language changes. I never felt completly comfortable with the C# focus as don’t consider myself a language expert and the web has always been my primary area of interest. I was thus pleased to change my MVP award focus to Internet Explorer (although I suspect Internet Explorer focus is less prestigious than C#!).

I spent some of this week at the MVP summit meeting the Internet Explorer team. It was great to speak to the team directly and understand some of the decisions they have made and a deep dive into various perf enhancements. I look forward to working with them and hopefully having an input into Internet Explorer.

The team have launched a great comp to see what you can do with HTML5 at http://www.beautyoftheweb.com/#/unplugged

A common issue when loading content through ajax techniques is that a browsers backwards and forwards buttons sometimes wont respond how the user expects. For example if you change a pages content in response to the click of a button and the user then clicks back expecting to return to previous content then its unlikely the application will function as expected.

Html5 introduces a history api allowing you to easily manipulate the browsers history and also hold state on each entry. This is pretty well supported already across modern browsers so is worth looking into now.

Below are some examples of how to use this:

history.pushState(stateObj, “page 1”, “IWasNeverReallyLoaded.html”);
history.replaceState(stateObj, “page 1”, “page5.html”);

I have started work on an application that I am tentatively calling WebAdvisor. The idea of this application is that it will analyze HTML for bad practices based on simple string matching rules and then direct the user to documentation showing a better way of doing stuff.

For example it might pick up stuff like:

<div onclick=”javascript:alert(‘Couldnt you add me a better way?’)”></div>

This came out of research I am currently writing for a presentation on Javascript best (and worst) practices.

Javascript has an application called JSlint that will analyze javascript for issues. At first I considered how to test Javascript without a browser (and there are a couple of .net js processors to do this) but then decided that simple string matching and manipulation could catch many issues.

I plan to create several different types of test e.g. html – (heh do we need to check for use of blink or marquee!), javascript, security etc all as plugable MEF modules.

Originally I was thinking this process could be integrated into a build. However most web applications are composed of many components so I think this is going to have to analyze the html (at least initially).

Anyway have done an initial check in of project – not too much there at the moment but let me know if you think this is a good/bad idea.

 

There is an interesting post (mainly concentrating on various patent issues) on the IE blog that IE will support the H.264 video standard (note that IE9 will also support Google’s WebM format that was looking the best bet until recently through an additional install).

This got me thinking about HTML5 and Video – is this something you should use now?

Hmm well lets start at the beginning.. Html5 contains a Video tag (there is also an Audio one thats very similar) giving you the ability to embed video on a web page.

The below code shows an example of how to do this:

<video id=”Video”   height=”500″ width=”500″>
<source src=”billyBrowsers.ogg” type=’video/ogg; codecs=”theora, vorbis”‘>
</video>

Pretty easy huh? There are also a number of other attributes you can add to the Video element such as loop (guess what this does!), controls (left up to the browser to render playback controls).

This has a number of advantages:

• No plug-in required! (although codec’s are necessary – see IE blog link above)
• Can be indexed by search engines
• Video is a DOM element so can be manipulated – Mozilla have a cool example of this.

However not all browsers support HTML 5 yet so whats a dev to do?

Hmm well hopefully you are designing your application using the philosophy of progressive enhancement and one way to outsource the complexity of this is to use a third party player such as SublimeVideo or Open Standard Media player that will attempt to use HTML 5 to play content and fall-back to Flash if necessary.