A Closer Look at Internet Explorer 9 Hardware Acceleration Through Flying Images
One of our objectives with Internet Explorer 9 is taking full advantage of modern PC hardware to make the browser faster. We’re excited about hardware acceleration because it fundamentally improves the performance of websites. The websites that you use every day become faster and more responsive, and developers can create new classes of web applications through standards based markup that were previously not possible. In this post, we take a closer look at how hardware acceleration improves the performance of the Flying Images sample on the IE9 test drive site.
When you run Flying Images across different browsers you’ll see that Internet Explorer 9 can handle hundreds of images at full speed while other browsers, including Internet Explorer 8, quickly come to a crawl.
The easiest way to see the impact of hardware acceleration on the performance of a page like Flying Images is by comparing CPU and GPU activity across browsers.
You can monitor CPU and GPU activity using TaskManager or your favorite utilities. For detailed performance analysis though, we recommend using the Windows Performance Tools (available for download here). These development tools are commonly used to profile Windows resource usage and can filter activity at the process level. We wouldn’t recommend these tools for the casual user but they’re a valuable resource for developers analyzing performance. The results below came from running the Windows Performance Tools on a two year old Dell Precision WorkStation (3.0 GHz Intel Pentium Dual-Core, 4GB physical memory, NVIDIA GeForce 8600 GT, 100GB 7200 RPM drive, Windows 7). These results will vary slightly based on exact PC configuration, but the overall patterns are representative of the Internet Explorer 9 customer experience.
Let’s start by looking at the performance characteristics of Flying Images in Internet Explorer 8. The below graphs show the CPU and GPU usage and Visual Update frequency over a one half second period after the page was fully loaded and animations started.
Internet Explorer 8 has essentially taken an entire core of the CPU (50% of the dual-core machine) and is using that entire core to move the images as quickly as possible trying to maintain 60fps. Although some browsers (including IE8) have a multi-process architecture, the web programming model is single threaded, so a multi-core CPU can’t work in parallel on this problem. Even with this significant CPU usage, you can see that Internet Explorer can only make one move every 0.221 seconds which is shown through the visual updates part of the chart below. The result is 4.5 frame updates per second or 4.5fps. You’ll also notice Internet Explorer 8 does not utilize the GPU for this graphically rich scenario.
If we perform the same analysis on Google Chrome 4.1, you’ll see that Chrome also uses an entire core of the CPU, and doesn’t make any use of the GPU, trying to move the images at 60fps. Chrome is only able to make one move every 0.238 seconds which results in 4.2fps.
Continuing with webkit based browsers, let’s look at Apple Safari 4.0.5. Safari also uses an entire core of the CPU trying to move the images at 60fps, but is only able to make one move every 0.191 seconds which results in 5.2fps. Even though both Chrome and Safari are based on webkit, Safari is able move the images 20% faster than Chrome. This is a good example of how the Google and Apple architectures and webkit instances have divergence. You’ll also notice that although Safari is the most graphically capable of the webkit based browsers it does not utilize the GPU.
Moving to Mozilla Firefox 3.6, you’ll see that like other browsers Firefox uses an entire core of the CPU trying to move the images at 60fps. Firefox does a better job on performance and is able to make one move every 0.062 seconds. This results in 16.1fps which is noticeably faster than the above browsers, but is still only a quarter of the 60fps goal. One of the techniques that Firefox uses to achieve this performance is to slightly degrade the quality of the images during scaling, while the other browsers attempt to maintain full image quality. One of the challenges with not being hardware accelerated is that you’re often forced to make tradeoffs around things like performance and quality. We’ll talk more about this in a future post.
When you run this page in the Internet Explorer 9 Platform Preview and look at the graph below, you’ll immediately see how hardware acceleration fundamentally changes the performance characteristics of the web. The first thing that you’ll notice is that Internet Explorer 9 utilizes the GPU and is able to move the images in real-time at 60fps. More importantly, Internet Explorer 9 is able to achieve this real-time performance only using 12% of the total CPU and 15% of the total GPU.
The most shocking thing about this example is that it doesn’t challenge Internet Explorer 9. Internet Explorer 9 is only using 12% of the CPU and 15% of the GPU without compromising the quality of the images, which means that 80% of the PC resources are available to developers.
It’s clear that HTML5 will enable a new class of applications that were previously not possible through standards based markup, and these applications can’t be limited by the performance of today’s browsers. Doing HTML5 right means enabling developers to build web applications that have the performance of desktop applications. That’s our objective with Internet Explorer 9 and why we’re so excited about hardware acceleration.
Let us know what you think of hardware acceleration!
Lead Program Manager for IE Performance
Update: Fixed incorrect capitalization.