Meta

Flash vs HTML5 Performance (Updated January 2012)

Note: As mentioned by Alex in a comment, the code used in these examples is far from being efficient, which means the benchmark in question is more or less useless. In fact, it’s very difficult to properly benchmark two technologies that are fundamentally different. The only real usefulness is that of a comparison between browsers themselves, for HTML5 only. In any cases, all indicators point towards Adobe actively developing HTML5 technologies to take over Flash, so I think the point of comparing performance between the two is now pretty moot considering where the industry is heading in general.

January 2012 Benchmarks

Note: The test which includes shadows was omitted. It seems to have been implemented in a way which does not play well with GPU-accelerated canvases; both Internet Explorer and Firefox being GPU-accelerated on the canvas have shown the same results, which is showing.

Internet Explorer 9.0.8112.16421

HTML *

–

Canvas

80

SVG

60

Flash **

51

* Did not render correctly
** Animations stutter

Firefox 9.0.1

HTML **

27

Canvas

69

SVG **

3

Flash **

51

** Animations stutter

In Firefox, only the Canvas is GPU-accelerated.

Chrome 16.0.912.75

HTML **

40

Canvas **

33

SVG **

57

Flash **

51

** Animations stutter

Chrome has not yet enabled GPU acceleration by default, and with reason, their implementation sucks; see below:

Chrome with GPU acceleration switched on

HTML **

20

Canvas **

30

SVG **

27

Flash **

51

** Animations stutter

Conclusion

The winner for early 2012 is… Internet Explorer? Yes, believe it or not, contrary to what my friend likes to tell the world on Facebook, there is not such a world beyond Internet Explorer anymore and it’s not exactly time to move on.

With official support for Canvas and SVG* in Internet Explorer 10, 2012 will prove to be a very interesting year. I think it’s time to reconsider Flash’s superiority and validity.

Interestingly enough, despite its supposedly advanced internals, Google Chrome has been the slower of the bunch on layout performance. It’s always been that way, even when hardware acceleration was not present in the other browsers. Webkit in general does a horrible job with layout redrawing, hardware acceleration or not, although Apple seems to have nailed it in Lion and iOS of course, but that’s thanks to their own graphics framework, much like Microsoft and Internet Explorer 9, so there’s not much Google can do except develop it themselves or start using native frameworks.

* Microsoft already supports SVG officially in IE9, but in IE10 they’re making it a priority by phasing out support for VML, their own vector graphics markup, a move in the good direction.

March 2011 Benchmarks

The tests were all ran in each browser’s full screen mode, on a 1680×1050 pixels computer monitor.

Firefox 4.0 RC1

HTML: 19 fps Canvas: 27 fps SVG: 3 fps Flash: 56 fps

Opera 11.01

HTML: 60 fps * Canvas: 50 fps SVG: 20 fps Flash: 56 fps

* Opera didn’t support rounding the balls in the HTML version

Chrome 10.0.648.133

HTML: 28 fps Canvas: 47 fps SVG: 62 fps Flash: 56 fps

Notes

Again, I’m sorry for not testing IE9, but I happen to have the wonderful idea of doing these tests late at work, which is only on Windows XP, every time I realize Chrome has gotten magically faster again. This is even more awkward due to the fact IE9 is launching tonight at 5:30 p.m. PDT. I’ll make sure to do an IE9 edition of this (which requires an entire new set of tests on a different Windows 7-powered computer).

Verdict

Well, I now understand why Google has made so many efforts in optimizing their SVG render speed: Google Maps. Yes, if you’ve noticed recently, Google Maps non-satellite has gotten dramatically faster, and the text wraps around street names much better than before. It has a tendency to be on the small side, but it’s still better than Bing. This is in line with the Maps app on Android getting vectors too. So, SVG is looking to be one hell of a contender for Chrome but a no go on other browsers unfortunately.

As you can see, the biggest change in Chrome was starting with release 9, as noted earlier, so from there, version 10 doesn’t bring much. Overall, nothing changed, and the few differences are either test discrepancies or versions getting up to date (like Flash in Chrome).

In any cases, it’s important to note that Chrome is the first browser to surpass Flash in raw non hardware accelerated rendering speed, and it’s SVG, which is all the more important because it is vector-based, just like Flash.

From the days back when I used to be an active ActionScript 3.0 developer, I observed that bitmap rendering was much faster in Flash, so I’d be curious to see how that translates in this very test case, but Cameron didn’t make such an implementation of his benchmark.

Whatever the case is, and however it got that SVG was faster to render than Canvas in Google’s Chrome browser, you can clearly see that HTML5 games are closer and closer to getting faster than Flash.

February 2011 Benchmarks

The tests were all ran in each browser’s full screen mode, on a 1680×1050 pixels computer monitor.

Firefox 4 Beta 10

HTML: 17 fps Canvas: 27 fps SVG: 3 fps Flash: 56 fps

