Pandora Moves to HTML5

Screenshot showing link above normal Pandora player with a link to preview the all NEW Pandora website
I love new things just as much as the next person. So I have to admit that I was intrigued when I saw the little banner above pop up above the normal Pandora music player in my browser.

I clicked on the link to change to the new Pandora layout and was immediately greated with a splash screen, styled similarly to the Pandora mobile apps. I was immediatly struck by the better use of space that the new Pandora had, and how it seemed somehow more responsive. Everything seemed to be rendering so much better/faster with this new version, and it just seemed to integrate better with the browser. I was able to resize the player, and it made much better use of the page space than the previous version did.

After playing with the new interface for a bit, I had a suspicion that this might not even be a Flash app anymore. Sure enough, the task list in Google Chrome showed that the Flash Plugin wasn't running!

After discovering this, I had to compare the old player vs. the new player in terms of CPU and memory use. Here are the results of my totally unscientific survey of performance of the old, Flash based Pandora vs. the new HTML5 based Pandora. Before the test, I killed all non-essential apps, and restarted the browser between tests.

System: Windows 7 64-bit, AMD Phenom II X4 955 @ 3.2 GHz, 8G of memory
Browser: Google Chrome 14.0.835.15

Flash Based Pandora
Screenshot showing Flash Plugin in the Google Chrome task list using about 100 megabytes of memory and 8 percent of the CPU
Foreground:
90-120MB of memory
6-9% CPU when playing
4-6% CPU when paused

Minimized:
90-120MB of memory
1-4% CPU when playing
0% CPU when paused

HTML5 Pandora
Screenshot showing the HTML5 based Pandora using 71 megabytes of memory, and 1 percent of the CPU
Foreground:
70-80MB of memory
1% CPU playing (Max 3)
0% CPU paused

Minimized:
60-65MB of memory
1% CPU playing (Max 3)
0% CPU paused

Based on my development experience way back in the early days of Windows (C, WinMain's, and Message Pumps, oh my!), I knew that for a variety of reasons, a minimized app would often take less resources than a foreground app. That's the reason I tested both versions both in normal windows, and in minimized form.

The Flash app used more resources on average (I sampled the numbers over a minute or so) than the HTML 5 app in all ways. Interestingly, running the old Pandora minimized did lower CPU utilization quite a bit. Running the new Pandora minimized seemed mostly to only release some memory.

One thing to be careful with is that we can't make any assumptions about HTML5 being more efficient than Flash overall with this simple test. The developers who created the new Pandora app might have made better design decisions with the new version based on what they learned from the first version. Possibly re-writing the app in Flash would have resulted in similar performance gains.

I think what is interesting is that Pandora, a major online service provider, has decided that HTML5 was important enough for their strategy that they made a switch. There are other high profile cases of switching (Scribd) or at least experimentation (YouTube). One could probably blame Steve Job's stonewalling of Flash as a major contributor to this shift in thinking.

Having worked on a large Flash application recently, I would say that the current limitation with HTML5 is tooling. Flash has a very efficient model for putting apps together (their compiler could use some work, though), that no HTML tooling I've seen so far can match.

Also interesting is that Adobe itself is investing in providing HTML5 tooling. It's a smart hedge for them, and makes sense given their history with DreamWeaver tooling for HTML 4 development. Hopefully Edge will continue to develop into a fully fledged HTML5 application development IDE.

Comments

Popular posts from this blog

Ghetto Cloud Foundry Home Lab

Using Snapshot Isolation with SQL Server and Hibernate

Fedora, Ant, and Optional Tasks