Web developer Chris Black benchmarked an HTML5 animation made using the Canvas tag against the same animation running in Flash. The results may surprise you:
- HTML5 Canvas on iPhone 4: 22fps
- HTML5 Canvas on Nexus One: 40fps
- Flash Player 10.1 on Nexus One: 57fps
Oh, and Flash Player used half as much battery.
Now, does this mean that HTML5 sucks or shouldn’t be used? Of course not! As Chris points out in the comments, it may be possible to tune this Canvas implementation to run better on mobile. He also points out ways that Flash could run better on mobile. All these implementations are new, and I expect they’ll all improve, especially as developers figure out what techniques work best for each.
Competition is great. For things that HTML5 does best, use it; same goes for Flash. Focus on your viewers’ needs, and Adobe will step up with great tools no matter which technolog(ies) you choose.
[Update: Per various reader comments, Chris has posted more details on optimizing Canvas/JavaScript-based animation.]
On the whole, the Flash vs HTML5 argument is pretty misinformed. Both technologies have their strengths and weaknesses. If Flash was the undisputed champion we wouldn’t have choppy playback, CPU usage spiking, virtually non-existant hardware acceleration and abominable battery drainage – when simply trying to watch a video online. This is the experience across platforms (Mac/Win) and devices (Desktop/Mobile) for Flash video playback and that’s it’s biggest weakness, and yet, it’s the very thing that, made Flash ubiquitous, and it’s the heart of the Apple vs Adobe battle.
Misinformed indeed.
Even on modest PC hardware, those problems are not apparent.
The issues on OS X have/are being addressed.
I’m sure Flash can improve further, but the x64 on IE9 beta is working very well, so I’d say improvements are already forthcoming and I hope that the situation continues.
Don’t miss my point. The misinformed part is Chris Black’s assertion that the Flash vs HTML5 debate is on the “animated interface” front. I concede that if you really think it’s necessary to have a “flashy” animated interface, Flash may be the best route, although what you can do with JavaScript and Canvas is increasingly impressive.
The core of the debate is video playback.
Adobe says, “We want to control the online video market and unnecessarily place our technology between media playback and the hardware to ensure dependence.” (Side note: I would argue that if it were not for Adobe’s aggressive and impressively successful foray into the video playback market, their Flash technology would currently be on a swift road to obsolescence.) At the expense of this control is performance and battery drain. I’ve tried to watch Flash video on Android devices. It’s not pretty.
HTML5 says, “Video playback should be plugin free and provide the quickest most efficient access to the hardware possible, however possible.” What this looks like will vary, depending on the hardware and OS of each device, but the end result will be the same: excellent performance and great battery life.
So, if the core of the Flash vs HTML5 debate isn’t at all represented in Chris Black’s benchmarks, it seems kind of pointless. That’s the misinformed part.
Hugh is right, let’s see a Flash video vs Native video test and let’s talk about CPU usage, battery drain etc…
Strawman.
Adobe, to my knowledge, has never said what you’ve just “quoted”.
Adobe has been trying to improve hardware access for Flash for some time. Apple didn’t provide them with the ability for a long time. That’s just one example.
By all means call for different tests to further inform the market about the performance, but littering it with straw as you’ve done above is one of the key complaints that folks like John have, and quite rightly so.
I’m by no means a Flash-fan-boi – it really doesn’t bother me in the slightest how the content arrives, so long as I can view it all. What I want, is for all devices (my Win 7 PC, my iPhone 3GS with iOS 4, my iPad with iOS 3 and so on) to all be able to view the content that is out there, and will be out there going forward.
When it comes to this sort of thing, I’m an end user. The content exists. I’m annoyed that my otherwise excellent Apple products won’t show me a huge amount of content that already exists.
I’ll happily create HTML5 slideshows when my photo host (Zenfolio) provides such tools, if and when I feel that it’s the best option (or I may provide both options if that becomes possible). For now, though, Flash is far and away the best way to achieve that for me.
It was tongue in cheek Phil. 🙂 The reality is that who controls the video playback market is what’s at stake here for Adobe. The reality is that with HTML5, the Flash player is now an unnecessary plugin, and an inefficient layer wedged between the hardware and the media. The reality is that online video playback is dependant on Adobe software unnecessarily. (a lot of Flash video players are really just streaming .mp4 video which is compatible with your iPad, iPhone if it weren’t for Flash getting in the way). This is the reality, not some misrepresentation of the facts. No straw here.
1) I think it was clear he wasn’t quoting anything Adobe said, but more “putting his words in a thought balloon”. Ah the limitations of punctuation.
2) The HTML5 code is hopeless. It clears the background twice on each refresh just for starters! Second it erases everything and redraws it every frame which is exactly what Flash doesn’t do (Flash is highly optimized to render deltas). Simply erasing just the previous ball (rather than the whole background) more than doubles the framerate.
“I concede that if you really think it’s necessary to have a “flashy” animated interface, Flash may be the best route”
I take it back. The more I think about it, there’s very few places in real world usage where I would give up HTML5 for Flash. I realized that “animated interface” might be interpreted as building your website in Flash…and I would not even remotely entertain or recommend that.
I think the sheer fact that no one seriously uses Flash as a replacement for HTML should indicate that the debate is not on the interface front. This further supports my belief that the battle field is video.
The reality, is, that there’s masses of Flash content right now that I can’t access on my Apple devices. As an end user, I just want to access content.
Preventing Flash from being run when there is no alternative is poor customer experience.
History shows us that it’s not always the best technology that wins. HTML5 is great, but it’s not yet a standard. Get the creators of content to change their delivery by all means, but until that happens, don’t block users from viewing content (which is basically what Apple does).
Steve Jobs doesn’t like anyone controlling anything unless it’s him. That’s his business, but you can’t support that model and at the same time object to Adobe wanting to support their business which, by and large, is one of the most delivered technologies on the web.
Build a better delivery system and then convince people to use it, but don’t mindlessly slag off Adobe for supporting their own product! (which is not a direct dig at you, Mark, as you’re being thoughtful if a bit obtuse at times, but many people buy into the kool aid).
@Mark Jenkinson, here’s someone who did a video comparison of HTML5 video vs Flash video, sometimes Flash video had less CPU, sometimes HTML5 video did, it all depended on OS & the browser being used:
http://www.streaminglearningcenter.com/articles/flash-player-cpu-hog-or-hot-tamale-it-depends-.html
Also note these tests were done before the Apple openned up the API for GPU hardware access on Mac OS. The current version of Flash Player now takes advantage of that if you have Mac OS 10.6.
Also one of the reasons Flash can be more CPU intensive at times is because it’s rendering not just video, but anything put in front of the video (video controllers) or just checking to see if anything is there. Basically, there’s several layers to check and render, instead of displaying plain video. Since video playback has become such a hot issue, Adobe is talking in the next version of Flash a way to push video straight out without any additional layers on top of that, becoming more efficient.
“I’ve tried to watch Flash video on Android devices. It’s not pretty.”
I’ve seen both really smooth and really choppy examples of video on Android devices and it’s all been dependent on the size of the video. There’s a lot of HD video out there made for large screens, and if you play that video on a small device, whether in Flash or HTML5, it looks lousy. Basically, video needs to be encoded for the smaller resolution for it to play really smoothly.
Yeah but you see the difference here is, you’ve seen good examples and choppy ones on Android… however on my iPhone I’ve only seen silky smooth examples because Apple didn’t let a technology that wasn’t up to the task onto their device
@Terry, that’s only because most of the HTML5 video examples have generally been optimized for mobile. Put a HTML5 video fallback to a Flash HD video, as I’ve seen some suggested and it will slow down to a crawl on an iOS device.
There’s also plenty of cool HTML5 animation examples that are incredibly slow and choppy on iOS devices. Go to any HTML5 showcase, demoing canvas and SVG and see how horribly many of them render on an iPhone or iPad.
A what day and year am I writing this? No, the issues haven’t been addressed. I’m still waiting about two years later.
Please since apple opened up that 3rd party thing it should be easy the only problem is when the heck will they release
1.) full flash on android (no mic/camera access cmon how am I supposed to use conference apps?)
2.) flex to iPhone converter they said 6 months but I do understand since apple initially closed their offering but from today in 6 months if flex isn’t released with that plugin then well that’s going to not really work out too well.
However on a positive note they do have some really cool stuff namely
1.) the p2p implementation of rtmp
2.) adobe air (that’s kind of cool)
I just hope they release the first two points soon 🙂 if your listening to these comments can we get an estimate?
@Nikita, regarding #2, you can use Flex to make iPhone applications. Here’s a link from Adobe blog with instructions how to use Flash Builder 4 to make iPhone apps:
http://blogs.adobe.com/cantrell/archives/2010/09/packager-for-iphone-refresher.html
It’s all command line now, and integration into the tool is coming eventually, but it can still be done.
That said, Flex is still not very efficient for mobile, so you would have to make sure it’s very lightweight Flex app. However, the Flex team is addressing with the next Flex release, version 4.5 codenamed Hero. Hopefully there should be a lot more details (maybe an alpha or beta of the code?) at Adobe MAX10.
As a statement on the relative efficiency of the two technologies, this demo is a terrible basis for comparison. If you look at the two code samples, you’ll find that they are doing two very different things.
In the flash/actionscript code, he’s creating the screen, creating a sprite, and moving that sprite during the loop. He’s relying on the underlying flash frameworks to understand how to efficiently draw and redraw that sprite.
In the javascript code, he’s blanking out the entire screen, filling it in with white, drawing the ball, and then drawing the background. Each time through the loop. Is it any wonder that the CPU is going mad? Mad for power?
As a number of commenters have pointed out, just by restricting the redraws to those portions of the image that have changed, the efficiency of the html5 version can be tripled. If he were to take the additional step of not regenerating the ball every time through the loop, and just blitting the modified bits, he’d get even better performance.
And he could do that just as simply by using a reasonably good javascript animation package, instead of trying to do all the heavy lifting by himself.
Of course, the good news side of things is that for simple animations like this, Flash doesn’t completely suck. But that’s not really the argument, now, is it?
However, on the Flash side there’s other optimizations to be made and he’s not even using hardware acceleration. Basically, he’s trying to make the tests as close as possible to give an apples to apples comparison. Perhaps in the end it’s not a good comparison but it should be done with all the optimizations on both side so that you can see how far both platforms can go.
@John – I think your argument really just enforces the case for Flash. The reality is, developers want to deliver the best possible result with the least amount of work. What you describe certainly sounds more complicated than relying on the “underlying flash frameworks to understand how to efficiently draw and redraw that sprite.”
Well, here’s the thing. If you use raw JavaScript, that’s whatcha gotta do to be efficient. You could do the same thing in actionscript, but that would be silly. You be ignoring the entire set of frameworks that make up Adobe’s years of experience building efficient graphical interfaces.
But it’s also silly to ignore the numerous JavaScript frameworks that make it just as easy to build efficient animations.
Looked at another way, it’s also nothing for Flash to crow about. Power consumption, for example: Flash only uses half the power of the most naïve, inefficient, CPU-hungry implementation possible. Congratulations!
“I think your argument really just enforces the case for Flash. The reality is, developers want to deliver the best possible result with the least amount of work.”
I absolutely don’t think so. The ability of a specific architecture to self-optimize should not be used as a means to skew results for a rivaling architecture by using inefficient or sloppy programming. That’s just what this is. The whole test is meaningless and without value due to it’s bias. And it’s not that there are not a ton of existing Java/JavaScript frameworks that he could have used… And let’s forget about this simplicity argument – on the best of days, ActionScript is just as complicated as other ECMAScript/ JavaScript dialects. It’s not that he used a linear keyframed animation for the demo, is it? It’s really pretty pointless. in due time there will be plenty of tools for creating this HTML5 stuff just as there is Flash today and both their output will be on par eventually…
Using either Flash or HTML5 on my laptop, it runs at 60hz (LCDs are assumed to be 60Hz).
But yeah, the redraw thing is a bitch. But changing it wont make it faster since there is an FPS cap
This test is meaningless, no one is saying use html5 to make games and apps on mobile instead of flash. They are saying make games and apps native instead of flash.
Let’s see a flash vs native test then we’re talking.
OK everyone. Please check out the source code I posted and not the optimized version posted in the comments. Both ActionScript and JavaScript are executing the same code, redrawing the entire canvas every frame.
The whole point of the post was to suggest the gap in performance between mobile device and the way mobile browsers use canvas. My iPod Touch rocks with CSS3 but my Android hardly renders any of it. When will we reach a point where these new technologies perform consistently across devices? Canvas iPod vs Android is 24fps vs 40fps. CSS3 works on the iPod but not on Android. Now I need canvas with a CSS3 fallback?
Actually, that doesn’t seem to be true. The code is cosmetically very similar, but what’s going on under the hood is very different.
When you execute the render methods in JavaScript, they draw directly to the screen. When you execute the same calls in actionscript during the ENTER_FRAME event, you are putting them into the display list, which is then rendered later. The flash runtime is free to optimize your calls in whatever way it sees fit. I do believe that it renders the display list off-screen and blits the results over, but I’m not sure.
One more note:
People can advance the reasonable argument that: “Look how easy it is to use similar code to get better performance in Flash,” but here’s the basic reason that this is an apples-to-oranges comparison.
Flash is a full run-time environment for dynamic content and interactivity. Javascript is a control language for adding dynamic content and interactivity to web pages. That difference is at the very core of the technologies.
What does that mean? Flash is always running. It has to: it’s built on its own little virtual environment, with its own little run loop, and it drives its own content.
Javascript at its core is meant to get out of the way. Execute, make some changes, and then fade into the background until the next time the browser needs it. That’s its job: modify the content of the web page.
In order for these tests to be equivalent, you need an animation framework on top of Javascript that provides the same kind of run-time efficiencies that flash provides. And such frameworks exist, to one degree or another.
Javascript itself, as used in this demo, is kind of a low-level interface with only a limited runtime of its own. Flash is a full environment. You can add things to Javascript. With Flash, you can go so low, but no lower.
Complaining about Javascript lacking decent animation tools at this level is like complaining about C++ lacking integrated thread support. It’s not the intent of the tool to provide such primitives.
You left out a statistic:
Flash Player 10.1 on iPhone 4G: 0fps
which means Flash on Nexus One rulz.
Thank goodness something came along to take up the slack from the PC vs. Mac debate. Where would we be without a little platform bashing and e-masturbation.
When you have your evangelists showing the demos, make sure it works! It’s embarrassing to see html5 (not even a standard) already on par with flash!
“The reality is that who controls the video playback market is what’s at stake here for Adobe.”
It’s not about playback, it’s about selling tools to create the video content. Flash Player is free, after all, but once Adobe lose the monopoly on creating and encoding content for this particular delivery platform, they have to compete with other vendors, many of which have superior tools for creating H.264. Adobe is stuck in the mud with their implementations on that end – lack of performance and output quality in many cases. So ultimately, that’s the part they’ll have to turn around…
[You know that Flash Player has been rendering H.264 video for, like, three years, right? –J.]
[You know that Flash Player has been rendering H.264 video for, like, three years, right? –J.]
And would have Adobe added this feature if not by a certain point the H.264 train had taken on a life of its own? And weren’t you actually quite happy that doing so still required Flash? It’s still somewhat related to the discussion, even if I may not have gotten my point across in the way I meant it. I mean, in a while, nobody will need those Flash video player skins anymore to begin with and I would think that even more fancy uses of Flash video e.g. with transparent regions overlaid on normal pages in an invisible player become less relevant. So yes, regardless of the limitations in their initial spec and implementations, the video and canvas stuff in HTML5 will take a considerable piece of the cake away from Flash such as we know it today. I don’t see this as a problem – as a development platform, there will always be some form of Flash and whether it spits out JavaScript code or a compiled SWF should ultimately not matter, if big red A knows how to turn the app and technology around to their advantage, but it will simply become less visible and partially thus less relevant to a number of users…
“You know that Flash Player has been rendering H.264 video for, like, three years, right? –J”
And you know it’s been rendering h.64 inefficiently, with high CPU, and battery sucking only a vampire could love for three years, right?
If I were you I wouldn’t use h.264 video with Flash as an example of an advantage of Flash, because it’s a huge disadvantage.
[The basis for your complaints has nothing to do with H.264 per se. Flash Player uses more CPU than pure video players because it wasn’t designed as a pure video player. The FP team will shortly rectify the situation by enabling a video-optimized screen mode. –J.]
Oh, good we’re on the same page. Flash is not a good video player, by my opinion and your admission. So we won’t be hearing that argument from the Flash folks anymore then?
When I can play a simple Youtube clip on my MacBook Pro without forcing my fans to spin up to 100% (and with hardware acceleration) then let’s talk. Until then, the video argument is in the lose column for Flash.
As others have pointed out, your article if pure FUD based on a terribly coded test that, when optimized, performs as well or even better than Flash for this simple animation. Will you be retracting or updating your sensationalistic headline and article?
Very interesting, I would like to see
Silverlight vs Flash vs HTML5
statistics. Hardware acceleration seems to be the real answer to any of the technologies.
the amount i pay for my iphone 4 i want the choice as to wether i use flash or html5 .. a jailbreak iphone is soo much better for so many reasons .. this whole debate shouldnt be about versus or mac vs pc or adobe vs apple … option to choose whats available is better ..freedom of choice. i dont want some nerd deciding for me lol
When the specification and control of Flash is handed over to some standardization body then Flash may be taken seriously. But as long as it is the private toy of Adobe Inc. it is not suited for the open internet. Major parts of the web should not be controlled by one greedy company. The prices of the Adobe SDK (international prices) are way above even a high-end Apple laptop. The bad thing about Apples decision is that this became an Apple vs. Adobe thing. When in reality it should be a Free-World (free and open web) vs. Adobe fight.
So lets hope Apple can make the Flash-plug run safely on their devices (and clearly show the user the cost of doing so) so we can start the real fight to abolish proprietary software from the free and open web.
What is an iPhone 4G?
[Oh no, I’ve said too much!! Sorry, typo on my part (watching too many Sprint ads, maybe?). Thanks for the catch; now fixed. –J.]
A note on the FlashTM v HTML 5 debate. Any halfway smart developer would never leave the fate of their client’s content in the hands of a proprietary plugin architecture, because when the web evolves beyond that plugin (as it is now) that content will be lost.
Flash developers don’t seem to get it: it’s about content delivery, not fancy animations. It’s not about what you as a dev think is cool, it’s about what is practic for the reliable delivery of your client’s content. The web is moving beyond plugins. And it’s moving beyond FlashTM.
[Let’s leave the Flash-vs.-other-stuff debate aside. Are “fancy animations” bad? Who are you to tell every car company, movie studio, etc. that they shouldn’t deliver richer experiences? Clearly, in their judgement, that’s what works for their businesses. But I know how this movie ends: We have to hear a bunch of sanctimonious crowing about the badness of animation, until such time as Apple is able to clone that animation. I was amazed that no one called bullshit on the iAds launch, where Steve showed HTML5 replicating what Flash could do a decade earlier & claimed, with a totally straight face, that no one had ever seen “emotion” in an ad like this. All animals are equal, but some are more equal than others. –J.]
Well put, John.
This argument is so ludicrous. It is like film theorists arguing that documentary filmmaking is more aesthetically pure than narrative filmmaking. There are those businesses who feel like presentation is much more important than whether or not their web presence adheres to a pure publishing standard. That is why people like HBO (and the vast majority of entertainment enterprises) choose to use Flash as their means of delivery. There will always be that division with regard to publishing creative content. Once these critics realize and accept that hopefully we will no longer have to endure this kind of vitriol.
To those of you who feel it necessary to incessantly bash a medium- you obliviously are not content creators and have way too much time on your hands.
It’s not about aesthetics, it’s about basic accessibility. I shouldn’t have to rely on a plugin to receive your content; likewise, you shouldn’t have to rely on a plugin to deliver it. It is precisely because I am a content creator that I recognize this crucial distinction.
Well, it IS about aesthetics for the client who wants a rich interactive experience that can only be accomplished (currently) with Flash. They don’t care about whether this requires a plugin on the user side (mainly because the player is so ubiquitous). It’s their right to choose aesthetics over accessibility and millions of businesses do it very day. I find it incredible that we are having a discussion that had relevance a decade ago but is moot today. Clients want Flash development. Period. If I want to visit a website that requires 5 plugins that’s my prerogative. And if you or anyone else chooses to disable Flash content in their browser that is theirs.
I (and other folks here) don’t troll the purist html/css forums telling people they can’t or shouldn’t use the authoring technology of their choice. That’s because there is a place for both-a point John has stated over and over. I author in both and I don’t waste energy bashing one or the other. I use the tool that most effectively delivers the solution that the client requests.
I would hardly consider pointing out the practical benefits of avoiding a plugin architecture as trolling. I am merely responding to a biased (and apparently inaccurate) post on an Adobe(R) blog.
What I’m really interested to ascertain is why Adobe is willing to risk the rest of its business solely to push this tired old plugin. As javascript/HTML5 continues to grow, Flash becomes less and less relevant (this is natural, and it can’t be stopped; it’s technological evolution). Conversely, the rest of Adobe’s product suite continues to be relevant and industry-leading. Why not focus on improving Audition or Premiere? Why not continue to press the ubiquity of Photoshop and Illustrator? While Adobe wastes countless hours and immeasurable effort (from the top down and the bottom up) to defend Flash, I worry that their important (revenue generating) products will be forgotten about.
I am surprised that the shareholders allow this dogmatic defence of a plugin that likely barely contributes to Adobe’s bottom line to continue at all. And, I am even more surprised that Adobe would risk its entire reputation by exchanging public vitriol with Apple over Apple’s (entirely sensible) decision not to include Flash on the iPhone.
Concentrate on your core market, Adobe. Flash is becoming irrelevant; you would be wise to make sure the rest of your product suite doesn’t meet the same fate. To that end, you’d be wise to concentrate on HTML5. Adobe could be a leader in HTML5 developer tools, and could create an entire video management platform for content creators like every major movie studio, YouTube, and every news media organization. Wise up, Adobe. Seriously.
You still need a browser to access that content, as when browser renderers change, so will your content. My old HTML websites from the late 90’s all look like complete garbage, some of them barely readable. On the flip side any old Flash content or Flash sites I’ve done look and work the same as they did when I made them. Even my old Shockwave games, a plugin that has become quite niche now, still work properly.
Web browsers have a big problem in backwards compatibility, an major issue that most vendors ignore and ends up resulting in slowing down the rate in people upgrade. As the reason that IE6 continues to have market share, is so many companies rely on web applications that work with IE6 and break when rendered in other browsers.
Actually my argument has nothing to do with Apple, but thanks for clarifying Adobe’s position.
[“My opinions are my own,” not those of Adobe proper. I think, though, that many people here would indeed object to the notion that animation, games, etc. are inherently stupid and useless. –J.]
I’m a little disappointed an Adobe engineer would post this type of example under the title “Flash runs faster, more efficiently than HTML on mobile”. I mean, this is as bad as the recent game of “telephone” that transposed Best Buy’s words into saying iPad is cannibalizing laptops by 50% when his real words used terms like “some” and “up to”. –Only, this headline isn’t a game of “telephone”, its written, I assume, by the author.
If you’re trying to compare Apples to Apples (and not Apples to Oranges), could you PLEASE appreciate the fact that “HTML 5” is implemented through Javascript, and as such can have good and bad animation routines?
#1. You’re not even using an HTML animation framework in order to compare how browsers render HTML 5 animation that is programmed properly.
#2. If the point is that with Flash, you do not need to “program properly”, as its all optimized, then use a tool like Ajax Animator and see if the performance is better or worse when using an environment to output something comparable to a SWF file, but using HTML 5. Even better, use the “preview” technology that renders HTML 5 from Flash. Or better yet, take the same animation and show it using Smokescreen.us or the Gordon javascript runtime for Flash.
#3. If you’re just trying to keep things simple with NO regard for accuracy (I’m sorry, you’re caveat about “things you can do to improve performance isn’t very honest, as it fails to acknowledge the basic differences already inherent in Flash in terms of how it basically renders to the screen between refreshes).
#4. While sexy, in a way all “under the belt” shots are, it would be MUCH more honest to simply hit HTML 5 in the face… just highlight the complexity of setting each animation up. That way, basic optimizations for HTML 5 work against it, and makes Flash look even better.
We observed some benchmarks on Froyo (new Android) on Nexus One with our charting library that suggested the same. (youtube: http://www.youtube.com/user/zingchart#p/a/u/0/vYW7eLbQcII )
However, other benchmarks suggest even or edge HTML5. I think as they say “your mileage may vary” but this “Flash sucks” meme has less legs once tested.
Here’s the side-by-side HTML5/Flash speedtest used in the video: http://www.zingchart.com/flash-and-html5-canvas/#speedtest
As a general rule, we’ve found HTML5 to win with simpler animating/drawing, but to get very slow as complexity increases (a few thousand points on a chart, etc).
I get 40fps on my iPhone 4, what’s wrong with your’s?
(I’ll post the same comment here that I did on Chris’s site.)
If you want the equivalent of using Flash in the natural HTML5 way, you should be using SVG. It’s a more natural fit for this kind of thing (moving objects around) than a dumb pixel-matrix like Canvas, and it (probably not unrelated!) tends to perform much better on Webkit for these sorts of things.
I did a very simple port of BallBounce.htm to SVG, opened it on my iPod (4gen), and I’m seeing 55-57 FPS, i.e., more than double the frame rate of Canvas.
According to your graph, I’m guessing the iPod CPU is a bit slower than the N1 CPU, yet I matched the Flash FPS exactly using only HTML5. So I’d say HTML5 is *faster* than Flash, not slower.
“Anybody notice a re-occurring theme here?”
Yes, that for any conclusion it’s apparently possible to come up with a completely contrived test to demonstrate its truth. Here, you didn’t compare HTML5 against Flash: you compared one tiny piece of HTML5, Canvas, against Flash.
Just for the sake of curiosity, is there any chance you can post the SVG code someplace?
Whats the point of doing a benchmark if you use the slowest method you can think of.
I made some quick changes to the html version. You can check it from http://testarea99.appspot.com/html5ball/ballbounce.htm
Runs 60FPS on my iPhone4 and iPad. Don’t have other devices in hand atm. It would go much faster if I would remove the 60FPS max limit but it doesn’t make sense then as screen can’t refresh so often.
PS: Don’t take the source as an example of optimized JS/HTML. It can be done faster but doesn’t matter as we are already hitting the maximum limit.
PS2: I’m not saying HTML5 is faster than Flash. I’m just bit annoyed that Mr. Nack published so bullshit benchmark.
Tony’s version gets me 40fps on my original iPhone 2G.
Genuinely Wondering how Tony’s example runs @60 fps. 42fps on Moto Droid…58.8fps on a quad-core desktop computer running google’s chrome browser…
http://fatgr.in/jstest.html
Otimized version.
iPhone 4 -> 58fps
Flash my ass 😉
I’m only getting 44FPS on my iPhone4. Any idea what the difference is? That seems significant.
I get 58fps on my iPad too…
@Tim:
the SVG argument is not a good one, because SVG does NOT run on Android devices, as I’ve found out while building complex .js UIs recently 🙁
my new audio-reactive Flash music player with full-screen visuals performs beautifully on Android 2.2 🙂
I’m a veteran Flash & .js guy (I’ve even built many apps in Obj-C)… I think Flash is clearly the only option for high performance graphical experiences until browsers catch up – the penetration for good/performant html5 support is horrible.
I’ve been playing with lots of iDevice-specific CSS/js, which is good for animations, but is fully proprietary to Safari/webkit and non-portable. I will also say that canvas and html5 audio/video on iDevices is absolute garbage.
Thanks to Steve Jobs for the advice to use the html5 standards that Apple has failed to implement properly…
-J (mac/iPhone user/dev, flash dev, and Steve Jobs hater).
Considering Webkit is open source, I’d imagine Google could ramp-up SVG support on Android much more universally than getting the Flash player 10.1 to work on all Android devices. Right now, Flash has some lofty requirements, and pretty much requires the resources of devices shipping this year to do well. I think the only exception might be the original Droid released in Nov. 2009. My impression is that iPhones would need more resources to run Flash well than many of them currently have (esp. the 3Gs).
Great post. One of the most objective, well-informed and succinct comments on the issue. We need more of these type of posts-from people who are actually in the trenches testing the technologies.
John Nack, you’re such a dishonest horsemonkey.
[How so, anonymous guy? –J.]
Flash wins out in ease of content creation. This performance comparison is just a straw man. So easily proven false.
http://twitter.com/ryang_uk/status/25040888606
So when are we seeing a retraction?
The simple bouncing ball thing is hardly a good test of real world animation efficiency.The recent google logo with bouncing balls was great example of how heavy js animation is extremely heavy on cpu and here’s another good comparison
http://www.eastcoastinteractive.co.uk/test/flashheist/
I’ve yet to see any html5/js animation of any complexity that wasn’t a complete cpu hog.
I still don’t understand the point of this debate at the moment. There is no flash for iphone. Flash for android only came out earlier this year and it is still in “beta”. Even if adobe had been allowed to put flash on the iphone I am guessing it would still not but up to the standards required to get it included in the iphone OS yet. In 2 years or so – an outside guess at how long it would take to get a decent version of flash on the iphone – I am sure that html5 will also be able to do present more complex content as well.
@John Smith, I guess the reason for this debate is that one of the reasons Steve Jobs said he kept Flash off of the iOS devices was that it because of performance and battery drain.
Also Flash for Android is no longer in beta and since one of the partners in Adobe’s Open Screen Project is ARM, where Adobe has done a lot of optimization for their chips, which Apple uses in their iOS devices, I imagine it woud only take a few months to get an iOS version of Flash up to speed.
Later the developer Chris Black was looking into a way for good smooth Flash-like experiences on both Android & iPhone and hasn’t been able to find it yet. Things like canvas, SVG, CSS3 run smoothly on one platform but not in the other, or in some cases don’t work at all on one platform.
Definitely have seen this video before. Curious to see what the results would look like using some kind of cloud computing app for either iphone or the android. As for me, I’ve had the iPhone for about a year, and have had an app called Always on PC for about a week and a half. They just came out with some upgrades on the product, and the flash player for firefox is what made me pull the trigger on it. Not bad for the price actually. Here’s a link to the demo I saw- iPhone Firefox Flash Player
Link to above: http://www.alwaysonpc.com/FireFox-iPhone-flash-player/
http://daringfireball.net/linked/2010/09/20/not-so-fast
I get 60fps on my iPad on this Html5 demo…I think the title of this post is rather misleading…
On a different angle, this benchmark only demonstrates, once again, that too many Flash developers know how to code in ActionScript only and rely completely on the Player to optimize their underperforming thing. The author of the article just recognized that and is rewriting the benchmark.
@Andrew, the Flash version is horribly unoptimized, the developer was just trying to get the exact same code in both platforms for an apples to apples comparison. For the Flash version he even switched off hardware acceleration as he felt that would be giving Flash an advantage. He’s now experimenting with some optimizations on the HTML/JS side of things and will look to optimize the Flash version afterwards as well.
It’s not about whether or not Flash or HTML5 is better or performs worse than each other. It’s about a web that does NOT require proprietary technology and code to function.
I’ve hated the idea of Flash since I discovered it in 2000.
http://daringfireball.net/linked/2010/09/20/not-so-fast
“Ends up the “HTML5” test was really, really poorly coded. Here’s a version that gets 45 FPS on my iPhone 4. Pays to be skeptical of any claim that Flash Player works well on mobile devices.
UPDATE: Here’s another tweaked version of the canvas demo, this one from Charles Ying, that updates the FPS counter less frequently (to match the Flash version), which performs even better.”
Adobe, LAZY, LIARS.
http://daringfireball.net/linked/2010/09/20/not-so-fast
“Ends up the “HTML5” test was really, really poorly coded. Here’s a version that gets 45 FPS on my iPhone 4. Pays to be skeptical of any claim that Flash Player works well on mobile devices.
UPDATE: Here’s another tweaked version of the canvas demo, this one from Charles Ying, that updates the FPS counter less frequently (to match the Flash version), which performs even better.”
ADOBE, LAZY LIARS AS USUAL. FLASH DEVELOPERS ARE RETARDS THAT CAN’T CODE EFFICIENTLY AND STILL STUCK IN THE PAST.
Are you on meds?
Adobe lost credibility by posting a Flash-.html5 comparison test that apparently, didn’t use code optimized for .html5.
Instead of focusing so much hype on a mobile platform that hasn’t been released just yet, how about updating Flash 10.x to fix the constant crashes on the Mac? On Snow Leopard, I encounter the dreaded Flash Crash each and every day (the number of crashes limited only by the number of minutes spent using Flash). This experience does not inspire confidence about mobile versions of the product.
What I’m really interested to ascertain is why Adobe is willing to risk the rest of its business solely to push this tired old plugin. As javascript/HTML5 continues to grow, Flash becomes less and less relevant (this is natural, and it can’t be stopped; it’s technological evolution). Conversely, the rest of Adobe’s product suite continues to be relevant and industry-leading. Why not focus on improving Audition or Premiere? Why not continue to press the ubiquity of Photoshop and Illustrator? While Adobe wastes countless hours and immeasurable effort (from the top down and the bottom up) to defend Flash, I worry that their important (revenue generating) products will be forgotten about.
I am surprised that the shareholders allow this dogmatic defence of a plugin that likely barely contributes to Adobe’s bottom line to continue at all. And, I am even more surprised that Adobe would risk its entire reputation by exchanging public vitriol with Apple over Apple’s (entirely sensible) decision not to include Flash on the iPhone.
Concentrate on your core market, Adobe. Flash is becoming irrelevant; you would be wise to make sure the rest of your product suite doesn’t meet the same fate. To that end, you’d be wise to concentrate on HTML5. Adobe could be a leader in HTML5 developer tools, and could create an entire video management platform for content creators like every major movie studio, YouTube, and every news media organization. Wise up, Adobe. Seriously.
Nack, you gonna update the misleading information in this post any time soon? Instead of just including it in small print
Google has been advising web developers on how to prepare sites and apps for its TV platform, and Google TV’s universal search will present web search results right next to local and cable TV content. Google TV is based on Android, which also uses Webkit as its default browser.
html5 training
The problem with Flash is not Flash. 🙂
It’s how it’s used. I have no problem on my mac looking at YouTube, Vimeo or playing some online Flash game. However. Many sites are clogged with Flash ads, GPU acceleration or not, your computer is gonna take the weight. And choke. Example:
http://www.aftonbladet.se (Swedish newspaper). Sometimes it has a couple of megs of Flash content (mostly ads).