Now, what’s interesting here is how all three HTML tests, i.e. HTML, Canvas and SVG, maxed out Firefox to 50% CPU test, or, in other words, one single-threaded CPU core. Firefox’s native animation engine is therefore single-threaded. Flash, however, maxed out at 30%, and had jitter between 20 and 30. Although it is impossible to determine whether Flash is multi-threaded in this instance, since in reality, a single-threaded app will be executed on both cores, one after the other for each operation (for efficiency reasons, mainly in regards to heat dissipation; it’s a built-in feature of Intel’s CPUs and many others), which would effectively show a full core usage (50%) as 25% on each core, there is definitely a bottleneck happening somewhere in Flash’s animation stack.

Note that on this computer, Flash is not hardware accelerated, neither for video nor animations, due to the video card model. However, the new Flash 10.2 does play 1080p rather well with only the CPU compared to earlier versions. Everyone benefits, GPU-accelerated or not.

I think it’s also interesting to mention that while HTML tests sped up when lowering the resolution of the browser window, Flash stuck to the same ~56 fps average, although the CPU usage greatly diminished. This shows two things. One, the animation is too simple to truly test Flash’s speed. Two, somewhere, in the animation software stack of Flash, there is something limiting it to ~56 fps. It’s probably linked with the fact a Flash animation is usually limited by its scene’s set fps rate. I am not aware whether it is possible to make a Flash animation without a preset fps limit.

Opera 11.01

HTML: 60 fps Canvas: 50 fps SVG: 20 fps Flash: 56 fps

Although in this case, HTML is faster than Canvas, it’s important to note that the code isn’t entirely supported by Opera. For instance, the circles appear as unprocessed squares in the HTML test, which may explain the performance boost. Similarly, when enabling shadows, SVG does not show any shadows and ends up being faster than Canvas.

It’s to note that neither HTML nor Flash offers entirely smooth or v-synced tear-free animations, although the issue is not as glaring as in full-blown 3D video games.

Also, when enabling shadows, although clearly not something as hard to animate for Flash as for Canvas, with Canvas, Firefox drops to 13 fps, Opera to 16 fps, but Flash remains on top with the usual 56 fps and no significant change in the CPU usage. You could imagine that much more complex animations such as those required by typical video games would be well handled by Flash but not by HTML5. Unfortunately this animation does not nearly stress Flash enough to know what it can do versus HTML5, but given Canvas, the fastest HTML5 animation implementation yet, already drops frame-rate like crazy with only the addition of shadows, it’s easy to estimate Canvas can’t really do extensive animations and special effects yet.

Chrome 8.0.552.237

HTML: 37 fps Canvas: 45 fps SVG: 33 fps Flash: 51 fps

Chrome’s results are not as spectacular as Opera, but granted, its ability to cope with effects is much stronger than others, and with Canvas, the frame-rate achieved a good and stable 31 fps with shadows turned on, about twice as fast as Firefox/Opera with the same effects. Comparatively, Flash stayed at the same 53 fps. The reason Flash is slightly slower on Chrome is because it is version 10.1.103.20, since Chrome provides its own embedded Flash. I wanted to test only the stable versions of browsers, but since Firefox is so close to releasing the stable Firefox 4, I thought it’d be OK to use the beta for the tests. Granted, you can see Flash got slightly better with 10.2, which is always good news.

Given Chrome’s seemingly more solid HTML5 animation stack, I’d be tempted to believe this will get very interesting starting with the upcoming Chrome 9 which will enable by default WebGL, GPU-accelerated compositing and GPU-accelerated Canvas 2D. Although it’s made for 3D, I can already imagine how much more efficient the OpenGL-powered WebGL will be for intensive 2D animations.

Notes

I have not tested IE9 yet, but I do believe future advancements in GPU-accelerated graphics like IE9’s could potentially trump Flash. The thing is, Flash too is getting GPU-accelerated graphics, in particular on those smartphones and tablets where it could prove to be a real competitor framework to standard app development.

Verdict

For now, whenever you’ll need resource-intensive animations for the Web, you’ll want to go with Flash, but the very near future looks like it’s going to be very interesting on the HTML5 front.

Maybe the debate is more of a Chrome vs Flash thing now. And with the Moo Tools framework and others, you’ve got yourself a JavaScript capable like ActionScript 3.

After over a year the html5 are now catching or even getting better results than flash in this test. Especially canvas is fast cause is hardware accelerated on FF5 and IE9 when running in vista/win7. Only svg is soo slow in Firefox, is that bug or sth? And i cant wait when adobe release flash 11 with stage3d – that might make flash leadership once again.

Well, from a technical point of view, sure, Stage3D is interesting, but I think Flash is going away because it simply can’t rival with what a native language for a browser can do.

Besides accessibility, it’s also about providing high-performance platform-specific tie-ins in the browser, something Flash can’t do because it’s a virtual machine that needs to interpret everything the same way on every platform.

Conversely, Apple may decide to provide CSS animations that tie in with hardware acceleration on mobile devices, and Microsoft is already providing hardware acceleration with IE9.

