Saturday, April 10, 2010

A demo of Internet Explorer 9 hardware acceleration

We all have to agree that the Internet Explorer team is doing a great job, this once, with IE9. Those who are not aware, IE9, which Microsoft demonstrated a preview last month, will offload rendering job to the GPU thereby improving speed of videos and JavaScripts rendering and general responsiveness of the system by a significant factor. Hardware acceleration is going to be the next big thing for web browsers; even Adobe Flash is adopting the same path.

FlyingImages

The IEBlog recently demonstrated how hardware acceleration actually boosts the performance of a site, using the Flying Images test on the IE9 test drive site.

Flying Images uses standard HTML, CSS and JavaScript markup to animate images, using a common coding pattern that is found on many places on the web today, particularly inside JavaScript based games and animation frameworks which need real-time responsiveness.

When Flying Images was run across different browsers Internet Explorer 9, with it’s ability to make full use of the GPU, was seen to handle hundreds of images at full speed while other browsers quickly came to a crawl.

Internet Explorer 8 took an entire core of the CPU (50% of the dual-core machine) and is still managed only 4.5fps. Notice that Internet Explorer 8 does not utilize the GPU for this graphically rich scenario.

FlyingImages_ie8

Google Chrome 4.1 also uses an entire core of the CPU and only able to make one move every 0.238 seconds which results in 4.2fps.

FlyingImages_chrome

An important thing to notice here is the identical FPS for both IE8 and Chrome 4.1 even though Chrome 4.1’s JavaScript engine outperforms IE8’s JavaScript on common industry benchmarks, a clear indication that real world tests are different from lab tests.

Flying images gives a more holistic view on browser performance. It calls on many different browser subsystems: JavaScript to calculate the new position of the images, CSS and layout to position the images, the display system to present them on the screen, and more. It’s an example of how browser performance is a multidimensional problem that spans more than JavaScript.

Apple Safari 4.0.5. also uses an entire core of the CPU and manages 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.

FlyingImages_safari

Mozilla Firefox 3.6, like other browsers, uses an entire core of the CPU but generates a significantly faster 16.1fps. Firefox manages to achieve this performance by slightly degrading the quality of the images during scaling, while the other browsers attempt to maintain full image quality.

FlyingImages_ff

Internet Explorer 9 Platform Preview, on the other hand, presents an entirely different picture.

FlyingImages_ie9

It uses both the CPU and GPU to achieve an unbelievable 60fps. Most surprisingly, IE9 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.

You can actually try out Internet Explorer 9 Platform Preview and run the demos.

0 comments:

Post a Comment

Popular Posts