12

We're looking at developing a Windows 8 Metro-style app which will be very photo-heavy, so we're concerned about UI performance. On iOS it was an easy decision (Objective-C over HTML to get the UI performance we needed), but researching Windows 8 I'm having a harder time telling how much faster XAML will be than HTML5/CSS.

I've seen general comparisons between XAML and HTML5 (like this one), and there's an SO answer that touches on performance, but provides no data to back up his claim or explain why XAML is faster.

From what I've read, HTML5/CSS is rendered using IE10's rendering engine, meaning it isn't super-native and may be slower. But I'm not sure how the XAML is rendered, or just how "native" it is.

Has anyone done performance comparisons between the two technologies, or can you provide links to further explanation about how each is rendered (with performance in mind)?

Community
  • 1
  • 1
Ben Hoyt
  • 10,694
  • 5
  • 60
  • 84
  • The new XAML implementation AFAIK is all native and uses DirectX for the most part for rendering. But again, I think IE10 uses DirectX for rendering too. – Krishna Sep 12 '12 at 06:05
  • Something to keep in mind is the developers familiarity with each technology. Too often application performance is degraded because the engineer is not familiar with the proper patterns or data structures for the platform. Generally speaking UI engines are all adequately fast for the majority of use-cases. In pushing these to extremes you are likely to discover the differences. – allingeek Sep 24 '12 at 20:48

3 Answers3

12

Here are my thoughts on this one:

First XAML can give you a better performance than HTML5. If you use XAML combined with C++ you'll get the best performance for WinRT, because C++ is native code. If you use C# instead you depend on the CLR (Common Language Runtime) which is slower then native code.
- Reference 1
- Reference 2

Second, if you are going to include a lot of JavaScript libraries, which you probably will, it will have an impact on performance. (jQuery, jqQuery plugins, backbone.js, ...)

Then, like you said, the HTML5 in JS is rendered using IE's engine. So this is a tricky one. It really depends on how you are going to write your code. For best practices for both XAML and JS you can look here.

From personal experience. I wrote an app using XAML/C#. It feels better then Windows Phone 7 and 7.5. Mainly because they trimmed down .NET. The new async and await model is pretty good to. You can easily implement asynchronous calls, to webservice or image rendering in your case.

But I'm also interested in the numbers, so if anyone done a test, that would be great.

Community
  • 1
  • 1
Preben Huybrechts
  • 5,853
  • 2
  • 27
  • 63
  • That best practices link was very useful, thanks, and has information about how each platform works. – Ben Hoyt Sep 12 '12 at 08:19
  • 10
    Just to clarify, the XAML rendering engine is pure C++ / COM whether you're using C++ or C#. The code behind in C# does essentially use the CLR but rendering does not. There is a performance penalty for accessing UI elements from code because you must cross the CLR-COM boundary, but this is minimal. Any presentation that does not require interaction with code (for example animations) should run at the same speed whether you're in C++ or C#. The remaining notes about JS are valid, but it's worth noting that WinRT does "JIT Compile" JavaScript code on first execution. – Jared Bienz - MSFT Sep 18 '12 at 22:00
  • @JaredBienz-MSFT, does a FlipView (for example) using JS call into the same C++ rendering engine as a FlipView would in C#? Or is the JS FlipView implemented entirely differently, and done using JS/HTML like custom controls would be in JS? – Ben Hoyt Sep 19 '12 at 03:37
4

IE10 has a hardware-accelerated engine, including a GPU accelerated HTML5 canvas. That means rendering is likely to be just as fast in HTML5 as it is in XAML, since both ways uses the GPU to render.

Logic can be a few times slower in JS, but often it doesn't matter. If your app is not bottlenecked by a heavy amount of logic processing, and like many apps is simply mainly event driven with no heavy loops, JS is probably fast enough.

Then you might want to take in to account it is far easier to port HTML5 to other platforms.

AshleysBrain
  • 22,335
  • 15
  • 88
  • 124
3

Speed isn't really a big issue unless you're doing some that requires some intense processing, or needs to be executed in a certain window of time.

In reality, computing has become so fast spending time on optimization is just taking time from implementing new useful features. Only optimize where need be.

I'd say make your choice based on the functionality of the 2, and how well you know each of them. Really a couple milliseconds aren't really much to worry about. I'd say most of your end users aren't going to benchmark your application, they're more likely to be drawn in by features and functionality.

We aren't running on 64kb of ram and 400mhz CPUs anymore.

Of course this is assuming you're not doing something that's processor intensive. If you are, then you're looking into the wrong technologies all together.

tsturzl
  • 3,089
  • 2
  • 22
  • 35