HTML5 is important in this way because of its deeply open nature, allowing Microsoft, for example, to replace VBA with standard HTML5 for developing macros in the future 2012 release of Office.

Benchmarks are fun, but they don’t often translate into real world sales figures. Flash is going away as fast as tablets and smartphones are replacing PCs. Expect Windows 8 to accelerate this change even more.

No, flash is not going away, cause of major differences in browsers, IE9 still can’t run all HTML5 API, and javascript is an unefficient laguage.

With 3D, flash is going to compete with moderns consoles (coming for mobile too), the possibility to publish the same AS3/Flash based code to desktop app, mobiles apps (IOS AND android), and web is simply incredible, and is more paying (less time cost). In one or two years, every one will buy androids tabs to play quality games and have quality apps with 3D in flash. Everybody (except apple fanboys).

Just like Twinspirit, now I have seen what FP11 offers (like the arena famous car demonstration) I don’t think Flash is going away anytime soon…

I really believed in HTML5 for mobile applications but I was forced to go back to Unity3D when I tried to actually play games on my smartphones… Performances on mobile really suck right now, and by the time HTML5 is well supported, native applications middle-ware should have progressed to…

Seriously, it’s time to STOP using this benchmark as a means of comparing Flash to HTML5. I’ve heard some people say that the HTML5 versions aren’t optimized well, and I’m sure they’re not. But the Flash version is ABSOLUTELY AWFUL. Look at the code! The author basically used ActionScript just as if it was JavaScript. No types. No use of the BitmapData routines. He has absolutely no clue what he’s doing. I didn’t even know Flash could be run with the type of code he used.

With Flash 10, I rewrote this demo in ActionScript to use the BitmapData.copyPixels method. Flash was able to achieve 60fps with 15,000 objects (compared to this “benchmark” which shows Flash struggling with 500 because of the ridiculous coding approach).

Yes, I’m afraid you’re right. It’s very difficult to benchmark HTML5 and Flash in any meaningful way, or benchmark anything for that matter, simply because of different underlying engines.

In any cases, I think this is beyond the point. Adobe has already clearly shown Flash as a technology they will not support, in favor of HTML5, for which they are already developing animation tools. In my opinion, Flash Professional itself will eventually be repurposed into an HTML5 animation/IDE, maybe even with an ActionScript to JavaScript translator, which would frankly be appreciated, given AS3’s Object Oriented Programming qualities.

Its interesting to see how the systems are running. I will point out, and I am sure others have mentioned it too, when you script in flash using the stage3d system, these stats start becoming meaningless. (stage 3d is the real comparison to canvas as both should rely on the gpu).
I am currently developing a game in flash and html5, and the difference is vast. for websites, i can see html5 being very useful in standardizing the platform and bringing it up to date, but canvas isn’t quite matching up to flash. Using a framework like starling on stage3d you can produce about 1000 sprites with 256 x 256 images at about 58fps. canvas 3d with gpu acceleration on Firefox hits about 15 fps doing something this intensive.
I think flash and html will still have a long standing side by side relationship for many years to come unless there is a huge shift in the canvas performance. It may also be worth noting, that flash has a much higher consistency across the board which makes it much easier to develop for.
Don’t get me wrong, i certainly want html5 to work out… but the other factors like javascript, jaggered implementation from browsers, and the adoption of various standards (including video standards) will be a major hindrance which i hope the browser developers can overcome.

You have a point, but on the other hand, Firefox is not in any way a benchmark for canvas performance. Microsoft has already shown this countless times with its significantly faster hardware acceleration. But then again, this comes back to precisely what you’ve been pointing out: differences in implementation across different browsers.

But you have to account for mobile technologies too. One of the reasons I think Flash is going away as a run time is its poor support on mobile platforms. The plugin as a “boxed” execution does not fit the mobile Web model very well either. So many features are being baked in mobile browsers right now to account for varying pixel densities and other such variables. Flash is clearly lacking here and the focus is not there.

Logically, unless you’re targeting a purely desktop/laptop demographic, Flash doesn’t make sense. And that’s another issue, as increasingly, the focus is on well-integrated app stores enabling easier implementations of payment systems and better visibility for developers. If there’s one thing Flash is truly good for, games, it’s about to have it taken away as well, given the clearly more attractive app stores, not even counting the lack of Flash in IE10 on Windows 8 and Adobe’s own dismissive attitude of Flash as a mobile technology.

In fact, Adobe is even implementing HTML5 exporting abilities in Flash CS6, clearly pointing out to the trend that is slowly taking over the Web.

At this point, any hope or thought the Flash run time will remain important in any form is wishful thinking. However, as a developer, I would not dismiss the Flash Professional software or ActionScript because just as they can be used to makes games for BlackBerry Tablet OS 2.0 now, they might be used to create HTML5 games later. After-all, the Canvas is a much lower level framework than the Flash run time and there is clearly space for many frameworks to be built on top of canvas to provide more sophisticated means of programmatic animation. Alternatively, with Adobe AIR, Flash could be relegated to the jobs of a general third party framework such as Java, although I can see those disappearing as well.