Comparing Hardware Accelerated SVG across Browsers with Santa’s Workshop

March 9th, 2011

Internet Explorer 9 fully hardware-accelerates the entire Web platform. Different browsers take different approaches to hardware acceleration. These differences result in different levels of performance. Today we look at Santa’s Workshop, one of the entertaining Test Drive demos we released during the holiday season, and see how the different approaches to hardware acceleration benefit consumers and developers.

Pack as Many Presents as Possible

The goal of Santa’s Workshop is to pack as many presents as possible in real time. A scoreboard at the top of the screen keeps track of how many elves are working, how many presents have been packed, and a presents-packed-per-minute working velocity which we heard is how Santa evaluates his elves during their review cycle.

Santa’s Workshop is a performance demo written entirely in SVG and JavaScript. The more efficiently your browser can animate elves moving around on the screen, the more elves will appear and the faster they’ll be able to pack presents. Santa’s Workshop uses many emerging HTML5 and SVG patterns, including SVG DOM manipulation, applying transforms to groups of SVG elements, and playing background music through the HTML5 audio tag.

The demo keeps track of the frames per second (or number of times this loop is processed per second) and uses this information to determine when to add or remove worker elves. While the frame rate is above 55fps (meaning we’re running at close to real-time animation on a 60hz monitor), another elf is added. When the frame rate falls below 35fps, an elf is removed. The goal of this algorithm is get as many elves working at once as possible while maintaining a good experience.

Differences Between Browsers

Let’s take a look at how the different browsers use machine resources to when running the Santa’s Workshop demo. The below results were generated using the Windows Performance Toolkit which can be downloaded from Microsoft, and to continue to show the benefits of hardware acceleration across a broad range of hardware, these results were generated from a Dell Laptop (2.26 GHz Intel Core i3, 4GB physical memory, NVIDIA GeForce GTX 260M, 250GB 7200 RPM drive, Windows 7).

With Internet Explorer 9 RC, Santa’s Workshop is able to achieve 50 elves and pack 238 presents per minute. The elves smoothly animate across the screen in real time and the contents of the scene are rendered correctly. Below, in red you will see that Santa’s Workshop uses one full core of the CPU while the demo is running. Today’s Web platform is single threaded meaning the browser can’t distribute this work across multiple cores. In blue you will see where the GPU is used to render the scene to the screen. GPUs are massively parallel and extremely efficient at graphical computation. And in green you will see where the screen is updated after the GPU has finished rendering the scene.

Next, let’s look at the latest Chrome build available at the time of this writing—Chrome 11 Canary with hardware acceleration enabled. With Google Chrome 11 we can only achieve 15 elves packing 71 presents per minute. When we look at the CPU, GPU, and updates we see that Google Chrome 11 is essentially using the same amount of machine resources as Internet Explorer 9. This may be surprising at first considering Chrome 11 can only pack 30% the number of presents as Internet Explorer 9.

Firefox 4 (Beta 12) now leverages hardware acceleration by default, however this most recent version of Firefox was only able to achieve 1 elf working and pack 4 presents per minute. In addition, the frame rate quickly fell to 13 frames per second. When we again look at the CPU, GPU, and updates charts you can see that Firefox’s usage of the GPU is very sporadic. The majority of the graphical computation occurs on the CPU and only occasionally do you see computation occur on the GPU.

Safari 5 did a bit better than Firefox 4 and was able to achieve one elf working and pack four presents per minute at a frame rate of 20fps. Here’s how Safari uses the machines resources to animate the one elf around the screen.

As you can see, all four browsers were using comparable machine resources. They fully used an entire core of the CPU and performed very similar amounts of GPU computation. Yet the amount of work each browser was able to perform using these resources and the user experience varied significantly.

Browser CPU GPU FPS Elves
Presents Packed
per Minute
IE 9 100% 20% 56 50 238
Chrome 11 100% 16% 41 14 71
Firefox 4 100% 4% 13 1 4
Safari 5 100% 10% 20 1 4

Full Hardware Acceleration is the Difference

With Internet Explorer 9 we’ve fully hardware accelerated the entire Web platform. Different browsers have taken different approaches to hardware acceleration. They’re choosing to accelerate only pieces of the Web platform, building abstraction layers between the hardware, and using underlying machine resources with different levels of efficiency. Our approach is simple though – we’re going straight to the hardware.

Santa’s Workshop is a fun example of a hardware accelerated SVG driven experience. We enjoy building these goofy demos and stressing what’s possible with hardware accelerated HTML5. And considering Santa’s Workshop received over 100,000 unique views during the holidays, it seems you have as much fun playing with these demos as we have building them.

We hope this post has been helpful in understanding some of the different performance characteristics across the browsers and encourage you to start thinking about what’s possible with fully hardware accelerated HTML5.

—Seth McLaughlin, Program Manager, Internet Explorer