Skip to main content

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.

Labels:

Comments

Post a Comment

Popular posts from this blog

How to Record CPU and Memory Usage Over Time in Windows?

Whenever the computer is lagging or some application is taking too long to respond, we usually fire up task manager and look under the Performance tab or under Processes to check on processor utilization or the amount of free memory available. The task manager is ideal for real-time analysis of CPU and memory utilization. It even displays a short history of CPU utilization in the form of a graph. You get a small time-window, about 30 seconds or so, depending on how large the viewing area is.
17 comments
Read more

Diagram 101: Different Types of Diagrams and When To Use Them

Diagrams are a great way to visualize information and convey meaning. The problem is that there’s too many different types of diagrams, so it can be hard to know which ones you should use in any given situation. To help you out, we’ve created this diagram that lays out the 7 most common types of diagrams and when they’re best used:
Post a Comment
Read more

How to Schedule Changes to Your Facebook Page Cover Photo

Facebook’s current layout, the so called Timeline, features a prominent, large cover photo that some people are using in a lot of different creative ways. Timeline is also available for Facebook Pages that people can use to promote their website or business or event. Although you can change the cover photo as often as you like, it’s meant to be static – something which you design and leave it for at least a few weeks or months like a redesigned website. However, there are times when you may want to change the cover photo frequently and periodically to match event dates or some special promotion that you are running or plan to run. So, here is how you can do that.
1 comment
Read more