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/
simpleisbest.co.uk 